V době, kdy se začal rozvíjel web a vznikaly první verze značkovacího jazyka HTML, se nějak nepočítalo s tím, že by webové stránky někdy mohly vypadat pěkně. V představách původních tvůrců HTML se totiž web jevil jako velké množství stroze vyhlížejících stránek plných informací, přičemž vzhled takových stránek nebyl vůbec důležitý. Postupem času se však internet rozšiřoval i mimo akademickou komunitu. Ukázalo se, že je potřeba možnosti webových stránek rozšířit a přidat do nich prostředky pro tvorbu vzhledu.
CSS, neboli kaskádové styly (angl. Cascading Style Sheets), je doplněk k XHTML, který umožňuje formátování obsahu XHTML dokumentu. Navíc umožňuje předdefinovat automatický vzhled jakéhokoliv elementu, umístit cokoliv kamkoliv na stránku nebo třeba mít styl všech stránek někde v externím souboru. V případě změny designu stačí přenastavit jen tento soubor a nedělat to zbytečně na každé stránce zvlášť.
Možnosti implementace CSS do stránek jsou celkem tři:
<h1 style="color: blue;"> Tento nadpis bude modrý </h1>
Jak jste si jistě všimli, je zde drobný rozdíl v zápisu oproti XHTML. Za CSS vlastností se nedělá rovnítko ("=") ale dvojtečka (":"). Mezi jednotlivými atributy se nenechává pouze mezera, ale píše se tam i středník (";").
Přímý zápis stylu platí jen pro jeden konkrétní formátovaný prvek.
<head> <title> Název stránky </title> ... <style type="text/css"> h1 { color: blue; } </style> </head>
Styl se zapíše přímo do hlavičky dokumentu a bude podle něho vypadat celá stránka. V uvedeném případě budou veškeré nadpisy první úrovně modré.
Ovšem v případě, že se rozhodnete změnit celkový vzhled stránek, museli by jste v každé stránce změnit styl. Pokud máte jen nějaké osobní stránky tak to ještě není takový problém, ale v případě rozsáhlejší webové prezentace by to byla práce na dlouhé zimní večery. Tomu se dá předejít využitím externího CSS souboru. Princip spočívá v tom, že provedete zápis stylu stejně jako při zápisu do hlavičky dokumentu, ale celý soubor uložíte pod názvem *.css a v každé stránce se na něj odkážete. Změna souboru se pak automaticky projeví u všech stránek využívajících tento styl.
Externí soubor např. styl.css pak může vypadat takto:
h1 { color: blue; }
Pak už stačí jen uvést do hlavičky dokumentu řádek, který na externí stylopis odkazuje:
<link rel="stylesheet" type= "text/css" href= "styl.css" >
Při tomto zápisu budou modré nadpisy první úrovně ve všech dokumentech, které využívají soubor styl.css.
U CSS platí také určitá hierarchie. Když mám například v hlavičce dokumentu nadefinováno že všechny odstavce budou červené:
<style type="text/css"> p { color: red; } </style>
a přesto chci mít jeden odstavec modrý, udělám to pomocí přímého zápisu stylu:
<p style="color: blue"> Modrý odstavec </p>
Platí zde pravidlo, že přímý zápis má v případě konfliktu nastavených hodnot přednost před zápisem do hlavičky stránky a ten je zas nad externím stylopisem. Přímý zápis má tedy největší prioritu.
CSS může také využívat hromadnou deklaraci:
h1, h2, h3 { color: green; }
To znamená, že nadpisy první, druhé a třetí úrovně budou zelené.
Pochopitelně lze také k jednomu elementu přiřadit více hodnot
h1 { color: green; font-weight: bold; }
Nadpisy první úrovně budou zelené a tučně.
Další možností CSS je nadefinovat si vlastní třídy:
.zelena { color: green; }
".zelena" je třída, kterou jsem si sám nadefinoval v hlavičce stránky nebo v externím stylopisu. Název třídy musí vždy začínat tečkou.
<p class= "zelena"> Tento odstavec je zelený </p>
Nepovinný atribut class (angl. třída) určuje podle jaké třídy bude element formátován. Šikovné je, že lze třídy kombinovat:
<p class= "zelena vpravo"> Tento odstavec je zelený a vpravo </p>
V případě, že by obě třídy obsahovaly stejný element ale s různými hodnotami, bude platit ta která je dříve nadeklarovaná.
Něco podobného jako třídy jsou identifikátory. Fungují prakticky stejně jako třídy, jen s tím rozdílem, že v jednom dokumentu se může každý identifikátor objevit jen jednou (využívají se zejména ve skriptech).
Deklarace identifikátorů se odlišuje tím, že před název se místo tečky píše křížek (#):
#hlavni { color: green; }
K elementu se třída přiřadí pomocí atributu id
:
<h1 id="hlavni"> Nadpis <h1>
Ještě zde existují pseudotřídy (jen u elementu <a>
). Pokud ve stylopisu zapíši vlastnost pro element <a>
, bude ho to ovlivňovat kdykoliv beze změny. Pseudotřídy umožňují rozlišit různé "stavy" odkazu a nastavit mu v různých situacích různé vlastnosti. Jednotlivé pseudotřídy elementu <a>
jsou:
Pseudotřída | Vysvětlení |
---|---|
a:active | právě vybraný odkaz |
a:hover | odkaz na který nejedete myší |
a:link | dosud nenavštívený odkaz |
a:visited | navštívený odkaz |
a:hover { color: red }
Při najetí myší bude odkaz červený.
Další výhodou CSS je dědičnost. To znamená, že pokud do kontejneru <div>
, který má nastavenou barvu textu na červenou, vložím odstavec <p>
, bude i jeho písmo červené. Odstavec tuto vlastnost zdědí od svého rodičovského prvku.
© 2006-2007 Petr Kuda - www.troska.cz