Co je to CSS?
CSS (Cascading Style Sheets) = kaskádové styly
CSS je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.
Jazyk CSS byl navržen standardizační organizací W3C (kde první návrh vypracoval Håkon Wium Lie). Aktuálně byly zatím vydány dvě úrovně specifikace CSS1 a CSS2 a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak.
Poprvé CSS implementovala společnost Microsoft v roce 1996 do Internet Exploreru 3.0. Starší verze HTML obsahovala celou řadu prvků, které nepopisují obsah a strukturu dokumentu, ale především způsob zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí, neboť větší část zdrojového kódu zabírá kód samotný na úkor obsahu.
Tato technologie, zcela nahrazuje tag <FONT> a uvádí v provoz tag <STYLE>
Nyní se podíváme na tag <STYLE>:
<STYLE type="text/css">
.jméno_třídy{ deklarace }
#jméno_identifikátoru{ deklarace }
jméno_tagu{ deklarace }
</STYLE>
V praxi to může vypadat třeba takto:
<STYLE type="text/css">
.modra{color: blue;}
#zeleny{color: green; font-size: 11px}
div{color: red }
</STYLE>
Deklarované objekty (třída, identifikátor a tag) použijeme v dokumentu takto:
<P class=modra> ... </P>
<SPAN id=zeleny> ... </SPAN>
<DIV> ... </DIV>
Také je možné tagy upřesnit pomocí pseudoelementů:
A:link { styl nenavštíveného odkazu }
A:visited { styl navštíveného odkazu }
A:active { styl aktivního odkazu }
A:hover { styl odkazu po přejetí myši }
P:first-line { styl prvního řádku odstavce }
Soubory *.css
Tak jako skripty v JavaScriptu, tak i styly můžete mít uložené mimo stránku (externě). Což je také u moderních webů trendem, hlavně kvůli obsahové úspoře velikosti zdrojového kódu -
především z hlediska SEO.
Soubor stylů má koncovku *.css a odvolat se na něj můžeme v hlavičce stránky pomocí tagu .
Samotný soubor obsahuje jen obsah, který by normálně byl mezi tagy.
<!DOCTYPE html>
<HTML lang="cs" dir="ltr">
<HEAD>
<TITLE>titulek stránky</TITLE>
<LINK rel="stylesheet" href="/style.css" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>