< WebKészítés /> interaktív webszerkesztő tananyagok
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. A CSS ezen modell alapján képes kapcsolatokat kezelni az elemek közt. Lássunk néhány fontosabbat: Gyermek - szülő kapcsolat: szülőnek nevezzük az olyan elemet, ami alatt egy szinttel áll legalább egy másik elem. A gyermek pedig olyan elem, ami felett egy szinttel egy szülő áll. Fontos, hogy ez két szint különbség esetén már nem igaz! Ős - leszármazott kapcsolat: Leszármazott az összes olyan elem, ami az Ős alatt áll. Tehát gyerekek, unokák, stb. mind! Ezeknek az elemeknek pedig a felette álló az Őse. Testvérek pedig azok az elemek, amelyek ugyanazon a szinten helyezkednek el, és ugyanazon a szülőn osztoznak.
Nagyon szép! De mire jó ez? Talán a legfontosabb dolog az öröklődés. Ha egy tulajdonságot beállítunk egy Ős elemre, azt az összes leszármazott meg fogja kapni, amíg velük másként nem rendelkezünk.
Kijelölők
Az ős leszármazottját CSS-ben úgy jelölhetjük, hogy szóközt nyomunk az elemek neve közt. Az ábra bal oldalán lévő <ul>-nek van egy <a> leszármazottja. Őt a következő módon jelölhetjük ki: ul a {} Ez a módszer tetszőleges mélységig folytatható.
Gyermeket úgy jelölhetünk ki, hogy a két elem közé > jelet teszünk, így: body > h2 {} Ekkor nem jelöljük ki <div>-en belüli <h2>-t, csak azt, amelyik a <body> gyereke. (IE 6 még nem támogatja)
Testvérek kijelölésére a + jel hivatott. Akkor használjuk, ha egy <h2> után közvetlen <a> jön: h2 + a {} Akkor lehet hasznos, ha a főcím után mindig egy hivatkozás van, és őt formáznánk.
Elég speciális eset, de kijelölhetünk elemeket HTML-beli attribútumuk alapján is. Megvalósítása pl.: a[title] {} Itt nem kell az attribútum értékeknek egyezni, csak rendelkezzen a Tag az adott title attribútummal. Ha konkrét értékkel rendelkezőt kívánunk kiválasztani, akkor pedig a címke[attribútum="érték"] {} módon tehetjük meg. Léteznek még: ~= (szóközzel tagolt listában egyezés), |= (ezzel kezdődik), ^= (pontosan ezzel kezdődik), $= (ezzel végződik), stb. Ezek nem működnek minden esetben.
Ha nem használunk semmilyen rokoni viszonyt, akkor a h1 {} kijelölő az összes létező <h1> címkére vonatkozna az oldalon. Ha egyéni csoportosítást szeretnénk, akkor ún. osztálykijelölőt hozunk létre. Ilyen a h1.classnev {}. A pont (.) után tetszőleges nevet definiálhatunk, mikre a HTML címkéiben a class attribútummal hivatkozhatunk. Tekinthetjük úgy is, mint: h1[class="érték"] {}. Ha az osztályt nem csak a <h1> elemre kívánjuk alkalmazni, akkor azt akár el is hagyhatjuk. Ekkor bármlyen elemet formázhatunk a megfelelő névre hivatkozva: .classnev {}
Azonos értékű class attribútumból akármennyi lehet, de azonos értékű id nem fordulhat elő egy HTML-en belül. Az azonosító kijelölő kizárólag egy elemre fog mutatni: h1#azonosito, de a rövidebb forma is megengedett: #azonosito, hiszen ez is csak ugyanarra az elemre mutathat.
A fent említett összes kijelölési módot csoportosíthatjuk vesszők (,) segítségével. Ekkor az összes kijelölt elemre ugyanaz a meghatározásblokk lesz érvényes! Pl.: ul a, body > h2, h2 + a, a[title], h1.classnev, #azonosito {}
A legvégére hagytam a csemegét, az univerzális szelektort. Ez nem más, mint egy * szimbólum. Az utána megadott stílus definíció érvényes lesz minden elemre. Gyakorlatilag minden elem ősének tekinthető. Ha teljesen korrektek akarunk lenni, akkor kitehetnénk a *.classnev {} elé is.
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!