Aby náš XHTML dokument využíval CSS je nutno mu to nějak sdělit. Nejvhodnějším způsobem je
uložit seznam CSS do samostatného souboru (např. style.css
) a do hlavičky
XHTML tento soubor specifikovat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>Moje stránka</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> </head>
Jak vidíme z příkladu, na externí CSS odkazujeme značkou <link>
. Atribut
href
v sobě nese cestu k souboru. Povšimněte si atributu media
. Ten
slouží pro rozlišení různých definic stylů pro různá zařízení. V našem případě definujeme jiné
styly pro obrazovku (screen
) a jiné pro tiskárnu (print
). Proč je zřejmé -
při tisku pak můžeme vypnout některé prvky, které se zobrazují na obrazovce ale pro tisk jou
nepodstatné, např. obrázky nebo reklamní bannery. Médií použitelných v tomto atributu je celá řada,
kromě zmiňovaných stojí za pozornost ještě handheld
pro příruční zařízení.
Souborů s definicemi stylů můžeme vložit i více najednou. Pak samozřejmě funguje pravidlo kaskády a uvedené styly se mohou doplňovat případně může jeden předefinovávat druhý.
V praxi se však externí soubory vkládají ještě jiným způsobem. A to pomocí příkazu
@import
. Význam je jednoduchý - odřízneme tím starší prohlížeče (rozuměj Internet
Explorer 4.0 a Netscape 4.x) od stylových souborů. Jejich podpora CSS je opravdu špatná a proto je
lepší je odříznout (případně jim definovat styly jiné) než je nechat stránku zobrazit. Všechny nové
prohlížeče se s tímto způsobem poradí.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>Moje stránka</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style-simple.css" /> <style media="screen" type="text/css"> @import 'style.css'; </style> </head>
Nakonec uvedeme poslední zajímavost a tou je filtrace prohlížeče Microsoft Internet Explorer. Ten je známý tím, že si některé CSS konstrukce zpracovává po svém a některé vůbec nepodporuje. Můžeme však jednoduchou fintou rozlišit styl, který bude pro něj specifický a ostatní prohlížeče jej přeskočí.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <title>Moje stránka</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <!--[if gte IE 5]> <link rel="stylesheet" type="text/css" media="screen" href="style-msie.css" /> <![endif]--> </head>
CSS je možné také vkládat přímo do hlavičky XHTML souboru, kde je obalíme značkou
<style>
. Tato metoda není doporučovaná, protože znesnadňuje údržbu - pokud
bychom chtěli třeba změnit barvu všech titulků na modrou, museli bychom projít všechny XHTML
soubory a provést změnu. To samé platí pro tzv. inline definování stylů, kdy
definici připojíme přímo ke značce atributem style
.
Vkládejte vždy CSS z externích souborů. Usnadníte si tím údržbu webu - jakoukoliv změnu stylu celého webového serveru můžete provést pouhým přepsáním jednoho řádku v CSS.