Szintaktika - Stíluslapok alapvető szintaktikája
Belső stíluslap
Egy belső stíluslap gyakorlatilag egy HTML elem 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.