Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Doboz modell

Pozicionálás

Szöveg formázása

Színek

Méretek

Táblázatok

Listák

Szintaktika - Stíluslapok alapvető szintaktikája

Belső stíluslap

Egy belső stíluslap gyakorlatilag egy HTML elem style attribútumának megadását jelenti. Példa:

<p style="font-size: 10pt; color: #888888; text-align: center”>Ez egy szürke mondat.</p>

Tehát a tulajdonság nevét kettőspont és szóköz, majd az érték követi. Ha több tulajdonság van megadva, akkor azokat pontosvessző választja el egymástól.

Külső és dokumentum szintű stíluslapok

A külső és a dokumentum szintű stíluslapok megadására azonos szintaktikai szabályok vonatkoznak. Az általános formátum:

szelektor {tulajdonság: érték}

A szelektor (amit a szakirodalomban kiválasztónak is szoktak nevezni) „mondja meg”, hogy az utána következő deklarációs blokk milyen elemekre vonatkozik. A deklarációs blokk kapcsos zárójelek között helyezkedik el. Ha a deklarációs blokk több tulajdonság: érték párost tartalmaz, akkor azokat pontosvessző választja el egymástól.

Szelektorok megadására a CSS szabvány sok fajta lehetőséget kínál, én itt csak a legfontosabbakat mutatom be.

A szelektor a legegyszerűbb esetben egy HTML elem neve:
p {font-size: 10pt; color: #888888; text-align: center}
Egy ilyen deklaráció a dokumentum összes bekezdésére vonatkozik.

Több HTML elemre is vonatkozhat ugyan az a deklarációs blokk, ekkor az elem neveket vesszővel kell elválasztani egymástól:
h1, h2, h3, p {color: #0000ff}
ami mindhárom címsor színét és a bekezdések színét is kékre állítja.

Osztály szelektorok

A HTML elemek egy szűkebb körére is megadható stílusdeklaráció. Ilyenkor egy stílusosztályt kell definiálni, amire a dokumentum törzsben lehet hivatkozni. A szelektor nevében a HTML elem nevét pont választja el az osztály azonosítótól:
p.szurke {font-size: 10pt; color: #888888; text-align: center}
Ebben az esetben a dokumentum törzsben az alábbit írhatod:
<p class=”szurke”>Ez egy szürke mondat.</p>

Lehetőség van általános osztálynevet is definiálni, ekkor a szelektor nem tartalmaz HTML elem nevet, csak a pontot és az osztály azonosítót:
.szurke {font-size: 10pt; color: #888888; text-align: center}
Ilyen esetben több fajta HTML elem is hivatkozhat az adott stílusosztályra:
<div class=”szurke”>Ez egy szürke mondat.</div>
<p class=”szurke”>Ez egy másik szürke mondat.</p>

Azonosító szelektorok

Egyedi azonosítóhoz is lehet stílusdeklarációt kapcsolni:
#labjegyzet {font-size: 10pt; color: #888888; text-align: center}
A HTML dokumentum törzsben pedig ezt lehet írni:
<p id=”labjegyzet”>Ez egy lábjegyzet, ami 10 pontos betűnagysággal, szürke színnel, középre igazítva jelenik meg.</p>
Mivel a szabvány szerint egy dokumentumon belül nem rendelkezhet több HTML elem ugyan azzal az azonosítóval, így ezen a módon egy oldalon egyetlen elem stílusát lehet megadni.

Rangsor a szelektorok között

Ha egy HTML elem valamelyik tulajdonságára több stílusdeklaráció is vonatkozik, amelyek eltérő értékeket állítanának be, akkor a böngésző programok a legszűkebb hatókörű szelektorral beállított érték alapján jelenítik meg az adott elemet. Tehát a HTML elem nevéhez rendelt deklarációt felülírhatják az osztály azonosítók és mindkettőt módosíthatják az egyedi azonosítóhoz rendelt stílus szabályok.


Megjegyzések a stíluslapokban »