Kaskádové styly (cascading style-sheets) tvoří jednu z možností, jak ovlivnit vzhled stránky. Toto jsme se v mnoha případech již učili pomocí zamítnutých atributů, které ale v příští normě HTML klidně už být nemusí, a proto je potřeba znát i styly.
Český překlad "kaskádové styly" nepovažuji za zcela nejšťastnější (konec konců jako mnoho dalších českých překladů informatické i matematické terminologie) zejména proto, že je spíše zavádějící (než navádějící). Tento překlad je správný jen z technického pohledu, kde browser pouze skládá definovaným způsobem tři styly. První styl je určen autorem prohlížeče a říká, jaké představy o "pěkné" stránce má ten, kdo vytvořil konkrétní browser. Druhý styl je definován uživatelem prohlížeče, který může "přetloukat" vlastnosti nastavené implicitně. Třetí (a nejsilnější) styl může být definován autorem stránky (priority všech tří stylů jsou poměrně pochopitelné, jelikožpostupujeme-li od obecného ke speciálnímu, je jen přirozené, že to speciální má přednost před obecným. My se budeme učit tvořit pouze ty třetí styly, tedy ty nastavované autorem stránek. Nicméně zpět k nepovedenosti překladu "kaskádové styly". Tento překlad zanedbává druhý smysl anglické formulace, a to skládání, tedy "kaskádování" stylů. Autor stránek definuje styly pro různé tagy, které mohou být postupně povnořovány a i v tomto případě se postupuje od obecného ke speciálnímu, tedy je-li styl pro tělo ve sporu se stylem pro odstavec, má přednost styl pro odstavec. Ale tam, kde styl pro odstavec není definován a styl pro tělo ano, je použit styl pro tělo.
Styl je opět reprezentován nějakým kusem dat ve formátu holého textu, tento text je možno umístit buďto přímo do zdrojového (HTML) textu stránky, nebo do zvláštního souboru. Jak propojit styly se stránkou (kterou již umíme vyrobit) si povíme v následující kapitole, abychom v průběhu přespříští kapitoly mohli vše náležitě prozkoušet a nebyli přitom zmateni způsobem vkládání.
Od toho, zda chceme popis stylu umístit do zvláštního souboru, nebo přímo do stránky, se odvíjí způsob, jakým přes HTML můžeme dotyčný styl "natlouct" do stránky.
Tyto způsoby jsou tři:
LINK použijeme styl
uložený ve zvláštním souboru,
STYLE definujeme styl přímo do
stránky - před tag /STYLE (podobně jako u tagu
SCRIPT a vkládání Javascriptu, též se jedná o kód v jiném
jazyku než HTML), nebo
STYLE u různých tagů
definujeme místní styly (platné pro konkrétní použití
konkrétního tagu).
<LINK rel="stylesheet" href="soubor_se_stylem.css" type="text/css"> <!-- Přiřazením do atributu rel říkáme, že vkládáme CSS, atributem HREF říkáme, o jaký soubor se jedná a atributem TYPE sdělujeme, že soubor obsahuje kaskádové styly (obsah podtypu CSS) --> <STYLE type="text/css">
zde definujeme styl
</STYLE>
Styl obecně definujeme tak, že popíšeme situaci, pro kterou
se právě styl definuje a pak do složených závorek popisujeme,
jak má dotyčná pasáž vypadat. Popis situace v nejjednodušším
případě může být jméno tagu, jemuž definujeme styl (ve složitějších
případech můžeme definovat styl pro případy po sobě jdoucích tagů
specificky nastavených atributů id a class.
Ve složených závorkách opět přiřazujeme, jakou hodnotu má mít jaký
atribut. Oproti HTML se ovšem atributy jmenují jinak a neoddělujeme
je od hodnoty rovnítkem, nýbrž dvojtečkou. Dále neplatí,
že pokud hodnoty uzavřeme do závorek, nic nezkazíme. Většina
hodnot se do uvozovek neuzavírá, navíc kaskádové styly jsou
case-sensitive a jména tagů by měla
být uvedena velkými písmeny, kdežto jména a hodnoty atributů
malými.
<STYLE type="text/css">
BODY { color: red;
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
H1 { color: blue }
</STYLE>
Nic nám nebrání definovat styl naněkolikrát, tj. třeba takto:
<STYLE type="text/css">
BODY { color: red }
BODY { font-family: "Gill Sans", sans-serif }
BODY { font-size: 12pt }
BODY { margin: 3em }
</STYLE>
<!-- em odkazuje k velikosti fontu (šířka m), ex - výška x -->
V příkladu vidíme dvě možnosti definování stylu pro tělo (tag
BODY). V obou případech říkáme, že odstavec bude
tištěn červenými písmeny, bezpatkovým fontem ("Gill Sans" je
součástí CSS2, pro browsery s CSS1 platí jen údaj, že font má
být bezpatkový (sans-serif), že font má být 12bodový a okraj
má mít šířku 3x šířka malého m.
Jelikož většina úkonů prováděných pomocí stylů je nastavování barviček, řekněme si, jak se to dělá. Jednak můžeme barvu popsat jménem. Pojmenovaných barev je ale poměrně málo, proto je občas potřeba postoupit k RGB. Tradičně popisujeme barvy jako směs červené, zelené a modré. Oproti HTML máme mnohem více možností, jak RGB použít. Můžeme použít tyto možnosti:
#f00 - každé barvě odpovídá jeden znak,
obvyklou variantu získáme zdvojením všech písmen,
#ff0000 - známá varianta,
rgb(255,0,0) - tentokrát zadáváme čísla desítkově
a oddělujeme čárkami,
rgb(300,0,0)
color: rgb(255,-10,0)
color: rgb(110%, 0%, 0%) - zadáváme hodnotu
procentem - "přečnívající" hodnota je opět oříznuta.
Další podstatná součást stylů je určování rozměrů. Jednotky
můžeme určit absolutně nebo relativně. Absolutní jsou zejména
body (pt či mm, relativní využívají
vlastností právě použitého fontu. Tyto relativní jednotky jsou
dvě, em odkazuje k šířce malého písmene
m, ex odkazuje k výšce malého
x. Neobsahuje-li nějaký font m resp.
x, stále můžeme tyto jednotky používat, norma ovšem
nezaručuje, jaký smysl budou mít!
em - šírka m,
ex - výška x.
in - palce,
cm, mm - centimetry resp. milimetry,
pt - body,
pc - pica - 12 bodů.
Většina tagů má atributy id a class.
Tyto atributy jsou navrženy pro roztřídění objektů řízených
stejnými tagy a protlačení různých vlastností požadovaných
při různých příležitostech. Například
má dobrý smysl barevně odlišit odstavce nesoucí zvlášť
důležitou informaci, jak vidíme třeba na tomto odstavci.
Definici stylu omezíme na tagy příslušné třídy pomocí tečky:
Styl pro odstavec třídy výstraha definujeme takto:
<STYLE type="text/css">
Odstavec dotyčné třídy vyrobíme takto:
p.vystraha { color: red }
</STYLE>
<p class="vystraha">
Pozor, pozor...</p>
Pozor, pozor...
Podobně postupujeme, omezujeme-li platnost stylu na tag
se specifickým ID. Oproti třídě je syntaktický
rozdíl pouze v tom, že místo tečky píšeme křížek.
<STYLE type="text/css">
První reflektuje odstavec pojmenovaný pepicek,
druhé libovolný objekt pojmenovaný aaa.
p#pepicek { letter-spacing: 0.3em }
*#aaa { color: red }
</STYLE>
Chceme-li omezit platnost stylu na po sobě jdoucí tagy,
vložíme mezi jejich jména znak plus. Následující příklad
definuje styl pro případ, že jde nadpis druhé úrovně (tag
H2) za nadpisem první úrovně(tagem H2),
vynechá (zkrátí) vertikální mezeru:
<STYLE type="text/css">
H1 + H2 { margin-top: -5mm }
</STYLE>
Normu najdete třeba na:
http://www.w3.org/TR/REC-CSS2/.
FIXME! Ještě by to chtělo nějaký příklad...