Zápis stylu
CSS se skládá ze selectoru a definice neboli deklarace nebo více definicí.
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:
A konkrétně:
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í.
Pokud budeme chtít určit dvěma elementům jejich společnou vlastnost, oddělíme od sebe jednotlivé selektory čárkou.
Externí soubor
Externí soubory obsahující styly mají obvykle příponu css a jsou to stejně jako html soubory naprosto obyčejné „texťáky“. Tedy můžete používat pořád ten samý editor, jak pro HTML tak pro CSS. Soubor se styly vložíte do stránky následujícím způsobem.
<title>Titulek</title>
<link href=“styly.css“ rel=“STYLESHEET“ type=“text/css“>
</head>
Je to jednoduchý tag link a pomocí parametru href určíte cestu k externímu souboru. Externích souborů si můžete ke stránce připojit kolik chcete a nemusí se ani nacházet na vašem serveru. Jak vypadá takový soubor uvnitř?
styly.css
h1 {font-size:30px;color:yellow;}
V zásadě nadefinujete tag a za něj do složených závorek vpisujete jednotlivé CSS vlastnosti. Tagy nemusí být uvedeny velkým písmem, záleží na zvyku, někomu se t o zdá přehlednější psané velkým písmem.
Jak vidíte na tomto příkladu, definovat se dá i pro více tagů najednou. V tomto případě bychom měli všechny odkazy a nadpisy prvních dvou úrovní červenou barvou. Pokud nadefinujete určitou vlastnost v externím souboru i v tagu pomocí style, tak přednost má parametr style.
styly.css
uvnitř HTML souboru
Text v uvedeném odstavci by byl veliký 15px, nikoliv 20. Priorita jednotlivých vlastností se dá ovlivnit pomocí kouzelného slovíčka !important, uvedeného hned za vlastností.
styly.css
uvnitř HTML souboru
V tomto případě už by text byl veliký 20px. Na !important je dobré dát si pozor. Pokud ho někde použijete a pak na to zapomenete, může vám to způsobit pěkné trápení. Proto je ho lepší využívat pouze jako krajní možnost.
V rámci HTML souboru
Někdy je zbytečné uchylovat se k externímu souboru. Od toho tady máme tag style, který se umístí do hlavičky HTML souboru.
body {font-family: arial, verdana;color: red;}
</style>
Do tagu style můžete psát jednotlivé styly zcela úplně stejně jako do externího souboru.
Importujeme
Existuje ještě jedna možnost, jak vložit externí soubor. A to přímo z jiného externího souboru, tedy nikoliv z HTML (i když lze samozřejmě také).
styly.css