“ a “<span>“, pro uzavření částí dokumentu do jednotlivých celků, které mu pomáhají realizovat grafický návrh. Ten by měl být navržen s ohledem na současné možnosti formátování, neboť ačkoli je v souhrnu „nový“ způsob formátování alespoň tak silný jako „tradiční“ způsoby, je natolik odlišný, že s tím musí grafik dopředu počítat.

Slovo autora Mým cílem bylo vytvořit příručku, která Vám pomůže svou stručností a přehledností v práci. Nejedná se tedy o obsáhlou kuchařku, určenou pro začátečníky, která by Vás vedla krok po kroku, naopak je určená pro mírně pokročilého čtenáře v oblasti webových technologií. Rozdělil jsem práci do několika kapitol, které postupně seznámí čtenáře s jazykem CSS - verzemi CSS1 a CSS2. V současné době je aktuálním tématem verze CSS3, ta je však prohlížeči podporována s obtížemi a jen částečně, proto se o ní v mé práci zmiňuji okrajově. Kapitola „3. Nutná teorie jazyka CSS“, jak už název napovídá, seznámí čtenáře s definicí jazyka CSS, tak aby byl schopen dál s jazykem pracovat s jasnou představou o jeho fungování, ale aby nebyl teorií přílišně zatěžován. V kapitole „4. Přehled funkcí a vlastností CSS“ uvádím seznam vlastností jazyka CSS se základními sledovanými parametry. Podrobnější popis k jednotlivým vlastnostem by však byl nad rámec této práce, proto odkazuji čtenáře na použitou literaturu. Kapitolou „5. CSS v praxi“ dovršuji svou práci a předkládám čtenáři řešení pokročilých formátovacích situací – větší část této kapitoly obsahuje příloha č. 1 na CD ve formátu HTML a CSS pro snadnější manipulaci.

2

2. Obsah

 

1.  ÚVOD ........................................................................................................................... 1  2.  OBSAH ........................................................................................................................ 3  3.  NUTNÁ TEORIE JAZYKA CSS ................................................................................... 5  3.1.  PODPORA CSS PROHLÍŽEČI ...................................................................................................5  3.2.  VAZBA CSS NA (X)HTML A XML DOKUMENTY .................................................................6  3.2.1.  Vazba na HTML dokumenty .........................................................................................6  3.2.2.  Vazba na XHTML dokumenty ......................................................................................7  3.2.3.  Vazba na XML dokumenty............................................................................................7  3.3.  SYNTAXE CSS .......................................................................................................................8  3.3.1.  Symbolický popis syntaxe .............................................................................................8  3.3.1.1.  Speciální znaky ........................................................................................................8  3.3.1.2.  Symboly v zápisu syntaxe ........................................................................................8  3.3.2.  Definice CSS .................................................................................................................9  3.3.3.  Hodnoty a jednotky.......................................................................................................9  3.3.4.  Média ..........................................................................................................................12  3.3.4.1.  Použití médií v tabulkách stylů ..............................................................................12  3.3.5.  Strom dokumentu ........................................................................................................13  3.3.5.1.  Vztahy mezi prvky: ................................................................................................13  3.3.6.  Selektory v tabulkách stylů .........................................................................................13  3.3.6.1.  Kombinování selektorů ..........................................................................................15  3.3.6.2.  Pseudo-prvky a pseudo-třídy ..................................................................................15  3.3.7.  Dědičnost a kaskáda CSS ...........................................................................................16  3.3.7.1.  Postup hledání optimální hodnoty ..........................................................................17  3.3.7.2.  Dědičnost ................................................................................................................17  3.3.7.3.  Kaskádování ...........................................................................................................17  3.3.7.4.  Hodnota inherit a pravidla @import a !important ..................................................18  3.3.8.  Vizuální formátovací model .......................................................................................19  3.3.8.1.  Koncepce boxů .......................................................................................................19  3.3.8.2.  Generování boxů ....................................................................................................20  3.3.8.3.  Poziční schéma .......................................................................................................21  3.3.8.4.  Výpočet rozměrů prvků ..........................................................................................25  3.4.  KRÁTCE O CSS3..................................................................................................................27  4.  PŘEHLED FUNKCÍ A VLASTNOSTÍ CSS ................................................................ 30  5.  CSS V PRAXI............................................................................................................. 45  5.1.  5.2.  5.3.  5.4.  5.5.  5.6. 

