Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem
Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. To je formátování.
Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.
CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. To teď není důležité.
Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale v nejrozšířenějším prohlížeči Internet Exploreru moc nefungují.
CSS zatím nepodporují mobilní zařízení, například prohlížeče Ipaqů. I v nich ale jde text přečíst. CSS nepodporují ani velmi staré prohlížeče (Explorer 2 a Navigator 3), které se však už nikde nevyskytují, a textové prohlížeče (lynx, links), v takových se text nezformátuje (zůstává čitelný).
V první řadě je potřebná znalost HTML (alespoň částečná). Pokud HTML ani trochu neznáte, není třeba číst dál. Ale i pak je pouze pět případů, kdy se opravdu vyplatí zajímat se o CSS styly:
Jinak se to asi nevyplatí.
Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou:
Bylo by ale nefér, kdybych zamlčel, že CSS mají některé chyby a omezení, kvůli kterým jsou mnohými rejpaly zavrhovány. Jak přicházejí nové prohlížeče, tato omezení jsou stále menší.
Styl se může nadeklarovat třemi způsoby, níže uvádím příklady. Stačí, když se pro začátek naučíte naučíte jeden ze tří způsobů:
Samozřejmě stačí ovládnout jenom jeden způsob. Já nejčastěji používám externí css soubor.
Chci udělat odstavec červeným písmem pomocí CSS. Jak už jsem popsal, jde to třemi způsoby:
Do zdroje se napíše tato deklarace odstavce:
<p style="color: red">Tento odstavec bude červený.</p>
Vysvětlení: <p> je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená.
Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>:
<style>
p {color: red}
</style>
a do těla stránky se mohou psát odstavce:
<p>Tento odstavec bude červený. </p>
<p>Tento mimochodem také, protože červené budou všechny.</p>
To, jak zařídit, aby nebyly červené všechny, ale jenom některé odstavce, se dá pomocí "tříd" a "identifikátorů", o tom později.
Vytvoří se soubor, který se pojmenuje třeba styly.css
. V něm
bude pouze tento text:
p {color: red}
Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:
<link rel="stylesheet" type="text/css" href="styly.css">
V těle dokumentu pak budou opět všechny odstavce červené. K dispozici je i podrobnější příklad.
CSS nejsou součástí HTML, a tak se zapisují zcela jiným způsobem, jak už jste si možná všimli. Pokud vám tabulka přijde příliš teoretická, všimněte si pouze příkladů ve spodní části.
Přímý styl: | <tag style="zápis vlastností">stylovaný
element</tag> |
Ve stylopisu: | <style> |
Zápis vlastností zjednodušeně: | vlastnost: hodnota; 2.vlastnost: 2.hodnota |
Zápis vlastností obecně: | vlastnost: hodnota [, hodnota2] [; další zápis vlastností] |
Příklad přímého stylu | <p style="color: red;">text červeného odstavce</p> |
Příklad stylopisu | <style> |
Příklad jednoduchého zápisu vlastností | color: red |
a složitějšího zápisu vlastností | font-family: Arial, Arial CE, sans-serif; color: red; |
Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude to pravděpodobně fungovat. Příklad správného zápisu:
h2 {color:
green; background-color:
yellow}
Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen nehraje roli. K dispozici je seznam vlastností a jejich hodnot.
Hodnoty, které prohlížeč nezná, ignoruje.
Komentáře ve stylopisech se dělají podobně jako v Javě mezi znaky /* a */. Dvě lomítka nefungují.
Deklarovat formát nadpisů přímým stylem je hloupost (to není usnadnění, ale ztížení práce). Ale ve stylopisu nebo v externím css souboru se to dá udělat docela snadno.
<style>
h1 {color: green;}
h2 {color: blue;}
</style>
Potom v celém dokumentu budou nadpisy první úrovně zelené a nadpisy druhé úrovně modré. To ovšem pouze za předpokladu, že při psaní textu byly použity tagy <h1> a <h2>. Jinými slovy, stylopisy se dají efektivně použít pouze u dobře strukturovaných textů. Pokud vás nezajímá teorie strukturování textů, přečtěte si, jak se CSS používá prakticky.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.