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

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

Kapcsolódó bejegyzések:
  • Font Family: betűcsalád (típus) megadása. Több betűtípus is megadható egymás után, melyeket vesszővel kell elválasztani. Pl.P { font-family: “Times New Rom …

  • A STYLE attribútum segítségével az egyes HTML tag-ek szintjén adhatunk meg stílusdefiníciókat. Használhatjuk minden <BODY>-ba illeszthető tag-ben, kivéve p …

  • Gyakran jöhet jól, ha egységesíteni tudjuk oldalunk tartalmát. Címek esetében jól jöhet, ha egységes módon (pl.: nagy kezdőbetű, utána végig kis betűk) írjuk őke …

  • Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a 03 – Stílusosztályok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>