4. Lecke: A Stílusok használata

- Ismerje a stílusformázás előnyeit
- Ismerje a stílusok használatának módjait és precedenciáját
- Ismerje a CSS nyelv szintaktikáját
- Ismerje a kijelölők fajtáit és használatát
- A stílusformázás előnyei
- Stílus csatolásának módjai a weboldalhoz
- A CSS nyelv és szintaktikája
- A kijelölők fajtái
- A kijelölők kombinálási lehetőségei
A stílusformázás előnyei
Hagyományosan a HTML nyelv tartalmaz formázási tag-eket illetve attribútumokat. Az oldal megjelenési formáját ezek határozták meg. Ahogy a weboldalak egyre összetettebbek lettek illetve egyre több elemet tartalmaztak, az oldalak forrása túl bonyolulttá vált, egyre nehezebb volt értelmezni a kódot. Az oldalak formátumának módosítása nagyon nehézkes volt és sok hibalehetőséget hordozott magában. Ráadásul bizonyos formázási műveleteket nem lehetett elvégeznia HTML eszközkészletével. Ezért alakult ki az a tendencia, hogy a weboldal külalakjának definiálása váljon el az oldal szerkezetétől. Erre egy külön nyelvet alakítottak ki, a CSS (Cascading Style Sheets) nyelvet. Innentől kezdve a webfejlesztés ajánlott módszertana, hogy a HTML nyelvet arra használjuk, hogy megadjuk az oldalt felépítő elemeket és az oldal kinézetét stílusok használatával adjuk meg. Ennek több előnye is van:
- A forrás áttekinthetőbb, könnyebb tájékozódni az oldal felépítését illetve az oldal kinézetét meghatározó szempontok szerint.
- A formátumokat egyszer kell megadni és nem annyiszor, ahányszor előfordul.
- A formátumok hordozhatóak, azaz bizonyos stílus formátumokat több weboldalon is használhatunk a stíluslap több weboldalhoz rendelésével.
- Jóval több formázási eszközt használhatunk, mint a HTML nyelvvel.
- Az oldal formátuma könnyebben átalakítható, mivel „csak" a stílusokat kell átdolgozni, amelyet csak egy helyen kell elvégezni és érvényes lesz az összes oldalra, amihez hozzá van rendelve.


