Úvod do CSS
Vývoj
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ášť.
Zápis CSS
Možnosti implementace CSS do stránek jsou celkem tři:
- přímý zápis stylu u formátovaného prvku
- zápis stylu do hlavičky dokumentu
- externí soubor *.css
Přímý zápis:
<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.
Zápis do hlavičky dokumentu:
<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é.
Využití externího souboru:
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.
Nadřazenost
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.
Hromadná deklarace
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ě.
Třídy a identifikátory
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>
Pseudotřídy
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ý.
Hromadná deklarace
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.
Následující >
© 2006-2007 Petr Kuda - www.troska.cz