Umíme přiřazovat styly značkám HTML

11. listopadu 2002

•

První verze kaskádových stylů nabízí vesměs primitivní možnosti přiřazení stylů značkám webové stránky. S příchodem druhé verze je možné aplikovat styly například na sousední značky či na základě hodnot jejich atributů. Jak vypadají takové zápisy a jak jim rozumí vybrané prohlížeče?

Základní způsoby přiřazení stylu

Nejjednodušším způsobem přiřazení stylu k označkované části dokumentu je uvedení jména příslušné značky, tj. například definice stylu odstavce bude vymezena p {...}. Podobně lze přiřadit styl značkám s identifikátorem (obsahují atribut id) či spadající do nějaké třídy (obsahují atribut class>), tj. ke značce  lze stylové vlastnosti přiřadit také pomocí následujících definic:

#odstavec01 {…}
.odstavce {…}

Z hlediska struktury webového dokumentu lze přiřazení stylu ke značkám omezit na základě toho, zda jsou tyto značky obsaženy v jiné značce, podle následující definice budou červená jenom ta zvýraznění, která jsou obsažena v odstavcích:

p em {color: red}

Větší flexibilitu v přiřazování stylů na základě struktury dokumentu však CSS 1 nenabízí.

Hvězdička na scéně

Hlavním přínosem druhé verze CSS je zástupný znak * nahrazující jak libovolný element (tj. značku) v dokumentu, tak libovolný (jeden a více) počet úrovní elementů (tj. hloubku zanoření jedné značky uvnitř jiných značek). Podle zadání:

body * em {color: red}

budou červená jenom ta zvýraznění, která nejsou přímo obsažena v těle webové stránky (ale jsou například v nějakém odstavci):

<body>
Nebude červeně
Bude červeně
</body>

Pokud bychom naopak chtěli aplikovat styl pouze na přímé potomky, lze to zařídit symbolem >:

body > em {color: red}

a tedy:

<body>
Bude červeně
Nebude červeně
</body>

Já na bráchu…

Kromě posuzování závislosti rodič/potomek (tj. vnořenosti značek do sebe), lze v CSS2 pomocí symbolu + upřesňovat také sourozenecký vztah, tj. zda značce, které chceme přiřadit styl, předchází jiná značka (či vícero značek):

h1 + p {text-indent: 2em}

Podle této definice bude první řádek odsazen pouze u odstavce, který bezprostředně následuje za nadpisem první úrovně:

<body>
<h1>Nadpis</h1>
Odstavec s odsazeným řádkem.
V tomto ani v případných dalších odstavcích již řádek odsazen nebude.
</body>

Speciálně pro první a poslední elementy v řadě sourozeneckých značek existují upřesňující pseudotřídy first-child a last-child, které lze použít následujícím způsobem:

h2:first-child {margin-top: 2em}
body > *:last-child {margin-bottom: 3em}

Před nadpisem druhé úrovně bude zvětšeno odsazení pouze v případě, že jej nepředchází nějaká značka na stejné úrovni. Zároveň bude zvětšeno odsazení za poslední značkou na stránce (ať už je tato značka jakákoli). Pseudotřídu last-child sice specifikace CSS 2 vůbec nedefinuje, v Mozille přesto funguje.

Když mají atributy co říci

Dále lze pomocí CSS 2 omezit přiřazení stylu ke značce na základě atributů této značky; vyhodnocování atributů se zapisuje do hranatých závorek:

a[name] {color: green}
a[target=“_blank“] {color: blue}

Takto budou veškeré kotvy, které figurují jako návěští, vypsány zeleně (bez ohledu na identifikátor návěští, tj. hodnotu atributu name) a veškeré odkazy, které otevírají nové okno, modře (zde tedy již pouze v případě, že hodnota atributu target je _blank).

Pokud je důležitý pouze atribut značky a na značce samotné nezáleží, lze samozřejmě použít hvězdičku jako zástupný symbol, přičemž specifikace ji povoluje vynechat, zápis *[lang="cs"] je tedy ekvivalentní s [lang="cs"]. Všimněme si, že tímto způsobem je možné nahradit přiřazení stylů podle identifikátoru či třídy, jak je představeno v prvním příkladě tohoto článku:

[id=“odstavec01″] {…}
[class=“odstavce“] {…}

V praxi je však kvůli kompatibilitě zřejmě vhodnější způsob podle CSS 1.

Konečně dodejme, že všechny výše uvedené techniky přiřazování stylů lze všelijak kombinovat pro dosažení požadovaných výsledků.

A co na to prohlížeče?

Výsledky zkoušení popsaných přiřazovacích technik v různých prohlížečích jsou poměrně jasné. Mozilla výše popsaná pravidla zvládá beze zbytku (testováno na verzi 1.1), Opera (verze 6.05) až na pseudotřídy také. Kamenem úrazu je Internet Explorer, který žádnou z přiřazovacích technik CSS2 neumí ani v poslední verzi 6.0.