|
||
Z článku "Jazyky webových stránek" kapitoly "Úvod do jazyka XHTML" již víme, že CSS je zkratka pro Cascading Style Sheets neboli kaskádové styly. CSS definuje způsob zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Styly jsou mocným pomocníkem při designu stránek, neboť představují možnosti, které XHTML ani HTML nemají. Styly zároveň umožňují to, oč se organizace W3C tak dlouho snažila - oddělit strukturu a obsah stránky od jejího vzhledu.
Díky CSS stylům můžeme např. u textu rozhodnout o jeho barvě, pozadí, typu a velikosti písma, dále o jeho podtržení, zarovnání, odsazení, velikost řádkování, velikosti mezer mezi slovy atd. Námi nadefinovaný styl můžeme snadno přiřadit jakémukoliv prvku. Např. nadefinujeme-li prvku odstavce červenou barvu, všechny odstavce na stránce budou červené.
Základními elementy kaskádových stylů jsou atributy a jejich hodnoty. Na rozdíl od XHTML se však u hodnot nepoužívá uvozovek a znaménko rovná se je nahrazeno dvojtečkou:
atribut: hodnota
Definujeme-li v daném stylu více vlastností najednou, pak jsou jednotlivé vlastnosti odděleny středníkem:
atribut: hodnota; atribut: hodnota; atribut: hodnota;
V praxi to může vypadat například takto:
color: red; font-family: Arial
V tomto případě je první atribut color (barva) a jeho hodnotou je red (červená). Druhý atribut je font-family (typ písma) a jeho hodnotou je Arial.
Existují tři základní způsoby, jak použít CSS styly v XHTML dokumentu.
S obecným atributem style jsme se seznámili již v předchozí kapitole ve studijním článku "Obecné atributy v XHTML". Atribut style je obsažen v samostatném Modulu atributu style. Ukázka přiřazení stylů pomocí tohoto atributu je uvedena v příkladu 
.
Styl začleněný do XHTML pomocí atributu style ovlivní jen konkrétní výskyt prvku, kterému byl přiřazen. V příkladu styl ovlivní jen jeden konkrétní odstavec. Kdybychom chtěli, aby se všechny odstavce v dokumentu zobrazily červeně, museli bychom každému zvlášť přiřadit styl s červenou barvou.
W3C tento způsob přiřazení stylů nedoporučuje a nabádá autory stránek, aby dávali přednost dalším dvěma způsobům.
Lepší než přiřazovat styly jednotlivým výskytům prvků pomocí atributu style, je definovat styly samostatně. Jedna z možností, jak to udělat, je umístit definici stylů do samostatného prvku style (ten je obsažen v Modulu stylů). Prvek style má jediný povinný atribut, a tím je atribut type. S tímto atributem jsme se již setkali ve studijních článcích o Objektovém a Formulářovém modulu. V tomto případě se použití atributu type shoduje s použitím u prvku object. I zde totiž slouží k definici MIME typu. V případě CSS stylů je hodnotou atributu type "text/css". Prvek style se i se svým obsahem (s definicí stylů) umisťuje do prvku hlavičky dokumentu (head), aby mohl být prohlížeč informován o stylech ještě než začne vykreslovat obsah stránky.
V samostatné definici stylů se nejprve uvede prvek, jehož vzhled má být definován. Pak následují vlastnosti a hodnoty uzavřené do složených závorek:
prvek {atribut: hodnota; atribut: hodnota}
Všechny výskyty prvku, jehož vzhled byl definován, automaticky převezmou nadefinovanou podobu.
Ukázka XHTML dokumentu, v němž je užita definice stylů umístěná v hlavičce, je uvedena v příkladu 
.
Dejme tomu, že jste si oblíbili určitý design stránky. Máte jasno v tom, že veškeré písmo odstavců má být takové a takové, odstavce odsazené tak a tak, barva nadpisů té a té úrovně taková a taková, pozadí dokumentu zase takové. Pokud chcete vytvořit více stránek užívajících to samé formátování, je externí definice stylů jednoznačně nejlepší volbou. Definici stylů lze umístit do zvláštního dokumentu a XHTML stránkám pouze oznámit jeho URI. V případě, že se rozhodnete změnit vzhled nějakého prvku, provedete změnu v CSS dokumentu a změna se okamžitě projeví na všech stránkách s ním propojených.
Pro definice CSS stylů uvnitř externího dokumentu platí stejná pravidla jako pro definici umístěnou v hlavičce XHTML dokumentu. Externí definici stylů však není třeba umisťovat do prvku style. Ukázka kódu samostatného CSS dokumentu je uvedena v příkladu 
. Tento dokument má příponu css a stejně jako XHTML stránky lze snadno vytvořit v editoru Poznámkový blok (po napsání CSS kódu vybrat v hlavní nabídce Soubor => Uložit jako => napsat jméno souboru a přepsat příponu txt na css).
Aby styly umístěné ve zvláštním CSS dokumentu bylo možno aplikovat na XHTML stránce, musíme v kódu XHTML stránky uvést, kde se daný CSS soubor nalézá. K tomu slouží nepárový prvek link se svými atributy. Tento prvek se nalézá v samostatném Modulu link a slouží ke spojení XHTML dokumentu s jinými dokumenty.
CSS dokument z příkladu má jméno kaskadove_styly.css. Nalézá-li se XHTML stránka ve stejné složce jako daný CSS soubor, učiníme do hlavičky XHTML stránky následující zápis:
<link rel="stylesheet" type="text/css" href="kaskadove_styly.css" />
V nám již známém atributu href (viz studijní články o Hypertextovém modulu) se nalézá URI CSS souboru. Atribut type i zde slouží k definici MIME typu souboru a atribut rel (z anglického relation neboli vztah) definuje vztah stránky k danému souboru. CSS soubor slouží XHTML dokumentu jako "stylesheet" neboli tabulka stylů.
Ukázka XHTML stránky čerpající definici stylů z externího CSS souboru (uvedeného v příkladu ) je uvedena v příkladu 
. V tomto příkladu se stránka i daný CSS soubor nalézají ve stejné složce.
Pro popis lokace CSS souboru platí stejná pravidla jako pro odkazy, obrázky, objekty... prostě stejná pravidla jako pro popsání jakéhokoliv URI. Právě u CSS souborů může často dojít k tomu, že se žádaný CSS soubor nalézá v jiné složce než stránka, jejíž styly definuje. Dejme tomu, že složka muj_web obsahuje složky stranky a styly. Složka stranky obsahuje soubor stranka.htm a složka styly obsahuje soubor kaskadove_styly.css. Struktura složky muj_web je znázorněna zde:
- muj_web
- stranky
- stranka.htm
- styly
- kaskadove_styly.css
Pokud chceme, aby stranka.htm čerpala styly ze souboru kaskadove_styly.css, učiníme do hlavičky XHTML stránky následující zápis:
<link rel="stylesheet" type="text/css"
href="../styly/kaskadove_styly.css" />
Tato část zápisu "../" nás posune v hierarchii složek o jednu nahoru, díky části "styly/" sestoupíme do složky styly a s pomocí části "kaskadove_styly.css" už prohlížeč najde ten správný CSS soubor a bude ho moci při zobrazování stránky stranka.htm použít.
Pravděpodobně nejelegantnější a nejvýhodnější způsob implementace stylů do XHTML je pomocí propojení s externím CSS dokumentem. Kvůli přehlednosti však v dalších příkladech budeme používat definice stylů umístěných přímo v hlavičce XHTML dokumentu.