A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit .css kiterjesztéssel kell elmenteni.
KARAKTERKÓDOLÁS BEÁLLÍTÁSA
A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a stíluslapnak:
@charset "utf-8";
KIJELÖLŐK, TULAJDONSÁGOK, ÉRTÉKEK
Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value).
@charset "utf-8";
h1 {
color: red;
}
Ebben az egyszerű stíluslapban a h1 címke a kijelölő (selector), a color: red; sor pedig a meghatározás, ezen belül a color a tulajdonság (property), a red pedig ennek a tulajdonságnak az értéke (value). Általánosan:
@charset "utf-8";
kijelölő {
tulajdonság1: érték1;
tulajdonság2: érték2;
tulajdonság3: érték3;
...
}
A tulajdonság megnevezése után kettőspontot ( : ) kell írnunk, majd következik az érték, ami után pontosvesszőt ( ; ) kell tennünk.
A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázása.
CSS KOMMENTEK
HTML megjegyzést vagy kommentet a <!-- és a --> jelek közé írhatunk. CSS-ben pedig a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. A megjegyzéseket nem veszi figyelembe a böngésző, semmilyen hatással nincsenek a kinézetre, két dolgot szolgálnak:
Hosszabb stíluslapokhoz érdemes megjegyzéseket írni a megfelelő helyre, hogy ha később elővesszük, akkor tudjuk, mit miért írtunk. Ez főleg akkor fontos, ha nem csak magunknak készítjük a stíluslapot, hanem másnak is meg kell értenie.
Teszteléskor hasznosnak fogjuk találni a megjegyzést. Ideiglenesen megjegyzések közé tehetünk kódrészleteket, amikre éppen nincs szükség.
@charset "utf-8";
/*Ez egy megjegyzés.*/
h1, h2, h3 {
color: red; /*Ez egy megjegyzés.*/
}/*Ez
egy
többsoros megjegyzés.*/
STÍLUSLAP BEÁGYAZÁSA
Az elkészült stíluslap bármennyi HTML oldalhoz használható egyidejűleg. Viszont ahhoz, hogy a stíluslap hatással legyen rá, össze kell kötni a HTML fájlt és a stíluslapot. Ezt háromféleképpen tehetjük meg:
1. Külső stíluslapok
Ha egy HTML fájlra alkalmazni kívánunk egy stíluslapot, akkor a fejrészbe (<head>...</head>) kell írni a következőt, ha a két fájl azonos mappában van:
<head>
<link href="stiluslapneve.css" rel="stylesheet" type="text/css">
</head>
A rel és a type attribútumnak mindig ez kell hogy legyen az értéke, ha stíluslapot ágyazunk be, a href-nek pedig a stíluslap elérési útvonalát kell tartalmaznia a HTML fájlhoz képest. Ez a leggyakrabban alkalmazott megoldás a stíluslapok beágyazására, ezt a sort minden weboldalunk kódjába bemásolhatjuk a href-nek a megfelelő értéket adva.
2. Belső stíluslapok
Olyan stílusok megadásakor érdemes használni ezt a módszert, aminél tudjuk, hogy csak egyetlen weboldalhoz fogjuk felhasználni. Ugyanis ha egy stíluslapot már kettő, vagy több weboldalhoz is felhasználunk, akkor ajánlott külön stíluslapban tárolni őket, és a fenti 1. módszerrel társítani a weboldalhoz. A <head>...</head> részbe kell beírni a stíluslapot a <style>...</style> címkék közé.
<head>
<style type="text/css">
h1 {
color: red;
text-align: center;
}
h2 {
color: blue;
text-decoration: underline;
margin-bottom: 1em;
}
</style>
</head>
3. Szövegközi stílusok
A style attribútumot bármelyik címkén belül használhatjuk. Ezt akkor érdemes használni, ha egy stílus csak egyszer, vagy nagyon kevésszer fordul elő a weboldalon, és ezért nem akarjuk külön kiírni a külső stíluslapban.
Ha mondjuk alkalmaztuk a fenti egyszerű stíluslapot az oldalunkra, és minden címsor piros lett és középre igazított, de mi egyetlen címsornál azt szeretnénk, ha mégis kék és jobbra igazított lenne, akkor ezt így adhatjuk meg a kívánt címsornál (a szövegközi stílus felülbírálja az összes többi stílust, erről később szó lesz):
<h1 style="color: blue; text-align: right;">
A RANGSOR
A CSS a rangsorolt stíluslapokat jelenti magyarul. Az elnevezés abból származik, hogy egyetlen HTML oldalhoz egyszerre több külső és belső stíluslapot is hozzárendelhetünk, és közben még szövegközi stílusokat is alkalmazhatunk. Emlékeztetőül:
Külső stíluslapot használunk akkor, amikor egy CSS fájlt hozzákapcsolunk egy HTML oldalhoz.
Belső stíluslapot használunk akkor, amikor a stílusdefiníciókat magába a HTML oldal fejrészébe (<head>...</head>) írjuk.
Szövegközi stílust minden címkéhez megadhatunk a style attribútummal.
Tehát egy oldalhoz egyszerre több külső stíluslapot is csatolhatunk, és közben még használhatunk belső és szövegközi stílusokat is ugyanabban az oldalban. Ez akkor lesz érdekes, ha a különböző stíluslapok ugyanarra a címkére írnak elő ugyanolyan tulajdonságokat. Ekkor a böngészőnek el kell tudnia dönteni, hogy melyik stílus végezze a formázást. Ezzel kapcsolatban általános szabályként elmondható: Mindig a formázandó HTML kódhoz legközelebbi stíluslap végzi a formázást.
Tegyük fel, hogy egy oldalhoz 3 külső stíluslapot csatolunk, és használunk belső és szövegközi stílusokat is. Ha ezek a különböző stíluslapok ugyanarra a címkére írnak elő formázást, akkor végül az adott címkéhez legközelebbi stílus fog rá hatással lenni. Ez azt jelenti, hogy a böngésző elkezd a HTML kódban fentről lefelé haladni, és mindig alkalmazza a talált stílusokat a megfelelő címkékre. Először olyanná fogja formázni az oldalt, ahogyan a forrásban legelsőnek megadott külső stíluslapban találja. Utána folytatja a formázást a forrásban másodikként megadott stíluslappal, ez a stíluslap át fogja írni azoknak a címkéknek a tulajdonságait, amiket az előtte lévő első stíluslap is megadott. A böngésző ugyanígy jár el a harmadikként megadott külső stíluslap, és a belső stíluslap esetén is. Végül, egy címkére megadott szövegközi stílus felül fogja írni az összes előtte lévő stílust.
A formázásokra azonban még két másik stíluslap is hatással van: a böngésző alapértelmezett stíluslapja, és a felhasználó által beállított stílusok.
A böngésző is stíluslapokat használ egy olyan oldalhoz is, amihez mi semmilyen stílust nem adtunk meg. A böngésző ebben a stíluslapban olyanokat definiál, hogy például a h1 címsor vastagon és nagyobb betűmérettel jelenjen meg; a linkek kékek és aláhúzottak legyenek stb. Érhető módon ezt a stíluslapot akármelyik más felül fogja írni, hiszen ez az alapértelmezett megjelenést írja le a böngésző által.
A legtöbb böngészőben megadhatunk saját magunk által írt stíluslapot, ami alapján a böngésző alapértelmezettként meg fogja jeleníteni az oldalt. Ebben például nagyobb szövegméretet tudunk megadni. Azonban a saját stíluslapot nagyon kevesen állítják be, inkább a szöveg méretét szokták csak beállítani egy böngészőben.
Az alábbi ábra az imént elmondottakat mutatja be. Az ábra olyan sorrendben jelzi a stílusokat, amilyen sorrendben a kódban előfordulnak, és amilyen közel állnak a formázandó címékhez. A lentebb, azaz a formázandó címkéhez közelebb álló stílus felülbírálja a hátrébb állót:
CSS KIJELÖLŐK - A DOKUMENTUMFA
A dokumentumfa a HTML dokumentumszerkezet faszerkezetben történő ábrázolását jeleni. Úgy néz ki, mint egy családfa, az elemek hierarchikus viszonyban állnak egymással.
GYERMEK - SZÜLŐ
Ebben a faszerkezetben szülőnek nevezzük az olyan elemet, ami alatt egy szinttel áll még legalább egy másik elem. A gyermek pedig olyan elem, ami felett egy szinttel egy szülő áll.
A jelölt div elem szülője a h2 és az ul elemeknek. Ezért a h2 és az ul elemek a div elem gyermekei. Azonban az ezek alatt álló li és a elemek már nem gyermekei a div elemenk.
Hasonlóan a jelölt ul elem az alatta lévő két li elem szülője, a két li elem pedig az ul gyeremekei. Ha ezen li elemek alatt állna még másik elem is, akkor azok sem lennének már az ul gyermekei.
ŐSÖK, LESZÁRMAZOTTAK
A jelölt elemek mind a div elem leszármazottai. A leszármazottakba beletartoznak a gyermekek és az unokák is. A div elem az összes jelölt leszármazott őse.
A html elem minden más elem őse, és minden elem a html elem leszármazotta. A html elemnek csak egy gyermeke van, a body, az ábrán csak a body elemet tüntettem fel.
TESTVÉREK
Testvérek azok az elemek, amelyek ugyanazon a szinten helyezkednek el, és ugyanazon a szülőn osztoznak.
Formázzuk a h1-es címsorokat! Legyenek zöld hátterűek! Ezt az alábbi stíluslappal tudjuk elérni:
h1 {
background: lime;
}
CSOPORTOSÍTÁS
Egy meghatározásblokkot egynél több címkére is alkalmazhatjuk, ha vesszővel elválasztva felsoroljuk a formázandó címkéket.
h1, h2 {
background: lime;
}
OSZTÁLYKIJELÖLŐK
Az előzőekben az összes h1, h2 címre vonatkozott a stílus. Ha nem akarunk ilyen egységes megjelenést, akkor a class attribútummal minden címkére külön szabályozhatjuk, hogy melyik stílus vonatkozzon rá, és melyik ne. A class attribútumot szinte bármelyik címkébe beleírhatjuk, így:
<h1 class="osztalykijelolo1">h1 címsor</h1>
<h2 class="osztalykijelolo2">h2 címsor</h2>
Ekkor a stíluslapban így tudjuk különválasztani a h1 kétféle megjelenését:
h1, h2 {
background: lime;
}
h1.center, h2.center {
background: maroon;
}
A stíluslap első fele ugyanaz, mint eddig. A második fele újdonság. Ez a rész azokra a h1 és h2 címsorokra vonatkozik, amelyeknek a center nevű osztálykijelölőt adtuk meg a fenti deklarációval. Láthatjuk, hogy a background tulajdonság kétszer szerepel a stíluslapban; kérdés, hogy milyen színűek lesznek a center osztálykijelölővel ellátott címsorok? A válasz, hogy gesztenyebarnák, mert mindig a pontosabb stílus végzi a formázást. Először általánosságban adtuk csak meg, hogy minden h1, h2 legyen piros, de utána már pontosabban: minden, center osztálykijelölővel ellátott h1, h2 legyen gesztenyebarna. Ezért felülíródik a színre vonatkozó utastítás.
Egy bizonyos osztálykijelölőre vonatkozó stílust használhatunk rövidítve is. Az alábbi példa az összes olyan elemet gesztenyebarnára színezi, amelynek center nevű osztálykijelölője van.
.center {
background: maroon;
}
KARAKTERKÓDOLÁS BEÁLLÍTÁSA
A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a stíluslapnak:
@charset "utf-8";
KIJELÖLŐK, TULAJDONSÁGOK, ÉRTÉKEK
Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value).
@charset "utf-8";
h1 {
color: red;
}
Ebben az egyszerű stíluslapban a h1 címke a kijelölő (selector), a color: red; sor pedig a meghatározás, ezen belül a color a tulajdonság (property), a red pedig ennek a tulajdonságnak az értéke (value). Általánosan:
@charset "utf-8";
kijelölő {
tulajdonság1: érték1;
tulajdonság2: érték2;
tulajdonság3: érték3;
...
}
A tulajdonság megnevezése után kettőspontot ( : ) kell írnunk, majd következik az érték, ami után pontosvesszőt ( ; ) kell tennünk.
A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázása.
CSS KOMMENTEK
HTML megjegyzést vagy kommentet a <!-- és a --> jelek közé írhatunk. CSS-ben pedig a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. A megjegyzéseket nem veszi figyelembe a böngésző, semmilyen hatással nincsenek a kinézetre, két dolgot szolgálnak:
Hosszabb stíluslapokhoz érdemes megjegyzéseket írni a megfelelő helyre, hogy ha később elővesszük, akkor tudjuk, mit miért írtunk. Ez főleg akkor fontos, ha nem csak magunknak készítjük a stíluslapot, hanem másnak is meg kell értenie.
Teszteléskor hasznosnak fogjuk találni a megjegyzést. Ideiglenesen megjegyzések közé tehetünk kódrészleteket, amikre éppen nincs szükség.
@charset "utf-8";
/*Ez egy megjegyzés.*/
h1, h2, h3 {
color: red; /*Ez egy megjegyzés.*/
}/*Ez
egy
többsoros megjegyzés.*/
STÍLUSLAP BEÁGYAZÁSA
Az elkészült stíluslap bármennyi HTML oldalhoz használható egyidejűleg. Viszont ahhoz, hogy a stíluslap hatással legyen rá, össze kell kötni a HTML fájlt és a stíluslapot. Ezt háromféleképpen tehetjük meg:
1. Külső stíluslapok
Ha egy HTML fájlra alkalmazni kívánunk egy stíluslapot, akkor a fejrészbe (<head>...</head>) kell írni a következőt, ha a két fájl azonos mappában van:
<head>
<link href="stiluslapneve.css" rel="stylesheet" type="text/css">
</head>
A rel és a type attribútumnak mindig ez kell hogy legyen az értéke, ha stíluslapot ágyazunk be, a href-nek pedig a stíluslap elérési útvonalát kell tartalmaznia a HTML fájlhoz képest. Ez a leggyakrabban alkalmazott megoldás a stíluslapok beágyazására, ezt a sort minden weboldalunk kódjába bemásolhatjuk a href-nek a megfelelő értéket adva.
2. Belső stíluslapok
Olyan stílusok megadásakor érdemes használni ezt a módszert, aminél tudjuk, hogy csak egyetlen weboldalhoz fogjuk felhasználni. Ugyanis ha egy stíluslapot már kettő, vagy több weboldalhoz is felhasználunk, akkor ajánlott külön stíluslapban tárolni őket, és a fenti 1. módszerrel társítani a weboldalhoz. A <head>...</head> részbe kell beírni a stíluslapot a <style>...</style> címkék közé.
<head>
<style type="text/css">
h1 {
color: red;
text-align: center;
}
h2 {
color: blue;
text-decoration: underline;
margin-bottom: 1em;
}
</style>
</head>
3. Szövegközi stílusok
A style attribútumot bármelyik címkén belül használhatjuk. Ezt akkor érdemes használni, ha egy stílus csak egyszer, vagy nagyon kevésszer fordul elő a weboldalon, és ezért nem akarjuk külön kiírni a külső stíluslapban.
Ha mondjuk alkalmaztuk a fenti egyszerű stíluslapot az oldalunkra, és minden címsor piros lett és középre igazított, de mi egyetlen címsornál azt szeretnénk, ha mégis kék és jobbra igazított lenne, akkor ezt így adhatjuk meg a kívánt címsornál (a szövegközi stílus felülbírálja az összes többi stílust, erről később szó lesz):
<h1 style="color: blue; text-align: right;">
A RANGSOR
A CSS a rangsorolt stíluslapokat jelenti magyarul. Az elnevezés abból származik, hogy egyetlen HTML oldalhoz egyszerre több külső és belső stíluslapot is hozzárendelhetünk, és közben még szövegközi stílusokat is alkalmazhatunk. Emlékeztetőül:
Külső stíluslapot használunk akkor, amikor egy CSS fájlt hozzákapcsolunk egy HTML oldalhoz.
Belső stíluslapot használunk akkor, amikor a stílusdefiníciókat magába a HTML oldal fejrészébe (<head>...</head>) írjuk.
Szövegközi stílust minden címkéhez megadhatunk a style attribútummal.
Tehát egy oldalhoz egyszerre több külső stíluslapot is csatolhatunk, és közben még használhatunk belső és szövegközi stílusokat is ugyanabban az oldalban. Ez akkor lesz érdekes, ha a különböző stíluslapok ugyanarra a címkére írnak elő ugyanolyan tulajdonságokat. Ekkor a böngészőnek el kell tudnia dönteni, hogy melyik stílus végezze a formázást. Ezzel kapcsolatban általános szabályként elmondható: Mindig a formázandó HTML kódhoz legközelebbi stíluslap végzi a formázást.
Tegyük fel, hogy egy oldalhoz 3 külső stíluslapot csatolunk, és használunk belső és szövegközi stílusokat is. Ha ezek a különböző stíluslapok ugyanarra a címkére írnak elő formázást, akkor végül az adott címkéhez legközelebbi stílus fog rá hatással lenni. Ez azt jelenti, hogy a böngésző elkezd a HTML kódban fentről lefelé haladni, és mindig alkalmazza a talált stílusokat a megfelelő címkékre. Először olyanná fogja formázni az oldalt, ahogyan a forrásban legelsőnek megadott külső stíluslapban találja. Utána folytatja a formázást a forrásban másodikként megadott stíluslappal, ez a stíluslap át fogja írni azoknak a címkéknek a tulajdonságait, amiket az előtte lévő első stíluslap is megadott. A böngésző ugyanígy jár el a harmadikként megadott külső stíluslap, és a belső stíluslap esetén is. Végül, egy címkére megadott szövegközi stílus felül fogja írni az összes előtte lévő stílust.
A formázásokra azonban még két másik stíluslap is hatással van: a böngésző alapértelmezett stíluslapja, és a felhasználó által beállított stílusok.
A böngésző is stíluslapokat használ egy olyan oldalhoz is, amihez mi semmilyen stílust nem adtunk meg. A böngésző ebben a stíluslapban olyanokat definiál, hogy például a h1 címsor vastagon és nagyobb betűmérettel jelenjen meg; a linkek kékek és aláhúzottak legyenek stb. Érhető módon ezt a stíluslapot akármelyik más felül fogja írni, hiszen ez az alapértelmezett megjelenést írja le a böngésző által.
A legtöbb böngészőben megadhatunk saját magunk által írt stíluslapot, ami alapján a böngésző alapértelmezettként meg fogja jeleníteni az oldalt. Ebben például nagyobb szövegméretet tudunk megadni. Azonban a saját stíluslapot nagyon kevesen állítják be, inkább a szöveg méretét szokták csak beállítani egy böngészőben.
Az alábbi ábra az imént elmondottakat mutatja be. Az ábra olyan sorrendben jelzi a stílusokat, amilyen sorrendben a kódban előfordulnak, és amilyen közel állnak a formázandó címékhez. A lentebb, azaz a formázandó címkéhez közelebb álló stílus felülbírálja a hátrébb állót:
CSS KIJELÖLŐK - A DOKUMENTUMFA
A dokumentumfa a HTML dokumentumszerkezet faszerkezetben történő ábrázolását jeleni. Úgy néz ki, mint egy családfa, az elemek hierarchikus viszonyban állnak egymással.
GYERMEK - SZÜLŐ
Ebben a faszerkezetben szülőnek nevezzük az olyan elemet, ami alatt egy szinttel áll még legalább egy másik elem. A gyermek pedig olyan elem, ami felett egy szinttel egy szülő áll.
A jelölt div elem szülője a h2 és az ul elemeknek. Ezért a h2 és az ul elemek a div elem gyermekei. Azonban az ezek alatt álló li és a elemek már nem gyermekei a div elemenk.
Hasonlóan a jelölt ul elem az alatta lévő két li elem szülője, a két li elem pedig az ul gyeremekei. Ha ezen li elemek alatt állna még másik elem is, akkor azok sem lennének már az ul gyermekei.
A jelölt elemek mind a div elem leszármazottai. A leszármazottakba beletartoznak a gyermekek és az unokák is. A div elem az összes jelölt leszármazott őse.
A html elem minden más elem őse, és minden elem a html elem leszármazotta. A html elemnek csak egy gyermeke van, a body, az ábrán csak a body elemet tüntettem fel.
Testvérek azok az elemek, amelyek ugyanazon a szinten helyezkednek el, és ugyanazon a szülőn osztoznak.
h1 {
background: lime;
}
CSOPORTOSÍTÁS
Egy meghatározásblokkot egynél több címkére is alkalmazhatjuk, ha vesszővel elválasztva felsoroljuk a formázandó címkéket.
h1, h2 {
background: lime;
}
Az előzőekben az összes h1, h2 címre vonatkozott a stílus. Ha nem akarunk ilyen egységes megjelenést, akkor a class attribútummal minden címkére külön szabályozhatjuk, hogy melyik stílus vonatkozzon rá, és melyik ne. A class attribútumot szinte bármelyik címkébe beleírhatjuk, így:
<h1 class="osztalykijelolo1">h1 címsor</h1>
<h2 class="osztalykijelolo2">h2 címsor</h2>
Ekkor a stíluslapban így tudjuk különválasztani a h1 kétféle megjelenését:
h1, h2 {
background: lime;
}
h1.center, h2.center {
background: maroon;
}
A stíluslap első fele ugyanaz, mint eddig. A második fele újdonság. Ez a rész azokra a h1 és h2 címsorokra vonatkozik, amelyeknek a center nevű osztálykijelölőt adtuk meg a fenti deklarációval. Láthatjuk, hogy a background tulajdonság kétszer szerepel a stíluslapban; kérdés, hogy milyen színűek lesznek a center osztálykijelölővel ellátott címsorok? A válasz, hogy gesztenyebarnák, mert mindig a pontosabb stílus végzi a formázást. Először általánosságban adtuk csak meg, hogy minden h1, h2 legyen piros, de utána már pontosabban: minden, center osztálykijelölővel ellátott h1, h2 legyen gesztenyebarna. Ezért felülíródik a színre vonatkozó utastítás.
.center {
background: maroon;
}
Nincsenek megjegyzések:
Megjegyzés küldése