Umíme přiřazovat styly značkám HTML
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 <p id="odstavec01" class="odstavce">
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>
<em>Nebude červeně</em>
<p><em>Bude červeně</em></p>
</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>
<em>Bude červeně</em>
<p><em>Nebude červeně</em></p>
</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>
<p>Odstavec s odsazeným řádkem.</p>
<p>V tomto ani v případných dalších odstavcích již řádek odsazen nebude.</p>
</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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Globální výpadek IT systémů: Může za to jediná aktualizace
19. července 2024 -
inPage AI: Jak na generování obsahu
18. července 2024 -
inPage AI: Revoluční nástroj pro tvorbu webů
3. července 2024 -
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024
Nejnovější
-
Znovuuvedení domény .AD
5. září 2024 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
Co je to VRAM a jak ji navýšit bez drahého upgradu?
20. srpna 2024