OBECNÉ POSTUPY ................................................................................................................45  CHYBY PROHLÍŽEČŮ ............................................................................................................45  USPOŘÁDÁNÍ STRÁNKY .......................................................................................................46  SEZNAMY ............................................................................................................................46  FORMULÁŘE A TABULKY .....................................................................................................46  FORMÁTOVÁNÍ TEXTU .........................................................................................................46  3

5.7.  5.8. 

VIZUÁLNÍ EFEKTY ...............................................................................................................47  UŽITEČNÉ RADY ..................................................................................................................47 

6.  ZÁVĚR ....................................................................................................................... 48  7.  LITERATURA ............................................................................................................ 49  8.  PŘÍLOHY ................................................................................................................... 51 

4

3. Nutná teorie jazyka CSS

3.1. Podpora CSS prohlížeči Jazyk CSS je v jednotlivých prohlížečích implementován v rozdílném rozsahu, nebo různým způsobem. To znamená, že ne všechny definice a vlastnosti (popř. jejich hodnoty) jsou podporovány jednotlivými prohlížeči podle W3C specifikace jazyka a jeho verzí. Některé vlastnosti buďto nejsou podporované vůbec, nebo je prohlížeče pojímají po svém a tím se odklánějí od W3C spefifikace. Většinou je oním problémovým prohlížečem MS InternetExplorer1. Naštěstí, řešit tyto problémy bude čím dál míň potřeba, protože současné prohlížeče se čím dál víc přibližují specifikacím. Stále však přetrvává nutnost mít znalost, které definice a vlastnosti (popř. jejich hodnoty) jsou podporované jakým prohlížečem.2

1 2

Více v kapitole 5.2. Chyby prohlížečů. Více v kapitolách 3.3.6. Selektory v tabulkách stylů a 4. Přehled funkcí a vlastností CSS, popř. v použité literatuře.

5

3.2. Vazba CSS na (X)HTML a XML dokumenty 3.2.1. Vazba na HTML dokumenty a) Připojením externího souboru Připojení externího souboru k dokumentu s tabulkou stylů se provádí vložením příkazu „“ do hlavičky dokumentu. K dokumentu může být takto připojeno více externích souborů. Tento způsob důsledně naplňuje ideu oddělení formátování od struktury dokumentu a přináší výhody s tím spojené (např. po prvním načtení dokumentu daného webového místa se stylový soubor ukládá do paměti a načítání dalších dokumentů se tím podstatně urychlí). Tabulka 1: popis vlastnosti „link“ [2, str. 24-25]

Příkaz „“ má atributy: href: type: rel: media: title:

URL adresa k externímu souboru s tabulkou stylů Content-type, neboli typ obsahu – vždy „text/css“ typ vazby k externímu zdroji, vždy „stylesheet“ pro základní tabulky stylů, resp. „alternate stylesheet“ pro alternativní tabulky stylů druh média, pro který je tabulka stylů určena; nepovinný atribut; implicitní hodnota „all“, viz část Média titulek k tabulce stylů; praktický význam jen u „alternate stylesheet“

Příklad 1: [1, str. 37]

b) Tabulkou stylů v dokumentu Vložení tabulky stylů přímo do hlavičky dokumentu se provádí pomocí příkazu „<style>“. Je zřejmé, že se tabulka stylů načítá s každým načtením dokumentu – to vede ke zvýšení objemu přenesených dat (oproti předchozímu přístupu), také je náročnější přestylování webu. Ovšem hodí se tam, kde z nějakého důvodu potřebujeme definovat styly přímo v dokumentu. Tabulka stylů je určená seznamem pravidel (@pravidel) složených ze selektorů a k nim příslušných seznamu definic stylů, popř. doplněná komentáři. Stejného efektu předchozího přístupu docílíme pomocí vepsání příkazu „@import("URL");“ do tabulky stylů. Příkaz „<style>“ má atributy: „type“, „media“, „title“ viz. Připojením externího souboru.

6

Příklad 2: [1, str. 36] <style type="text/css">

c) Přímým stylem Styly lze přiřadit i jednotlivým prvkům dokumentu prostřednictvím atributu „style“. Hodnotou atributu je definice stylu (resp. seznamu definic stylu). Tento způsob je nevhodný a v novějších verzích XHTML dokonce nepřípustný. Často se používá pro testování vzhledu během vývoje webu. Příklad 3:

