Kaskádové styly: Porovnání verzí
Bez shrnutí editace |
|||
Řádek 5: | Řádek 5: | ||
Jazyk byl navržen standardizační organizací [[World Wide Web Consortium|W3C]], autorem prvotního návrhu byl [[Håkon Wium Lie]]. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dne 7. června 2011 byla dokončena revize CSS 2.1<ref>{{Citace elektronické monografie|url=http://www.css3.info/css2-1-and-the-css3-color-module-become-official-w3c-recommendations|datum=03-09-2011|titul=CSS2.1 and the CSS3 Color Module Become Official W3C Recommendations}}</ref> a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí. |
Jazyk byl navržen standardizační organizací [[World Wide Web Consortium|W3C]], autorem prvotního návrhu byl [[Håkon Wium Lie]]. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dne 7. června 2011 byla dokončena revize CSS 2.1<ref>{{Citace elektronické monografie|url=http://www.css3.info/css2-1-and-the-css3-color-module-become-official-w3c-recommendations|datum=03-09-2011|titul=CSS2.1 and the CSS3 Color Module Become Official W3C Recommendations}}</ref> a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí. |
||
== |
== Syntax == |
||
Definice kaskádových stylů sestává z několika ''pravidel''. Každé pravidlo obsahuje ''selektor'' a ''blok deklarací''. Každý blok deklarací pak obsahuje seznam ''deklarací'' oddělených středníky <code>;</code> a každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka <code>:</code> a hodnota vlastnosti. Nepovinně ještě může následovat označení <code>!important</code>, které zvýší sílu deklarace.<ref>[http://broe.hyperlink.cz/ucebnice/L7/index.html Příručka k HTML a CSS]</ref><ref>{{en}}[http://www.w3.org/TR/CSS21/syndata.html#rule-sets Rule sets, declaration blocks, and selectors]</ref> Příklad pravidla: |
Definice kaskádových stylů sestává z několika ''pravidel''. Každé pravidlo obsahuje ''selektor'' a ''blok deklarací''. Každý blok deklarací pak obsahuje seznam ''deklarací'' oddělených středníky <code>;</code> a každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka <code>:</code> a hodnota vlastnosti. Nepovinně ještě může následovat označení <code>!important</code>, které zvýší sílu deklarace.<ref>[http://broe.hyperlink.cz/ucebnice/L7/index.html Příručka k HTML a CSS]</ref><ref>{{en}}[http://www.w3.org/TR/CSS21/syndata.html#rule-sets Rule sets, declaration blocks, and selectors]</ref> Příklad pravidla: |
||
Verze z 2. 3. 2012, 11:30
Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.
Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2, dne 7. června 2011 byla dokončena revize CSS 2.1[1] a pracuje se na verzi CSS3. Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj žádoucí.
Syntax
Definice kaskádových stylů sestává z několika pravidel. Každé pravidlo obsahuje selektor a blok deklarací. Každý blok deklarací pak obsahuje seznam deklarací oddělených středníky ;
a každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka :
a hodnota vlastnosti. Nepovinně ještě může následovat označení !important
, které zvýší sílu deklarace.[2][3] Příklad pravidla:
body {
background-color: white;
color: black;
padding: 10px !important;
}
Celý blok nazveme pravidlo, „body
“ je selektor, část v závorkách je blok deklarací, řádek „background-color: white;
“ je deklarace samotná, „background-color
“ je identifikátor vlastnosti a „white
“ její hodnota. Celý kód pak nastavuje barvu pozadí stránky na bílou, barvu textu na černou a okraj na 10 pixelů.
Selektory
CSS definuje mnoho různých selektorů, které obvykle můžeme kombinovat. Mezi základní patří:[4]
body
– Tyto deklarace budou platit pro všechny výskyty elementubody
.body p
– Tyto deklarace budou platit pro všechny elementyp
, které se nachází v elementubody
, v jakékoliv hloubce.body>div
– Tyto deklarace budou platit pro všechny elementydiv
, které jsou dětmi elementubody
. To znamená, že pokud bychom měli elementdiv
, který se nachází v<body><blockquote><div>…
, tyto deklarace by pro něj neplatily, protože tentodiv
není přímým potomkem elementubody
..trida
– Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavenou třídutrida
. To se provádí pomocí HTML atributuclass
.#id
– Tyto deklarace budou platit pro všechny elementy, které mají v HTML nastavený identifikátorid
. To se provádí pomocí HTML atributuid
.sel1, sel2, sel3
– Selektory můžeme seskupovat pomocí čárek. Následující deklarace pak budou platit pro všechny selektory.
Připojení kaskádových stylů do HTML stránky
Existuje několik možných způsobů, jak aplikovat kaskádové styly v HTML dokumentu;[5] v praxi se nejčastěji používá odkaz na externí soubor.
- Přímý inline zápis stylu pomocí atributu
style
. Tato pravidla budou aplikována pouze na dotyčný element. Ukázka:
<p style="color: red; text-decoration: underline">Tento odstavec bude červený a podtržený.</p>
- Zápis stylů do elementu
style
. Takové styly se aplikují na celou stránku podle předepsaných selektorů. Příklad:
<style type="text/css">
#hlavicka{
width: 200px;
height: 450px;
}
</style>
- Připojení externího souboru pomocí elementu
link
. Příklad:
<head>
<link rel='stylesheet' href='styly.css' type='text/css'>
</head>
Link: <fancy.css>; rel=stylesheet
Výhody CSS
Používání kaskádových stylů ve srovnání se samotným HTML v praxi přináší výhody:
- Rozsáhlejší možnosti formátování. Například pro formátování bloku textu – tj. určení vzdálenosti od jejich elementu či okraje stránky nenabízí HTML nic. CSS má vlastnosti padding[8] a margin[9]. V HTML by bylo potřeba vytvořit složitou konstrukci vnořených tabulek.[10]
- Jednodušší údržba webové prezentace. Pokud chceme změnit nějaký detail, jako třeba barvu nadpisu, nemusíme složitě procházet HTML kód nebo různé HTML šablony, ale můžeme změnit pouze jednu vlastnost v CSS souboru, který je přilinkován ke všem stránkám.
- Oddělení struktury a stylu. V jednom (HTML) dokumentu budeme mít pouze sémanticky označen obsah a v druhém (CSS) dokumentu máme definice vzhledu stránek. Tím dosáhneme snadnějšího strojového zpracování samotného obsahu stránek, do kterého se nám nepletou prvky definující vzhled.
- Cachování stylů – webový prohlížeč si může soubor se styly uložit do cache paměti, čímž může být dosaženo zrychlení načtení stránky. Na druhou stranu při použití externího CSS souboru dochází k dalšímu HTTP požadavku navíc oproti tomu, když bychom použili buď online CSS nebo přímo formátování HTML.
- CSS vlastnosti jednotlivých elementů můžeme dynamicky měnit pomocí Javascriptu.[11]
- S pomocí CSS můžeme jednoduše formátovat i jakýkoliv jazyk XML.[12]
- Mohou také existovat různé styly pro různá výstupní zařízení. Jednoduše tak můžeme nadefinovat různý styl pro tisk, projekci, mobil, PDA, běžný prohlížeč či dokonce pro každý prohlížeč jiný styl. Specifikace CSS nezapomínají ani na zrakově postižené – je možno napsat styly pro hlasový syntetizátor nebo hmatovou čtečku Braillova písma.[13]
- Koncový uživatel si může napsat svůj vlastní CSS styl pro libovolnou stránku. Většina prohlížečů nějakým způsobem podporuje uživatelské styly, takže uživatel si může například nastavit, aby měl všechny odkazy na všech webech vždy podtržené nebo aby na tomto konkrétním webu mělo písmo vždy černou barvu.[14]
- V kombinaci s Javascriptem mohou vzniknout účinné bookmarklety, které mohou různě vylepšovat vzhled stránky. Například odstranit všechny obrázky na pozadí, změnit pozadí na bílé a písmo na černé apod.[15]
Nevýhody
Hlavní nevýhodou CSS je ne vždy dostatečná podpora v majoritních prohlížečích. Prohlížeče obsahují v implementaci CSS chyby a je někdy nesnadné napsat kód tak, aby se ve všech (resp. v běžných) prohlížečích výsledek zobrazil stejně. Situace se poslední dobou značně zlepšuje, mj. opravami chyb v prohlížečích a nástupem nových verzí Internet Exploreru, který byl ve své šesté verzi zdrojem častých chyb v CSS.
Občas se používají podmíněné komentáře, které umožňují definovat na úrovni HTML kód, který bude viditelný pouze Internet Exploreru či naopak.[16][17] Příklad:
<!--[if IE]>
<style type="text/css">
#upozorneni {
color: blue;
}
</style>
<![endif]-->
Tento kód bude interpretován pouze Internet Explorerem, ostatní prohlížeče uvidí obyčejný HTML komentář a interní stylopis tak nebudou interpretovat.
Limity CSS
- CSS selektory neposkytují přístup k rodičovským prvkům, jako to umožňují sofistikovanější jazyky jako například XPath. Nemůžete například nastylovat jen ty odstavce, které obsahují odkaz.
- Horizontální kontrola prvků na stránce je intutivní a jednoduchá, naopak vertikální stylování už působí problém. Například na obyčejné vertikální centrování obsahu se musí používat poměrně složité kombinace a hacky, které ještě nemusí být dopředně kompatibilní.[18]
- CSS neposkytuje možnost pro symbolický zápis proměnné nebo konstanty, všechny hodnoty musí být vepsány přímo v kódu. Například pokud se na vícero místech používá stejná barva, nemůže se použít symbolický zápis
barva=red;
a poté už jen psát proměnnoubarva
, všude se musí uvádět přímo hodnotared
. - CSS neumí počítat výrazy, prohlížeče například neporozumí výrazu
margin-left: 10% - 3em + 4px;
. Webdesigner si to vše musí spočítat sám. - CSS2 nenabízí žádnou možnost pro tvorbu kulatých rámečků nebo jiných kulatých objektů. Pracuje pouze s obdélníky.
- CSS2 nenabízí žádnou možnost, jak jednomu elementu přiřadit více obrázků na pozadí.
Reference
- ↑ CSS2.1 and the CSS3 Color Module Become Official W3C Recommendations [online]. 03-09-2011. Dostupné online.
- ↑ Příručka k HTML a CSS
- ↑ (anglicky)Rule sets, declaration blocks, and selectors
- ↑ Interval.cz: CSS2 - selektory, pseudotřídy a pseudoelementy
- ↑ Polopatě: Zápis CSS
- ↑ (anglicky)Linking to style sheets with HTTP headers
- ↑ HTML 4 5 6: Řešení hádanky
- ↑ Jak psát web: padding
- ↑ Jak psát web: margin
- ↑ Jak psát web: Design pomocí tabulek
- ↑ CSS: Spojení s JavaScriptem
- ↑ (anglicky)How to add style to XML
- ↑ Jak psát web: Odlišné formátování tisku
- ↑ Vlastní styly v prohlížeči Firefox
- ↑ (anglicky)Pixy.cz: My Favorite Favelets
- ↑ Mraveniště.org: Podmíněné komentáře
- ↑ LaTrine: Kouzlo s podmíněným komentářem
- ↑ Vertikální centrování v CSS
Externí odkazy
- Oficiální stránka CSS na webu W3C (anglicky)
- Jak psát web: CSS
- CSS3.info
- CSShrou.sk