Stílus megadása a weboldalhoz
Stílust háromféleképp lehet a weboldalhoz megadni. Lehet közvetlenül a tag-ben, ún. szövegközi stílus, amely csak arra a tag-re vonatkozik.
<tag style="..." >...
(Természetesen a tag szó helyére a kívánt tag elnevezése helyettesítendő. Ezt a jelölés a későbbiekben is ilyen értelemben szerepel a tananyagban.)
Ez ma már nem jellemző, használata nehézkes, mert a stílust minden helyen meg kell adni, ahol használni szeretnénk és belefolyik a HTML kódba.
<style type="text/css"> ... </style>
Figyelni kell arra, hogy ebben a részben már a CSS szintaktika érvényes!
A harmadik lehetőség, ha külső állományban írjuk le a stílusokat, majd az állományt az oldalunkhoz csatoljuk, ahogy az előző leckében már szerepelt:
<link href="stilus.css" type="text/css" rel="stylesheet" />
Ilyenkor természetesen a stílus az összes olyan oldalra vonatkozik, amelyhez a stíluslapot hozzácsatoltuk.
A weboldal egy elemének megjelenését több definíció határozhatja meg, amelyek között precedencia áll fent. Ha semmi nem ad stílust az elemnek, akkor a böngésző alapértelmezett stílusát kapja. Ezt a felhasználó a böngészőben felül tudja definiálni. Az oldalhoz csatolt stíluslap pontos megjelenési formátumot ad függetlenül a böngészőben megadottól. Az oldalon belüli beágyazott stílus felüldefiniálja a külső stíluslap által megadottakat. A szövegközi stílus pedig a legerősebb definíció.
Tehát a precedencia a formátumok között:
- Böngésző
- Felhasználói beállítások
- Külső stíluslap
- Beágyazott stílus
- Szövegközi stílus
Így ezt kihasználva előfordul, hogy egy külső stíluslapon megadunk egy általános formátumot, amely az összes weboldalunkra érvényes. Majd egy oldalon beágyazott stílussal ezt felüldefiniáljuk arra az egy oldalra vonatkozóan. Végül azon az oldalon egy konkrét tag-nél szövegközi stílussal meghatározzuk annak az egy elemnek a megjelenését.
Másrészről precedencia érvényes a stílusok megadásának sorrendjénél is. A később megadott stílus felüldefiniálja a korábbi formátumot. Így nem mindegy, hogy az egyes formátumokat milyen sorrendben írnunk le, illetve a stíluslapokat milyen sorrendben csatolunk a weboldalunkhoz.
A CSS nyelv
A CSS nyelv szerepe, hogy meghatározza, hogy mely HTML elemek hogyan nézzenek ki. A nyelv kis-nagybetű érzékeny, tehát mindent egységesen kis-nagybetű helyesen kell írni. A formátumok megadása blokkokban történik, amelynek szintaktikája a következő:
kijelölő{
tulajdonság : érték;
...
}
A kijelölő határozza meg, hogy az oldalon mely tag-ekre vonatkozik a formátum, amelyet kapcsos zárójelek között adunk meg pontosvesszővel elválasztva. A tulajdonság és értéke között kettőspont található. Mivel több kijelölő is vonatkozhat ugyanarra a tag-re, így fontos a blokkok sorrendjére ügyelni, a később szereplő blokk formátuma felüldefiniálja a korábbi blokkot.
Megjegyzés
Érdemes azokat a blokkokat, amelyek ugyanazokat az elemeket jelölik ki, egymás után szerepeltetni. Természetesen, ha lehetséges. Egyik gyakori kezdő hiba, amikor az történik, hogy szeretnénk megváltoztatni egy elem tulajdonságát, de nincs hatása a változtatásnak. Ennek az az oka, hogy valahol később szerepel a stílusban egy másik blokk, ami ugyanerre az elemre vonatkozik és az a stílus felüldefiniálja minden itteni beállításunkat.
A stílus forrásába is lehet megjegyzéseket fűzni, amelyet nem értelmez a böngésző. Ennek szintaktikája:
/* megjegyzés */
A kijelölők típusai
A kijelölők mindig egy vagy több tag-et határoznak meg a weboldalon. A pontos hivatkozás eléréséhez a kijelölőknek több típusa létezik:
Univerzális kijelölő
Ez az oldal összes tag-jét jelenti.
* { ... }
Az univerzális kijelölőt olyan formátumra szoktuk használni, ami általánosan szinte minden elemre megadható. Például az elemek margóját (6. Lecke) a böngészők másként használják alapértelmezettként, így gyakran kezdjük azzal a stílusleírást, hogy megadjuk minden elemre a nulla margót.
* { margin : 0px; }
Elemkijelölő
Ez mindig egy tag neve, amely hivatkozik az oldalon szereplő összes ilyen tag-re. Például a bekezdést jelentő <p>...</p> tag-ekre egyben tudok formátumot megadni a
p { ... }
elemkijelölő használatával.
Gyakori, hogy elemkijelölővel bizonyos tag-eknek adunk azonos formátumokat, például az összes bekezdés szövegének megadjuk a betűtípusát.
p { font-family : arial, sans-serif; }
Osztálykijelölő
Ha különböző típusú tag-eket szeretnék csoportosítani és azonos formátumot adni nekik, akkor osztályokat képezünk, amelyekbe belesoroljuk a kívánt tag-eket. A stílusban az osztálykijelölők mindig ponttal kezdődnek:
.osztaly { ... }
A HTML kódban a tag-eknél meg kell adni, hogy mely osztályba tartoznak, amelyre a class attribútumot használjuk:
<tag class="osztaly" ...>...
Egy tag több osztályba is tartozhat, ilyenkor a class attribútumnál az összes osztály nevét felsoroljuk szóközzel elválasztva:
<tag class="osztaly1 osztály2" ...>...
Ha egy hosszabb szövegbe beillesztünk idézeteket tartalmazó bekezdéseket, akkor ezeknek közös formátumot adunk, ami különbözik a többi szövegtől. Ehhez létrehozunk egy idézet osztályt, ezeket a bekezdéseket pedig betesszük ebbe az osztályba.
.idezet { font-style : italic; }
Azonosító kijelölő
Ha egy tag-re az oldalon egyedileg akarunk hivatkozni, akkor azonosító kijelölőt használunk. Ez a stílusban mindig # karakterrel kezdődik:
#azon { ... }
A HTML kódban a tag-en belül meg kell adni, hogy mi az azonosítója, erre az id attribútumot használjuk. Fontos, hogy egy oldalon belül az azonosító egyedi, azaz nem lehet két elem ugyanolyan azonosítóval.
<tag id="azon" ...> ...
Fontos azt látni, hogy ugyan egy oldalon belül csak egy adott azonosítóval rendelkező elem lehet, de egy stíluslap több oldalhoz is tartozhat, amelyeken lehetnek ugyanazzal a névvel azonosított elemek, amelyek formázását célszerű így összevonni.
Például minden oldalon szerepelhet egy aláírás az oldal alján. Mivel ebből csak egy van az oldalon, erre tudunk azonosítóval hivatkozni és például jobbra rendezni. Ha ezt külső stílusállományban tesszük, akkor ezt a formátumot csak egyszer kell megadni.
#alairas { text-align : right; }
Látszólagos kijelölő
A látszólagos kijelölők lényege, hogy nem tag-et jelöl ki, hanem a tag-nek egy részét, vagy egy állapotát. Gyakorlatilag egy másik kijelölőhöz csatlakozik egy kettősponttal. Így az eredetileg hivatkozott tag-eknek csak egy állapotát vagy csak részét jelentik.
A tag-ek egy állapotának formázását elsősorban a linkek esetén alkalmazzuk. A linkeknek négy állapota létezik:
a:link { ... }
a link alapállapotát jelenti, amikor az oldal megnyílik a böngészőben;
a:visited { ... }
a link látogatott állapota, amit a böngésző egyszer már megnyitott, így az oldal már letöltődött és eltárolt kliens oldalon;
a:active { ... }
pedig az az állapot, amikor a felhasználó épp klikkel a linkre, azaz lenyomta a bal egérgombot, de még nem engedte fel;
a:hover { ... }
az az állapot, amikor a felhasználó a link fölé viszi az egérkurzort. Ezt az állapotot szoktuk leggyakrabban linkeken kívül más elemekre is alkalmazni, például képekre.
7. Ábra: Link állapota, ha fölé visszük a kurzort
A tag egy részét lehet megadni például egy blokkos megjelenésű szövegnek (a következő leckében lesz szó erről), például egy bekezdés:
p:first-letter { ... }
jelenti a bekezdés első karakterét;
p:first-line { ... }
pedig az első sorát.
Értékfüggő kijelölő
Ennek a kijelölőnek a lényege, hogy azon tag-ekre hivatkozik, amelyeknek bizonyos attribútuma meg van adva és az értéke megegyezik a kijelölőben definiálttal.
elem[attributum=érték] { ... }
Például az űrlapok (8. Lecke) esetén az input tag type attribútuma határozza meg az elem típusát. Így ha formázni akarjuk, akkor a type attribútum értékétől függően adunk formátumot. Így a szöveges beviteli mezőknek a szélességét meg tudjuk adni ennek segítségével.
input[type=text] { width : 200px; }
A kijelölők kombinálása
Több kijelölő kombinálásával a tag-ekre való hivatkozás még speciálisabbá tehető, még több lehetőség használható. Természetesen a kombinált kijelölők az előbb említett típusok közül bármelyik lehet.
Csoportosítás
Ha több kijelölt vesszővel elválasztva felsorolunk, azzal az összes olyan tag-et kijelöljük, amelyekre a felsorolt kijelölők hivatkoztak. Így például egyben tudjuk megadni a betűtípust az oldal fő- és alcímeinek:
h1, h2 { font-family : Arial, Sans-Serif; }
Helyzetérzékeny kijelölés
Ha a kijelölőket szóközzel választjuk el, akkor a kijelölt tag-ek egymásba ágyazását definiáljuk. Mindig a sorban utolsó kijelölő által hivatkozott tag-eket jelenti, de csak azokat, amelyek a sorban előző kijelölő által meghatározott tag-ekbe vannak beágyazva.
Például az oldalon több féle link lehet, amelyeknek különböző a formátuma, ha menüpont, vagy a folyószövegben található. Így ha formázni akarjuk a folyószöveges linkeket, akkor megadhatjuk, hogy csak a bekezdésekben található linkek színét változtassuk pirosra.
p a { color : red; }
Tehát azon a tag-ekre vonatkozik, amelyek p tag-ben vannak.
<p> ... <a>...</a> ... </p>
Szűkítő kijelölés
Ezt első sorban osztály kijelölővel használjuk. Ha egy kijelölővel egy osztálykijelölőt egybe írunk, annak a jelentése, hogy az első kijelölő által hivatkozott tag-ek közül csak azokat jelöljük ki, amelyek beletartoznak a megadott osztályba.
p.fontos { ... }
jelenti a
<p class="fontos"> ... </p>
tag-et, de nem jelenti a
<p> ... </p> és <p class="masosztaly"> ... </p>
tag-eket.


