Zápisy CSS

Ukážu vám to rovnou na příkladu.

Už znáte tohle:
<p>tohle je text odstavce</p>
A dejme tomu, že chceme, aby se každý text, označený jako odstavec, vypisoval modře. V CSS je pro to jednoduchá vlastnost neboli atribut color, kterém přiřadíme hodnotu blue. Celý zápis vypadá takto: color: blue;.

Z toho vyplývá, že základní syntaxe CSS je:
atribut dvojtečka hodnota středník.
Máme tři možnosti, kam tohle zapsat, abychom to přiřadili prvku, která má tuto vlastnost s danou hodnotou mít.

In-line zápis

To je takový zápis, který bude přímo u toho prvku, v našem případě odstavce, který chceme tímto stylem ovlivnit, tedy v tomhle případě přebarvit. Na jiné prvky, i když to budou taky odstavce <p>, to nebude mít vliv. In-line zápis vypadá takto:

<p style="color: blue;">tento odstavec má zadán styl a bude tedy modrý</p>
<p>na tento odstavec nebude mít výše zapsaný styl už vliv</p>

In-line zápis se nedporučuje moc používat, protože vlastně nedovolí využít to, co je na CSS přínosné. Vlastnost, tedy třeba tu barvu, jsme takhle nastavili jen tomu jednomu prvku; když ji budeme chtít změnit, musíme změnit přímo tenhle zápis. Budeme-li mít na jedné stránce víc odstavců a všechny budeme mít tímto způsobem obarvené, tak pokud budeme chtít barvu všech změnit na červenou, budeme muset měnit všechny in-line zápisy. Tím ztrácíme jednu základní výhodu CSS. Někdy se to ale může hodit - třeba právě tehdy, kdy jsou všechny odstavce stejné - až na jeden. Tuhle výjimku pak můžeme jednoduše (mimo jiné) zformátovat in-line zápisem, který "přebije" všechno co je v CSS nastavené jiným způsobem. Tj. pokud má text už odjinud (viz další zápisy) nastavenou zelenou barvu, a my mu in-line předepíšeme modrou, bude modrý.

Interní styl - zápis v hlavičce

Můžeme určit, že všechny prvky jednoho druhu na stránce, tj. třeba odstavce neboli vše co je mezi tagy <p></p>, budou modré. Takový zápis umístíme do hlavičky stránky, tj. mezi tagy <head></head>, a to takto:

<head>
<style>
p {
color: blue;
}
</style>
...(další tagy v hlavičce dokumentu)
</head>

Takže: pro každý prvek na stránce, kterému chceme přiřadit vlastnosti pomocí CSS, vypíšeme do hlavičky stránky mezi tagy <style></style> jeho název a mezi složené závorky { } sepíšeme atributy a potřebné hodnoty.

Externí CSS styl

Když se nad tím zamyslíte, určitě hravě přijdete na nevýhodu, kterou má zápis v hlavičce.

Musí být v hlavičce každé stránky. Takže pokud chcete mít modře všechny odstavce na všech stránkách, tak jistě chápete, že zápis p {color: blue;} musíte dát na všechny stránky do jejich hlaviček. To by až takový problém jistě nebyl. Ale až změníte názor na design webu, a všechny odstavce budete chtít mít červené, budete muset otevřít všechny soubory a upravit styl v hlavičce na color: red;. Čili je tu podobný problém, jako u in-line zápisu, jenom není v rámci jedné stránky, ale v rámci celého webu. Takže finální a nejlepší řešení je: celý stylopis, tj. seznamy vlastností a hodnot pro všechny prvky, uložíme jako zvláštní soubor, a do stránek dáme jenom odkaz na tento speciální soubor. V tomto souboru bude jen css, tj. to co je v hlavičce mezi tagy <style></style> (ovšem už bez těchto tagů).

Zmíněný CSS soubor uděláme zase v jakémkoli textovém editoru, nebo v editoru přímo určeném pro CSS, např Topstyle.

Obsah CSS souboru bude tedy vypadat takto:

p {
color: blue;
}

A v samotné HTML stránce:

<head>
<link rel='stylesheet' href='styl.css' type='text/css' />
</head>

Atribut href obsahuje cestu k souboru s externím stylem CSS, a funguje stejně, jako u odkazů <a>, takže je možné pracovat s relativními i absolutními cestami.

Který zápis používat?

Odpověď na tuto otázku jsem postupně už vlastně napsala u jednotlivých typů zápisů. Co se mě týče, v 95% používám externí stylopis. Jen v případě, že u některého prvku nebo jeho části potřebuju změnit formátování naprosto nesystémově a jsem si téměř jistá, že už to jinde znovu nebudu potřebovat, si pro zrychlení práce dovolím inline zápis.

Interní styl, zapsaný v hlavičce, používám vlastně jen při pokusech - když třeba chci vyzkoušet, jak se nějaká hodnota, vlastnost nebo nějaká konkrétní kombinace bude chovat v různých prohlížečích, udělám si zkušební stránku obsahující zkoumaný element a ty CSS hodnoty, jejichž kombinace mě zajímá, napíšu rovnou do hlavičky, takže nemusím vytvářet víc souborů, pouštět další program atd. Teoreticky by se ještě dal interní zápis pochopit v případě, že je vytvářen styl pouze pro jednu stránku - dejme tomu v rámci nějakého webu je uveřejňována kompaktní zpráva, třeba výsledek nějakého měření, která má jednu stránku a vlastní design.

Doporučená četba:

Yuhů o zápisech CSS na JPW


Mozilla Firefox: Znovuzrozený prohlížeč
píše -dis- bb(zavináč)choltice.eu