Hogyan illessz be egy stíluslapot? Amikor egy böngésző elolvas egy stíluslapot át fogja alakítani az oldalt a stíluslapnak megfelelően. Háromféle módon illeszthetsz be stíluslapot az oldaladba:
1.) Külső stíluslap A külső stíluslap akkor hasznos, hogyha több oldal megjelenését szeretnéd egyetlen fájllal irányítani. Mindegyik oldal forráskódjának fej (head) szerepelnie kell a stíluslap elérési útvonalának a parancs segítségével.
HTML
A böngésző ki fogja olvasni a stílus definíciókat a mystyle.css fájlból és annak megfelelően fogja formázni az oldal stílusát.
Külső stíluslapot bármilyen szövegszerkesztő programmal tudsz készíteni. Arra figyelj, hogy ne használj HTML parancsokat a stíluslapon belül és .css formátumba mentsd el a munkád végeztével. Például:
HTML
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t írtál a "margin_left: 20px" helyett.
2.) Beépített stíluslap Beépített stíluslapot akkor használj, hogyha egy oldalnak egyéni megjelenést szeretnél adni. A stíluslapot az oldal head részében adhatod meg a
A böngésző most olvasni fogja a stílus definíciókat és ezeknek megfelelően fogja beállítani az oldalt. Megjegyzés: Régebbi böngészők nem ismerik a közti részt HTML-es megjegyzésbe teszed ().
HTML
3.) Belső stílus A belső stílussal a CSS előnyeit veszíted el, ugyanis a HTML elemekhez hozzárendelsz egy style attritbútumot amin belül adod meg az elem stílusát.
HTML
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
4.) Többszörös stíluslapok Hogyha azonos kiválasztóra több tulajdonság lett beállítva különböző stíluslapokban, akkor az értékek öröklődni fognak a jobban meghatározó stíluslapból.Például egy külső stíluslap a következő tulajdonságokat tartalmazza a h3 kiválasztóra:
és egy belső stíluslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:
HTML
h3 { text-align: right; font-size: 20pt }
Hogyha ezt a két beállítást (a külső és belső stíluslapban szereplő tulajdonságokat) egy oldalon alkalamazod, akkor a h3 tulajdonságai ezek lesznek:
HTML
color: red; text-align: right; font-size: 20pt
A szín (color) a külső stíluslapból lett örökölve, míg a szöveg helye (text-align) és a betűméret (font-size) a belső stíluslapból.
A szöveges verzió nem adja vissza az eredeti lap tartalmát korrektül, nincsenek képek és formázott szövegek, az eredeti verzió megtekintéséhez: Kattints ide!.
Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t írtál a "margin_left: 20px" helyett.