Úvod do CSS
Historie
CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. První návrh normy byl zveřejněn v roce 1994, v roce 1996 byla pak vydána specifikace CSS 1, v roce 1998 CSS 2, nyní se pracuje na verzi CSS 3.
K čemu je to dobré?
CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s formátováním pomocí atributů v HTML formátovací schopnosti rozšiřuje. Styly umožňují přesně určit, jak bude který element vypadat. Narozdíl od atributů stylem můžeme definovat jednotný vzhled elementu pro celý dokument (např. že všechny nadpisy úrovně 1 budou červené) a to jediným zápisem pro příslušný element (nikoli v každém tagu příslušného elementu). Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný výskyt určitého elementu. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód stane mnohem přehlednější. Navíc pokud se jednou rozhodneme změnit například barvu písma všech odstavců, bude to pro nás otázka několika málo vteřin, měnit každý atribut u každého elementu v HTML by byla katastrofa. Jeden styl můžeme snadno použít pro libovolné množství stránek.
Začínáme
Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. Celé to zapisujeme takto:
selektor {vlastnost: hodnota_vlastnosti}
A konkrétně:
h1 {color: blue}
Selektorem, tedy elementem, který formátujeme je zde h1 (nadpis 1. úrovně). Deklarací je {color: blue}. Ta určuje, že vlastnost color bude mít hodnotu blue. Celé dohromady to tedy znamená, že všechny nadpisy 1. úrovně v dokumentu budou mít modrou barvu.
Pokud budeme chtít určit elementu více než jednu vlastnost, jednotlivé vlastnosti od sebe oddělíme středníkem. Takto můžeme definovat libovolné množství vlastností.
selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}
Pozn.: Samozřejmě je možný i zápis každé vlastnosti zvlášť, ale to je zbytečné.
Pokud budeme chtít určit dvěma elementům jejich společnou vlastnost, oddělíme od sebe jednotlivé selektory čárkou.
selektor1, selektor2 {vlastnost: hodnota_vlastnosti;}
Dědičnost
Většina vlastností se dědí. To znamená, že element, který nemá vlastnost definovanou jí dědí po nadřazeném elementu. Týká se to především vlastností písma — barvy, velikosti, stylu atd. Pokud tedy chceme definovat nějakou vlastnost, kterou budou mít všechny elementy společnou (a později případně je vytvářet výjimky) definujeme ji pro element body.
Komentáře
Pokud si chceme ke stylu psát nějaké poznámky pro lepší orientaci, zapíšeme ji do komentářů. Ty se v CSS tvoří pomocí /* a */. Mezi hvězdičky pak můžeme umístit i několikařádkový komentář, ten se samozřejmě ve výsledném zobrazení neobjeví.
body {color: blue} /* tady si píši komentář, že mám všechny texty modré*/
Připojení stylu k dokumentu
Styl můžeme k dokumentu připojit několika způsoby, můžeme definovat přímo v dokumentu nebo v externím souboru, způsoby můžeme i kombinovat.
Externí soubor
Pokud chceme mít styl uložený v externím souboru (což je velmi výhodné při používání jednoho stylu pro více dokumentů), v nějakém textovém editoru uložíme námi definovaný styl do souboru s příponou css. Ten pak připojíme k dokumentu zápisem v hlavičce (tj. mezi tagy <head> a </head>) buď v tagu link
<link rel="stylesheet" type="text/css" href="styl.css" />
nebo v tagu style
<style type="text/css">@import "styl.css";</style>
Pokud je styl umístěn na jíném serveru, tak můžeme použít zápis:
<style type="text/css">@import url("http://www.neco.cz/styl.css");</style>
Zápisem @import "styl.css"; můžeme také vložit jeden styl do druhého stylu.
Definování stylu uvnitř dokumentu
To můžeme provést opět v tagu style kam tentokrát místo odkazu na externí styl umístíme přímo definici stylu.
<style type="text/css">body {color: blue}</style>
Nebo můžeme definovat styl přímo nějakému elementu, což se hodí zvláště v případě, kdy máme definovaný jednotný styl, ale pro například jedno konkrétní slovo chceme použít jiné pravidlo. Potom použijeme v příslušném tagu atribut style.
<h1 "style=color: green">nadpis</h1>
Váha stylů
Pokud ve stylu definujeme pro stejný element stejnou vlastnost dvakrát, vyšší váhu má ta deklarace, která byla definovaná později (myšleno na pozdějším řádku) a ta se také provede. Pokud bychom chtěli některé deklaraci přiřadit větší důležitost, použijeme !important.
h1 {color: blue !important}
Pozn.: Starší (ale opravdu hodně staré) prohlížeče styly vůbec nepodporují. Pokud tedy používáte zápis pomocí tagu style a chcete tento případ ošetřit, stačí celý styl vložit do komentářů: <!-- zde bude definovaný styl -->