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

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