02 – CSS stílusok megadása


A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is.

A stílusmegadások helye: lehet az oldalhoz hozzárendelt önálló stíluslapfájl, amely csak css kódot tartalmaz, globális stílusmegadás, a

1
<style> .. </style>

tag segítségével, illetve az egyes tag-ek szintjén, beágyazott formában. Erről bővebben a Stíluslapok elhelyezése c. részben lesz szó.

Egy stílusmegadás általános formája:

CSS-kiválasztó {tulajdonságnév1:érték1, tulajdonságnév2:érték2 [stb.]}

A stílusmegadások két részből állnak: a CSS-kiválasztóból (css selector) és a stílusdefiníciós részből (description), pl. a

1
H1 {color:blue}

kód a Heading1 címsorstílust mindig (esetleges felüldefiniálásig) kék színnel fogja megjeleníteni. A CSS-kiválasztó a stílusosztály vagy a módosítandó tag nevét jelenti (példánkban ez utóbbi a H1), amelyet egy pont és az alosztály nevének megadásával lehet szűkíteni. A kapcsos zárójelbe írandó stílusdefiníciós részben szerepelnek a stílus tulajdonságai {tulajdonság név: érték} formában (a fenti példában a {color:blue} a stílusdefíníció). A stílusmegadásoknál lehetőség van egyszerre több stílusdefiníció (vagyis tulajdonság) összevonására, felsorolására, melyeket egymást követően írva, pontosvesszővel kell elválasztani.

Lehetőség van a kiválasztók összevonására is, pl.

1
p em {background:blue}

Ez azt jelenti, hogy az összes olyan kiemelt szöveg, amely bekezdésben van, kék hátteret kap, de pl. a címsorokban szereplő kiemelt szövegekre ez a formázás nincs hatással.

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

Kapcsolódó bejegyzések:
  • A stílusok öröklődhetnek, és a tagen belüli stílusdefiníciókkal felülírhatjuk a globális stílusmegadásokat. Ez azt is jelenti, hogyha egy tag-hez tartozik globál …

  • 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.ht …

  • A stíluslapok importálására is lehetőség van a CSS-benaz @import kulcsszó segítségével. Ezt az önálló stíluslapfájlokban és a STYLE tag-en belül használhatjuk (a …

  • 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 …

  • 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 cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a 02 – CSS stílusok megadása 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>