hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu it hu hu ceb hu en hu hu hu hu hu hu hu hu hu hu hu en hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu cs hu cs en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs hu cs en hu hu hu hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
CSS használatának, csatolásának módszerei - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebből a cikkből megtudhatod, hogy milyen CSS csatolási módszerek állnak a rendelkezésünkre, ha szeretnénk a CSS formázás adta lehetőségeket kihasználni.
Az előző leckékben már érintettük a mostani témát, de mindenképp érdemes még részletesebben is kifejteni a CSS használatának, csatolásának lehetőségeit. Azt már tudjuk, hogy mi a CSS, most pedig tanuljuk meg, hogy milyen módszerek állnak a rendelkezésünkre, ha szeretnénk a CSS formázás adta lehetőségeket kihasználni.
A CSS csatolásának 4 módszere van:
Összekapcsolhatjuk a HTML dokumentumot egy külső CSS fájllal
A HTML dokumentum   részében is megadhatjuk a CSS-t
Beágyazhatjuk az adott elem kezdőcímkéjébe (tag-jébe) a stílus meghatározásokat
Alább megnézzük mind a négy módszer szintaktikáját, előnyét, hátrányát, plusz még példákat is nézünk minden egyes módszerre.
Kezdjük talán a legegyszerűbb, leggyorsabb módszerrel a beágyazott, inline CSS-el. Azért hívják beágyazott vagy inline stílusnak, mert az adott elem kezdőcímkéjébe ágyazzuk be a stílusbeállításokat. Ebből következik, hogy ennél a módszernél a CSS a HTML fájlba kerül.
TARTALOM  Code language: HTML, XML (xml)
A “style=” rész után kell idézőjelek közé megadnunk a kívánt stílus beállításait. Nézzünk meg egy példát, hogy könnyebben érthető legyen az inline stílus megadás.
Ez egy piros szöveg lesz.   Ez nem piros, mert itt nincs stílusdefiníció.  Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Gyorsan és egyszerűen hozzátudjuk adni az adott elemhez a kívánt stílust.
Nem tudjuk egységesen szerkeszteni az adott elem összes előfordulását. Például, ha később létrehozunk egy újabb p elemet, akkor annál újra meg kell adni a rá vonatkozó stílusbeállításokat.
CSS elhelyezése a  -ben
Az előző megoldással szemben ez már egy sokkal kedvezőbb megoldás, hiszen itt a CSS kódot a HTML dokumentum   részébe helyezzük. Így akár már globálisan tudjuk formázni egy adott elem összes előfordulását.
STÍLUSDEFINÍCIÓ;     Code language: HTML, XML (xml)
A fenti szintaxisból tisztán kivehető, hogy a stílus a fejrészbe kerül. Fontos, hogy a   és a   között adjuk meg a formázásokat.
p {color:red;}        Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Elég egyetlen egyszer megadnunk egy elem stílusbeállítását és az összes előfordulásakor olyan lesz, amilyennek szeretnénk.
Csak azon az oldalon fog szerepelni a meghatározott formázás, amelyik dokumentumba elhelyeztük. Azaz ha a weboldalunk több aloldalból áll, akkor csak azon az oldalon fog létezni a formázás, ahol megadtuk.
CSS fájl hozzácsatolása HTML dokumentumhoz
A fejlesztők kedvenc megoldása, hiszen nagyon rugalmas és könnyen értelmezhetővé teszi a kódot. Ebben az esetben az összes CSS formázást egy külső, a HTML dokumentumtól különálló fájlba tesszük. Ez azért kiváló megoldás, mert ha több aloldalunk van, akkor mindegyik aloldalba beköthetjük ugyanazt a CSS fájlt, így mindegyiken élni fog a CSS dokumentumban szereplő formázás.
Code language: HTML, XML (xml)
Ha a CSS fájl és a HTML dokumentum ugyanabba a mappába van, akkor elegendő csak a CSS fájl nevére hivatkozni és nem kell az elérési útvonalát megadni. A kód többi elemét nem kell módosítanunk.
A különálló CSS fájlba lévő stílus szintaktikája:
ELEM { TULAJDONSÁG: ÉRTÉK; }
A CSS fájl kiterjesztése: .css
Akár több CSS fájlt is hozzácsatolhatunk a HTML dokumentumunkhoz.
Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
p { color:red; } Code language: CSS (css)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példát elemezve láthatjuk, hogy a HTML kód   részébe becsatoljuk a stilus.css nevű fájlt, amelyben meghatároztuk, hogy a p elemek pirosan jelenjenek meg. Így a jobb oldalt eredményként látható, hogy az összes p elemünk piros lett.
Ha egyszer meghatározzuk a CSS stílusbeállításait, akkor többé már nem kell. Elég, ha minden egyes HTML dokumentumban csak ezt az egy fájlt csatoljuk be.
Egy kicsit időigényes lehet, mert létre kell hoznod egy új fájlt, majd becsatolnod a HTML dokumentumba.
Ez a módszer nagyon hasonlít az előzőhöz, jelen esetben az @import segítségével külső stíluslapokat importálhatunk be HTML dokumentumunkba.
@import url(ELÉRÉSI.ÚTVONAL); Code language: CSS (css)
Pár információ az @import-ról
A @import segítségével lehetőségünk van egy CSS fájlba egy másik CSS fájlt importálni.
A @import utasításnak a dokumentum fejrészében kell elhelyezkednie, de fontos, hogy a @charset deklaráció után legyen megtalálható.
A sor végére kötelező kitenni a pontosvesszőt, hogy ezzel lezárjuk az utasítást.
@import url("STILUS.css");      Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
p { color:red; } Code language: CSS (css)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Jól látható, hogy az előző módszerhez képest körülbelül semmi sem változott, csak annyi, hogy itt másképp “kötöttük be” a CSS fájlt.
Ezzel a CSS csatolási lehetőségek végére értünk, mindenki eldöntheti, hogy számára melyik a legjobb, legegyszerűbb módszer. Minden helyzetben más és más módszer használata ajánlott. Ha nagyon egyszerű, kevés CSS kóddal járó oldalt készítünk, akkor jó megoldás lehet az inline CSS használata, ha kicsit bonyolultabb, de csak egy oldalból álló weblapot készítünk, akkor a fejrészbe való becsatolás ajánlott. Ezeknél bonyolultabb esetekben mindenképp külső CSS fájllal érdemes dolgozni.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
CSS alapok (A CSS alapjainak összefoglalója)
HTML stílus, stíluslap és CSS használata, avagy HTML style
Mi az a CSS? A CSS bemutatása
#CSS #css beágyazott #css csatolása #css head #css importálás #css inline #css kezdőknek #css külső fájl #css magyar #css magyar nyelven #css webprogramozás #magyar css
Mi az a CSS? A CSS bemutatása
Mi az a CSS kijelölő, azaz szelektor? (CSS selector használata)
A legfontosabb, legalapvetőbb CSS parancsok, utasítások
CSS használatának, csatolásának módszerei
A CSS használata [CSS használati útmutató]
CSS komment, azaz megjegyzés használata (CSS comments)
Színek használata CSS segítségével (CSS colors)
Szövegszín beállítása CSS-ben (CSS color)
CSS háttérszín beállítása (CSS background-color)
CSS színátmenet (Lineáris és sugárirányú CSS gradient)
CSS háttérkép beállítása (CSS background-image)
Dőlt betű beállítása CSS-el (CSS italic)
Szöveg aláhúzás CSS segítségével (CSS underline)
CSS szövegformázás (Szövegszín, szövegigazítás, szövegátalakítás, szövegdekoráció, szövegárnyék, szöveg háttér)
CSS keretek, szegélyek használata (CSS border)
CSS margó beállítása (CSS margin)
CSS alapok (A CSS alapjainak összefoglalója)
CSS padding használata (CSS padding magyarul)
CSS hivatkozások, linkek formázása (HTML a elem formázása CSS segítségével)
CSS táblázat formázás (CSS table)
Gomb formázása CSS-el (CSS button)
CSS képigazítás (Kép igazítása középre, balra, jobbra CSS-el)
Reszponzív weboldal készítése (Viewport és CSS Media Query)
CSS pozíció (abszolút, relatív, rögzített, statikus, ragadós)
Mi az a z-index és hogyan kell használni?
CSS float használata (CSS úsztatás, lebegés)
CSS szélesség, magasság (width, height, max-width, max-height, min-width, min-height)
CSS fonts (betűkészlet, betűtípus, betűvastagság)