d) Dynamicky klientským skriptováním a DOM Načtené CSS definice jsou uloženy v poli „document.styleSheets[]“, kde každá položka v poli odpovídá jedné sekci „<STYLE>“, včetně externích souborů načtených direktivou „@import“, nebo pomocí příkazu „“. Pořadí položek v poli pak odpovídá pořadí načítání CSS. Obecně podporovaná je pouze vlastnost „disabled“, která (de)aktivuje daný stylesheet. Příklad 4: [4)] document.styleSheets[n].disabled = true | false

3.2.2. Vazba na XHTML dokumenty Vložení stylů do dokumentu se provádí především připojením externího souboru jako u HTML dokumentu, nebo tabulkou stylů v dokumentu (od tohoto způsobu se upouští). Příklad 5: [1), str. 37] <style type="text/css"> /*

3.2.3. Vazba na XML dokumenty V jazyce XML se externí soubory s CSS načítají do dokumentu pomocí deklarace: Příklad 6: [1), str. 38]

7

3.3. Syntaxe CSS 3.3.1. Symbolický popis syntaxe Používají se znaky podle normy ISO 10646 - v českém prostředí jsou doporučené pouze znaky ASCII. U názvů prvků, jež jsou součástí jazyka CSS, nezáleží na velikosti písmen. Kdežto u názvů prvků dokumentu záleží na velikosti písmen v závislosti na specifikaci jazyka dokumentu. Např. pro HTML nezáleží, kdežto pro XML záleží na velikosti písmen. 3.3.1.1. Speciální znaky − uvozovky ( " = ASCII 34), ( ′ = 39), − mezera, tj. libovolně velká posloupnost mezer (mezera = 32, CR = 12, LF = 10, FF = 12, TAB = 9) − čárka ( , = 44) a středník ( ; = 59) pro oddělovaní seznamu Význam speciálních znaků může být změněn zpětným lomítkem „\“, který také slouží k zápisu znaku v dekadickém nebo hexadecimálním tvaru. 3.3.1.2. Symboly v zápisu syntaxe Tyto symboly se budou používat v příkladech pro jednodušší pochopení platnosti zápisu syntaxe: Tabulka 2: symboly v zápisu syntaxe [1), str. 39]

symbol

Popis

[…]

hranaté závorky uzavírají položku pro následující varianty.

*

Výraz X se může vyskytovat v lib. počtu 0 až n-krát.

+

[X]

Výraz X se může vyskytovat v lib. počtu, ale alespoň jednou (1 až n-krát).

[X]?

Výraz X se může i nemusí vyskytovat (0 nebo 1-krát).

[X]{m,n}

Výraz X se opakuje nejméně m-krát a nejvýše n-krát.

[X|Y|Z]

Seznam alternativ, vyskytuje se právě jedna z uvedených položek.

[X||Y||Z]

Seznam alternativ, vyskytuje se jedna či více z uvedených položek v lib. pořadí.

mezera

Všude kde je mezera může být lib. prázdný prostor.

[X]

Některé znaky ( | , [ , ] , { , } , ? , * , + , mezera ) mají zvláštní význam - pokud se tento znak vyskytne v textu, bude uveden v uvozovkách.

8

3.3.2. Definice CSS Vlastnosti můžou být jednoduché nebo sdružené. Jednoduché vlastnosti mají definici stylu ve tvaru „vlastnost: hodnota;“, kde mezera je nepovinná a středník za hodnotou se zapisuje vždy, když existuje vlastnost ležící za uvažovanou vlastností v seznamu definic stylu. Sdružené vlastnosti umožňují v jedné definici stylu nastavit více vlastností najednou, zadáním seznamu hodnot oddělených mezerami a to: „sdružená_vlastnost: hodnota[ hodnota]*“. Kde při vynechání libovolné hodnoty seznamu se příslušná vlastnost nenastaví, ale zdědí z nejbližšího nadřízeného prvku. Definice stylu je přiřazením hodnoty (resp. seznamu hodnot) vlastnosti (resp. sdružené vlastnosti). Definice se mohou spojovat do seznamu definic stylu, který je ve tvaru „definice[; definice]* “, neboli „vlastnost: hodnota[; vlastnost: hodnota]*“. Tabulka stylů definuje styly pro celý dokument. Je určena seznamem pravidel a at-pravidel (např. „@import“, „@media“, atp. rozšiřující CSS o další funkce – viz dále v textu). pravidlo = „selektor { seznam_definic }“, kde selektor je symbolický popis prvku, či skupiny prvků. Rozvoj pravidla: „[@]?pravidlo“, „[@]?selektor { seznam_definic; }“, „[@]?selektor { definice[; definice]* }“, „[@]?selektor { vlastnost: hodnota[; vlastnost: hodnota]* }“, Popř. „[@]?selektor { sdružená_vlastnost: hodnota[; hodnota]* }“. Příklad 7: /* ukázka možných zápisů pravidel */ @import url("styly.css"); P { font-weight: bold; font-size: 12pt; } P { font: bold 12pt; }

