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

  • link
  • visited
  • hover
  • active

pszeudo-osztályokat, pl.

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% }

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

1
(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.

1
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.

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

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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét