CSS2

Obsah

1. Úvod do CSS
2. Selektory
3. Média
4. Dědičnost
5. Nové atributy CSS2
6. Odkazy

1. Úvod do CSS

CSS (Cascaded Style Sheets) je jazyk kaskádových stylů.
Každý element HTML, potažmo XHTML, má definovánu řadu atributů řídících způsob jeho zobrazení a chování. Styl elementu je souhrnný pojem pro všechny tyto atributy daného elementu.

:: Na obsah ::

1.1 Proč používat CSS?

Hlavní myšlenka vedoucí k používání CSS je oddělení vzhledu strukturovaného dokumentu od jeho obsahu.
Tímto je mimo jiné možné:

archivovat pouze informační obsah dokumentu.
používat stejnou sadu stylů pro více dokumentů (standardy institucí, ucelený vzhled/chování webu).
změnit vzhled dokumentu bez zásahu do jeho informačního obsahu.

:: Na obsah ::

1.2 Jak používat CSS?

1.2.1 Vnořené styly (embedded styles)

Styly pro dokument můžou být do něj vnořeny v elementu <style> v sekci hlavičky dokumentu (<head>).
Je vhodné zakomentovat vnitřek bloku <style> HTML-komentářem, aby nebyl interpretován prohlížeči nepodporujícími styly.

Příklad:

<style type="text/css">
<!--
div {color: blue; background-color: yellow;}
span {font-size: 16px; color: green;}
-->
</style>

1.2.2 Vkládané styly (inline styles)

Je možné vkládat styly do HTML elementu přímo v jeho atributu style. Ztrácí se tím však dost z výhod CSS.
Takto definované styly mají nejvyšší prioritu, jsou-li používány i jiné způsoby definice stylů.

Příklad:

<div style="color: blue; background-color: yellow;">obsah elementu</div>

1.2.3 Linkované styly (linked styles)

Styly můžou být uloženy v externím souboru (nebo více souborech) stylů CSS. Informace o tom, kde se styly pro daný dokument nacházejí se vkládá do sekce hlavičky (<head>) jako atribut elementu <link>. V externích souborech CSS jsou pak již přímo definice stylů.
Teprve při tomto způsobu definice stylů CSS jsou využity všechny výše vzpomínané výhody.

Příklad:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

1.2.4 Importované styly (imported styles)

Styly můžou být importovány z externího souboru (nebo více souborů) stylů CSS a expandovány na dané místo v dokumentu (jako makro) pomocí direktivy @import umístěné v elementu <style> v sekci hlavičky dokumentu (<head>).
Některé starší prohlížeče však tento způsob vkládání stylů nepodporují.

Příklad:

<style type="text/css">
<!--
@import url(mystyle.css)
-->
</style>

:: Na obsah ::

1.3 Historie CSS

Doporučení CSS1 (Cascaded Style Sheets Level 1) od organizace W3C bylo poprvé publikováno 17.12.1996 a naposled revidováno 11.1.1999.
V dnešní době nejrozšířenější grafické webové prohlížeče podporují valnou většinu z doporučení CSS1. I když jsou jisté implementační rozdíly mezi jednotlivými prohlížeči, které způsobují různý vzhled stejné stránky v různých prohlížečích.

Následníkem CSS1 je doporučení CSS2 (Cascaded Style Sheets Level 2) opět od W3C, které bylo poprvé publikováno 24.3.1998 a naposled revidováno 5.12.1998.
CSS2 je založeno na CSS1 a až na několik málo výjimek jsou všechny platné soubory stylů CSS1 platnými soubory stylů CSS2. CSS2 rozšiřuje množinu selektorů, zavádí podporu stylů závislých na prezentačním médiu, jakož i podporu sluchových atributů a rozšiřuje možnosti v oblastech textů a fontů, okrajů a obrysů, určování visuální polohy, internacionalizace, stránkovaných médií, uživatelského rozhraní, tabulek, generovaného obsahu a řízení obsahu.

Společnost Microsoft se rozhodla ve svém prohlížeči MSIE implementovat další rozšíření CSS, která nejsou součástí doporučení CSS1 a CSS2. Tato rozšíření jsou však implementována výhradně ve zmíněném prohlížeči. Při návrhu vzhledu webu je nutné počítat s tím, že ostatní prohlížeče budou použití těchto rozšíření ignorovat a jejich použití ve skriptech povede k varováním, či chybám při běhu.

Konsorcium W3C pracuje na doporučení CSS3, které však dosud nebylo publikováno.

:: Na obsah ::

Zbytek referátu se bude zabývat výhradně změnami, které s sebou přineslo doporučení CSS2 vůči doporučení CSS1.

Používané značení:

(skupina)
[nepovinný obsah]
| = logické exklusivní nebo
|| = logické neexklusivní nebo, přičemž nezáleží na pořadí
* = výskyt předchozího slova, nebo skupiny 0 až n krát
+ = výskyt předchozího slova, nebo skupiny 1 až n krát
{min,max} = výskyt předchozího slova, nebo skupiny min až max krát

