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.
code.html {color: yellow}code.js {color:blue}Az osztályneveket meg lehet adni konkrét tag nélkül is, pl.
.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.
<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.
#ind30 {text-indent: 30}stílusmegadásra hivatkozunk:
<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 - link
- visited
- hover
- active
pszeudo-osztályokat, pl.
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% }Ezzel a hivatkozások, az aktuális és a már bejárt hivatkozások megjelenését változtathatjuk meg. Első sor pszeudo-elem Az első sor
(first-line)peszeudo-elem segítségével a szövegblokkok első sorának adhatunk a többi sortól eltérő kinézetet, pl.
P:first-line {font-variant: small-caps; font-weight: bold }Az első betű (first-letter) pszeudo-elemmel lehet iniciálékat készíteni, pl.
p:first-letter { font-size: 300%; float: left }A szerző honlapja: http://fodorsi.ini.hu
Harder
Profil