komentář at-pravidlo pravidlo se seznamem definic pravidlo se sdruženými vlastnostmi

Samozřejmě je víc možností, jak zapisovat pravidla do tabulky stylů (viz dále v textu). Mezi jednotlivými pravidly píšeme mezeru. Identifikátory pravidel (názvy prvků) nemohou začínat pomlčkou nebo číslem.

3.3.3. Hodnoty a jednotky Tabulka 3: typy hodnot i jednotek a jejich charakteristika [1), str. 42-46; 2, str. 30-36]

popis

příklad



obvykle zastupuje jinou hodnotu, na níž se dané klíčové slovo převede; zapisujeme bez uvozovek

color: yellow

<číslo>

celé

hodnota

„[+|-]<číslo>“ přirozenému číslu může předcházet symbol „+“, „-“ (bez mezery)

9

kde yellow = rgb(100%,100%,0%)) 0, 1, 10, -156

reálné

0, 1, 10, -156, 3.141559, -2.1, .3

relativní jednotky

em

vypočítaná hodnota vlastnosti „fontsize“ aktuálního prvku; při použití v samotné vlastnosti „font-size“ se hodnota vztahuje k vlastnosti „fontsize“ rodičovského prvku

line-height: 1.2em font-size: 1.2em

ex

výška malého písmene „x“ zvoleného písma; často prohlížeče mylně interpretují jako 1ex = 0.5em

font-size: 1.2ex

px

obrazový bod, jehož velikost závisí na zobrazovacím zařízení: obrazovka, tiskárna, projektor, atp.

width: 780px

mm

milimetr

width: 100mm

cm

centimetr

width: 10cm

in

palec (angl. inch) 25,4mm

width: 3.94in

pt

typografický bod (angl. point) 1/72 in, především při výstup na tiskárnu

72pt = 1in, 1pt = 0.3528mm

pc

typografická jednotka pica 1pc = 12pt

1in = 6pc = 72pt

absolutní jednotky



„[+|-]<číslo>[.<číslo>]?“ jsou buď celá, nebo desetinná čísla; desetinná část se odděluje „.“

zapisujeme: „<číslo>%“ (bez mezery); procenta se vztahují k jiné hodnotě, kterou je nutno uvést - např. jiná hodnota stejného prvku, stejná hodnota předchůdce, nebo hodnota formátovacího kontextu

100%, 33.33%, -10%, .5%



platná adresa nějakého zdroje na webu; je uzavřená v ′, nebo "; zapisujeme absolutně (včetně názvu protokolu), nebo relativně (pokud se nacházíme v aktuálním nebo vnořeném adresáři); musí být kódována UTF-8

url("http://bouse. blbeckove.com/ ebook/css.pdf") url(../css.pdf) url(′../css.pdf′) url("../css.pdf") ′../css.pdf′ "../css.pdf "



číselně

<%>

hexadecimálně

„#[RRGGBB|RGB]“ kde R – červená, G – zelená, B – modrá

#B1F836 (kde R = B1, G = F8, B = 36 ), #BB5588 (resp. #B58)

dekadicky a procentuálně

pomocí funkce „rgb(R,G,B)“, kde R, G, B musí být uvedené buď shodně dekadicky, nebo shodně procentuálně.

rgb(127, 0, 255) tj. rgb(50%,0%,100%)

10

klíčová slova <úhel>

P.pozn:before { content: "citace ′odřádkovaného textu \n na výstupu′" } A[title="velmi dlou\ hý titulek] { ... }

„<číslo>[deg|rad|grad]“, kde číslo je kladné, „deg“ jsou stupně (v tom případě může být číslo i záporné – automaticky se přepočítává, rozmezí: 0º360º), „rad“ radiany, „grad“ grady (360º = 400gradů)

10deg = 350deg = 6.1087rad = 388.9grad

<čas>