Přibližná míra podpory jednotlivých vlastností CSS2 je udávaná jako číslo od 0 do 1.
0 znamená, že daný prohlížeč danou vlastnost nepodporuje vůbec;
1 znamená, že daná vlastnost je daným prohlížečem podporována plně.
Vzhledem k očekávanému rozsahu práce je podpora každé vlastnosti zkoušena pouze na několika málo příkladech - proto se jedná o míru podpory přibližnou.

Testované prohlížeče jsou tyto:

MSIE: Microsoft Internet Explorer, Version: 6.0.2800.1106.xpsp1.020828-1920
Opera: Opera, Version: 7.20, Build: 3144
Mozilla: Mozilla 1.5, Gecko/20031007
Netscape: Netscape 7.1, Gecko/20030624
Konqueror: Konqueror 3.1-12

2. Selektory

Definice stylu, či pravidlo (rule) má následující syntaxi: Selektor Deklarační_blok
Selektor určuje, na které elementy bude aplikován následující Deklarační_blok.
Deklarační_blok má tvar: { [deklarace [; deklarace[; deklarace[...]]]] }
deklarace je buď prázdný řetězec, anebo má tvar: id_atributu: hodnota

CSS2 zachovává selektory definované v CSS1 a rozšiřuje jejich řadu o následující:

selektor	popis	příklad	podpora
selektor	popis	příklad	MSIE	Opera	Mozilla	Netscape	Konqueror
*	potomek (descendand/wildcard selector)	body * \| body * span	1	1	1	1	1
>	dítě (child selector)	body > a \| div > span	0	1	1	1	1
+	přilehlý sourozenec (adjacent sibling selector)	div + p	0	1	1	1	1
[ ]	atributový selektor (attribute selector)	a[href] \| a[href="http://www.w3.org"]	0	0,5 *1	1	1	1
:first-child	pseudo-třída první-dítě (first-child pseudo-class)	div:first-child	0	0	0	0	0
:focus	dyn. pseudo-třída fokus (focus dynamic pseudo-class)	:focus \| input:focus	0	1	1	1	1
:hover	dyn. pseudo-třída kurzor-nad (cursor-over dynamic pseudo-class)	:hover \| div:hover	0,1 *2	0	1	1	1
:lang	pseudo-třída jazyk (language pseudo-class)	*:lang(de)	0	0 *3	1	1	0 *3
:before	pseudo-element před (before pseudo-element)	div:before{content: url(begin.gif)}	0	1	1	1	0
:after	pseudo-element po (after pseudo-element)	div:after{content: url(end.gif)}	0	1	1	1	0
@media	pravidlo médium (media rule)	@media print \| @media screen	1	1	1	1	1
@page	pravidlo stránka (page rule)	@page{ size: 10in 4in; }	0	1	0	0	0
:first	pseudo-třída první-stránka (first pseudo-class for paged media)	@page:first	0	0	0	0	0
:left	pseudo-třída levá-stránka (left pseudo-class for paged media)	@page:left	0	1	0	0	0
:right	pseudo-třída pravá-stránka (right pseudo-class for paged media)	@page:right	0	1	0	0	0

Vysvětlivky:

*1: fungovala detekce atributu a[href] | a[title], nefungoval příklad a[href="http://www.w3.org"]
*2: pouze <a> a to také jen s atributem href
*3: ovšem *[lang="de"] funguje

:: Na obsah ::

3. Média

CSS2 podporuje soubory stylů závislé na presentačním médiu.

Díky této vlastnosti lze definovat pro webovou stránku různý vzhled a různé chování na definovaných médiích. Některé atributy jsou definovány pouze pro některé typy médií - například sluchová (aural), jiné zase vyžadují jiné hodnoty v závislosti na presentačním médiu - je kupříkladu vhodná větší velikost písma pro obrazovku, než pro tisk.

Při použití jakého média má být aplikována daná sada stylů je možné definovat těmito způsoby:

pomocí pravidla @media

@media print { BODY { font-size: 10pt } }
@media screen {	BODY { font-size: 12pt } }
@media screen, print {
	BODY { line-height: 1.2 }
}

pomocí pravidla @import
```
@import url("loudvoice.css") aural;
```

CSS2 definuje tyto hodnoty pro média:

all - pro všechna zařízení
aural - pro syntetizéry hlasu
braille - pro braillova doteková zařízení
embossed - pro stránkové braillovy tiskárny
handheld - pro handheldy (typicky malá obrazovka, často monochromatická, omezená šířka pásma)
print - pro stránkový tisk a dokumenty zobrazované v módu náhledu pro tisk
projection - pro projektorové prezentace
screen - primárně pro počítačové barevné obrazovky
tty - pro zařízení s pevnou mřížkou pro písmo, např. terminály apod.
tv - pro zařízení typu televize (nízké rozlišení, omezená skrolovatelnost, možnost ozvučení)

:: Na obsah ::

4. Dědičnost

Doporučení CSS2 definuje pro každý atribut, zda je implicitně děděná jeho hodnota z rodičovského elementu, či nikoliv.
Tímto způsobem je například děděná hodnota atributu color a naopak není děděná hodnota atributu background.

CSS2 dále definuje pro každý element HTML/XHTML hodnotu inherit.
Přiřazením této hodnoty atributu elementu je potlačeno implicitní chování dědění a je vynucen přenos hodnoty daného atributu z jeho rodičovského elementu.

:: Na obsah ::