03 – Stílusosztályok

Egy tag-hez készíthetünk több különböző, ún. stílusosztályt is: a tag neve után egy ponttal elválasztva adjuk meg az osztály nevét (módosítót), pl.

1

code.html {color: yellow}

1

code.js {color:blue}

Az osztályneveket meg lehet adni konkrét tag nélkül is, pl.

1

.js {color: blue}

Ez esetben a .js nevű osztályt bármelyik tag-gel használhatjuk. Az osztályoknak pl. a funkciójuk szerint adhatunk nevet. Az osztályokra a t ag-ekben a CLASS attribútummal lehet hivatkozni, pl.

1

<p class=code.html>sárgával írt kód</p>.

Egyszerre csak egy módosítót használhatunk kiválasztó elemenként, alosztályok megadása (pl. code.html.tulajdonsag) nem lehetséges.

Léteznek ún. ID-kiválasztók (ID-selectors) is: ezek megadásánál a kettőskereszt (#) karaktert használjuk, és elnevezésük arra utal, hogy a HTML tag-ekben az ID attribútummal lehet rájuk hivatkozni. Pl.

1

#ind30 {text-indent: 30}

stílusmegadásra hivatkozunk:

1

<p id="ind30">ez egy 30 pixellel beljebb kezdett bekezdés</p>

Pszeudo-osztályok és pszeudo-elelemek

A CSS-t támogató böngészők automatikusan felismerik az ún. pszeudo-osztályokat és pszeudo-elemeket is. A pszeudo-osztályok megkülönböztetik az elemek típusait (pl. a linkeket és a látogatott linkeket, mint hivatkozástípusokat). A pszeudo-elemekkel a tag-ek által meghatározott elemek bizonyos részeire hivatkozhatunk, pl. egy bekezdés első betűjére. Használatuk:

kiválasztó:pszeudo-osztály {tulajdonságnév: érték}
kiválasztó:pszeudo-elem {tulajdonságnév:érték}

A pszeudo-osztályok és pszeudo-elemek nem adhatók meg a CLASS attribútummal, de a hagyományos stílusosztályokkal igen, pl.

Kiválasztó.osztály:pszudo-osztály {tulajdonságnév: érték}
Kiválasztó.osztály:pszudo-elem {tulajdonságnév: érték}

Hivatkozások pszeudo-osztályai

Az tag-hez használhatjuk a

1
2
3
4

a:link { color: red }
a:visited { color: green; font-size: 85% } 
a:hover { color: black; font-size: 85% } 
a:active { color: blue; font-size: 125% }

1

(first-line)

1

P:first-line {font-variant: small-caps; font-weight: bold }

1

p:first-letter { font-size: 300%; float: left }

A szerző honlapja: http://fodorsi.ini.hu