Webszerkesztés

Szelektorok (jelölők)

A HTML elemekre vonatkozó egyes blokkok tulajdonságait a jelölőkkel határozhatjuk meg.

Elem név alapján

Megjelölhetjük, hogy mely HTML elemek tulajdonságát akarjuk beállítani.

p - minden p elem;
p, div - minden p és div elem;
div p - minden div elemen belüli p elem;
div > p - minden p elem, ahol a szülő egy div elem;
div + p - minden olyan p elem, mely közvetlenül div elem után van;
p ~ ul - minden olyan ul elem, mely előtt p elem van.

Id (identifier - azonosító) alapján

A HTML kódban az egyes elemekben elhelyezhetünk egy id attribútumot, melynek értékére a CSS állományban hivatkozhatunk a #-jel segítségével.

Pl.: HTML - <table id="fontos">
CSS-ben a hivatkozás rá - #fontos {...}

A formázás csak a megadott azonosítójú elemre lesz érvényes. Az id azonosító mindig legyen egyedi elnevezésű.

Class (osztály) alapján

A HTML kódban az egyes elemekben elhelyezhetünk egy class attribútumot, melynek értékére a CSS állományban hivatkozhatunk a .(pont) segítségével.

Míg az id azonosító egyedi, addig a class értékét több elemnél is felhasználhatjuk.

Pl.: HTML - <table class="szines"> <h3 class="szines">
CSS-ben a hivatkozás rá - .szines {...}

A formázás minden olyan elemre érvényes lesz, melynek osztálya "szines".

Vegyes meghatározás alapján

Pl.: td .szines {...}
Azokra a cellaelemekre vonatkozik, mely elemeken belül szerepel a class="szines".

Pl.: <table class="szines">
Mivel a table a hierarchiában a td felett áll, ezért az itt megadott osztály a td-re is vonatkozik.

Pl.: #fontos .szines {...}
Azokra az elemekre vonatkozik, melyek a "szines" osztályhoz tartoznak és olyan elemen belül helyezkednek el a hierarchiában, melynek az azonosítója "fontos".

Pl.: <table id="fotos"> <tr> <td class="szines">...

Minden elem kijelölése

* {...} - a megadott formázás minden elemre.

Hivatkozások pszeudo (ál) osztályának kijelölése

A CSS-ben léteznek ún. látszólagos vagy pszeudo-osztályok és -elemek is, amelyek nem jelennek meg a dokumentum forrásában, sem a dokumentumfán. Segítségükkel speciális információk alapján hajthatunk végre formázásokat.

Linkek álosztályai

A felhasználói tevékenység dinamikus kezelésére több látszólagos osztály is a rendelkezésünkre áll.

Pl.:
a:hover {...} - a hivatkozás felett áll az egér;
a:active {...} - aktivált hivatkozás, nyomva tartott egérgomb;
a:link {...} - normál link;
a:visited {...} - meglátogatott link;

Az a horgonyhoz több egymást nem kizáró link, és álosztályú kijelölés is tartozhat:

Pl.: a:visited a:hover {...} - ha a meglátogatott linkre ismét ráállunk.

A sorrend kötött: link - visited - hover - active.