egyben megadható a tag és a formátuma
| |
hordozhatóság
| |
szétválik az oldal szerkezetének és tartalmának megadása a külalakjának meghatározásától
|
külső stílus lapon, az oldal fej részében és a formázandó tag-ben
| |
a böngészőben, stíluslapon és az oldalon belül
| |
az oldal fej részében és a formázandó tag-ben
|
Ez határozza meg, hogy mely tag-ekre vonatkozik a megadott stílus.
| |
Ez határozza meg, hogy melyik weboldalra vonatkozik a megadott stílus.
| |
Meghatározza, hogy az oldalon ha a felhasználó kijelöl valamit, az hogyan nézzen ki.
|
Ennek segítségével egy adott típusú összes tag-et ki tudjuk jelölni.
| |
Ezzel bármely elemet pontosan ki tudunk jelölni az oldalon.
| |
Azt az elemet jelöli ki, amelynek a tartalmára vonatkozik a stílus.
|
Ennek segítségével csoportosítani tudjuk a különböző típusú tag-eket és azoknak együtt megadni formátumot.
| |
Ennek segítségével lehet egy adott típusú tag-eket egyszerre formázni.
| |
Ezzel a kijelölőket lehet osztályba sorolni és azok által hivatkozott tag-eket egyszerre formázni.
|