Ahhoz, hogy a HTML-oldalunkon a különböző elemeket elérhessük különböző szelektorokat használhatunk. A következőkben ezeket mutatjuk be, különböző példákon keresztül.
Univerzális szelektor segítségével olyan CSS-szabályok írhatók, amelyek minden egyes HTML-elemre vonatkoznak. Így könnyedén adhatunk globális stílusjegyeket a formázandó weblaphoz. Az univerzális szelektort egy * (csillag) testesíti meg.
Minta: * {definíció}
* {
margin:0; /* margó lenullázása */
padding:0; /* kitöltés lenullázása */
}
p {margin:10px}
A * szelektort nagyon gyakran arra használjuk, hogy minden elem margóját és kitöltését
lenullázzuk. Ezen értékeket aztán minden általunk használt elem esetén újra beállítjuk, így
egységesek lesznek a margók és kitöltések, vagyis nem az adott böngésző alapbeállításán múlnak.
Fontos elvárás, hogy a weblapunk egységesen jelenjen meg a különböző böngészőprogramokban, a fenti szabály ezen elv elérését könnyíti meg (de önmagában még nem elegendő.)
Az univerzális szelektor a CSS2-es szabványban jelent meg először. Amíg ezt nem vezették be, ugyanezen célból kellett egy külön stíluslapot (CSS reset) alkalmazni, amelyben az összes elem margó, kitöltés stb. értéke be volt állítva az alapértékre.
Ezt a stíluslapot (illetve a korábbi változatot) elérhetjük a CSS reset weboldalon.
A típus szelektorral egy adott elemtípust határozhatunk meg. Például megcímezhetjük az összes bekezdést, címsort, listaelemet stb.
Minta: szelektor {definíció}
h1 {color:blue}
A fenti szabállyal az egyes szintű címsorok színét állítjuk be kékre.
Ha egy HTML-elem leszármazottaihoz szeretnénk stílust hozzárendelni, akkor egy speciális szelektorlistát kell alkalmazni, amelyben a szelektorokat szóközök választják el. Ha a listában egy szelektor megelőz egy másikat, akkor az előbb szereplő szelektor a később szereplő szelektor ősét jelenti. Fontos, hogy a szelektorlistában egymást követő szelektorok nem feltétlenül egymás közvetlen gyermekei illetve szülei. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta: szelektor1 szelektor2 {definíció}
Az alábbi példában egy egymásbaágyazott listát láthatunk. Azt szeretnénk, hogy a beágyazott lista elemei dőlt betűvel és kék színnel, míg a fő listaelemek zölden jelenjenek meg.
A <li> elemekre beállítottuk a zöld színt. Emiatt viszont minden listaelem zöld lesz. Ezért a zöld színt felülírjuk majd a beágyazott listaelemekre. Az ul li li szelektorlánccal olyan listaelemeket érünk el, amelyek maguk is egy olyan listaelembe vannak ágyazva, ami egy felsorolás lista (<ul>) elembe van ágyazva. Itt állítjuk be a kék színt és a dőlt megjelenést.
Ha azt szeretnénk kifejezni, hogy az egyik szelektor a másik gyermeke, akkor a szelektorlistában a szelektorokat > jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta: szelektor1 > szelektor2 {definíció}
Szelektorlistával lehetőségünk van közvetlen testvérségi viszony kifejezésére is. Ekkor a listában levő szelektorokat + jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta: szelektor1 + szelektor2 {definíció}
Az általános testvérségi viszony kifejezésére is van lehetőség szelektorlistával. Ekkor a szelektorokat ~ jellel választjuk el. Ne feledjük, hogy csak a szelektorlista utolsó eleme lesz stílussal ellátva.
Minta: szelektor1 ~ szelektor2 {definíció}
A HTML-kódunk ugyanaz, mint az előző példában, az eredmény viszont más, hiszen az ötödik bekezdés is világoszöld színnel jelenik meg, mivel előtte van (nem közvetlen) bekezdés testvére.
Az előző példákban láttuk, hogy az elemeket a HTML-oldalban betöltött struktúra alapján megcímezhetjük, de mi a helyzet akkor, ha nem a struktúra, hanem más szempont szerint szeretnénk az elemeket elérni? Mondjuk az általunk fontosnak tartott elemeket ki szeretnénk emelni? Erre lesz jó az osztályok használata.
A HTML-elemeinket a class attribútummal kiegészítve és annak értéket adva osztályba sorolhatjuk.
<p class="fontos">Bekezdés szövege</p>
Az így definiált osztályokra hivatkozhatunk szelektorral, ezáltal minden osztályhoz egységes stílus rendelhető.
Az osztályszelektor többféle módon megadható, a szintaxis a következő:
Fontos tudnunk azt is, hogy az elemeket egyszerre több osztályba is besorolhatjuk!
A fenti példában használtunk általános osztályt, mutattuk példát arra, hogy ugyanaz az osztálynév mást-mást jelenthet különböző szelektorok esetén, és többes osztálybesorolásra is van példa.
A fentiekben láttuk, hogy ha több osztályba is besoroljuk az elemet, akkor az osztályokban megadott tulajdonságok egyben vonatkoznak az adott elemre. Ez azonban nem mindig optimális, lehet, hogy finomítani szeretnénk a stíluson, ha egyszerre két osztályba is be van sorolva az adott elem. Ekkor használhatjuk a következő szelektort:
szelektor.osztály1.osztály2 {definíció}
A következő példa egy ilyen esetet mutat be.
Példa - Elem több osztályba sorolása
A szegely osztályba sorolás hatására egy kék, pontozott szegély jelenik meg. A fontos osztály pedig a piros szövegszínről gondoskodik. Így ha egy címsort mindkét osztályba besorolnánk, akkor kék, pontozott szegéllyel és piros színnel kellene megjelennie. Ami miatt ez nem így történik, az a h1.szegely.fontos szelektorunk, mert itt megadtuk azt, hogy ha az elem a szegely és fontos osztályba is be van sorolva, akkor a szegélye vékony, piros színű legyen, a szöveg színe pedig fekete.
A HTML-elemeket az id paraméterrel elláthatjuk egyedi azonosítókkal.
<div id="logo"></div>
Az így definiált egyedi azonosítókra hivatkozhatunk szelektorokkal, amelyek szintaxisa a következő: elem#id
div#logo {margin:20px;}
Mivel minden id egyedi, ezért a szelektor a következő módon rövidíthető: #id
A HTML 4.01-es szabványban az egyedi azonosítókra az volt igaz, hogy betűvel kezdődhetnek, amelyet számok, betűk és a következő jelek követhetnek: - _ : .
A HTML5 szabványban nem ilyen szigorú a megkötés, az azonosítónak legalább 1 karakter hosszúnak kell lennie és nem tartalmazhat szóközt.
Az első képnek a logo azonosítót adtuk, és beállítottuk hogy ezen azonosítója elem dupla, fekete szegéllyel jelenjen meg.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.