SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE

Transkript

1 SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE Pavol Hudran 2007 OPAVA

2 SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky Pavol Hudran Bakalářská diplomová práce CSS v praxi (Practical Cascading Style Sheets) vedoucí práce Mgr. Michaela Ačová OPAVA 2007

3 Prohlášení studenta Prohlašuji, že jsem diplomovou práci včetně příloh vypracoval samostatně pod vedením vedoucí diplomové práce a uvedl jsem všechnu použitou literaturu. V Opavě dne Pavol Hudran

4 Poděkování Děkuji především Mgr. Ačové, vedoucí diplomové práce, za její odbornou pomoc a cenné připomínky při vypracování této diplomové práce. Pavol Hudran

5 1. Úvod Tabulky kaskádových stylů (Cascading Style Sheets = CSS) jsou nadstavbou jazyků HTML, XHTML a XML. Slouží k popisu prezentace dokumentů, aniž by jakkoli ovlivňovali jejich obsah a strukturu. Vývoj spravuje a specifikaci jednotlivých verzí publikuje organizace World Wide Web Consorcium (= W3C) Původně formátování dokumentu HTML záviselo na výstupním zařízení. Kvůli rychle se vyvíjejícím potřebám uživatelů a vylepšením výrobců prohlížečů bylo HTML obohaceno příkazy (= tagy) nad rámec původního HTML standardu a jeho logické struktury, což přináší mnoho problémů: špatnou čitelnost kódu pro vyhledávače, ekonomickou zátěž velké množství přenesených kb, špatnou čitelnost pro zařízení postižených lidí i ztrátu nezávislosti a přenositelnosti dokumentu mezi zařízeními. Řešením je návrat k standardizovanému HTML dokumentu s formátováním definovaným odděleně pomocí CSS stylů, čemuž se přizpůsobují i prohlížeče s větší, či menší úspěšností. Prohlížeče rozeznávají několik druhů HTML dokumentů (např. HTML 4.0, HTML 4.0 Transitional, nebo XHTML 1.0) s významem, že dokumenty mohou být formátovány starým, přechodovým, nebo novým způsobem. Starý upřednostňuje formátování formátovacími příkazy jazyka HTML s obohacením formátovacích možností jazykem CSS, to však jen minimálně. Styly jsou často definované přímo v dokumentu tabulkou stylů, nebo přímými styly. Rozvržení layoutu a prvků na stránce je řešené pomocí tabulek - dochází k vnořování tabulek. Přechodový toleruje většinu původních formátovacích příkazů a taktéž nabízí většinu možnosti formátování pomocí CSS s výjimkou rozvržení layoutu, který je stále řešený tabulkou. Styly můžou být do dokumentu začleněné připojením externího souboru. Nový nepodporuje staré formátování, ale plně uplatňuje formátování CSS styly, včetně rozvržení stránky a pozicování jednotlivých prvků. Nový přístup nevytváří HTML dokument jako důsledek navrženého vzhledu, ale postupuje se přesně opačně. Vychází se z obsahu, který má dokument sdělit. Snaží se o co nejlepší strukturování dokumentu: určí se pořadí jednotlivých částí, jejich hiarerchie a vzájemné vazby. Cílem je přehlednost dokumentu, aby začínal nejdůležitějšími informacemi a postupoval k méně důležitým a aby struktura odpovídala sdělovanému obsahu. To přináší výhody: širší formátovací možnosti snadná tvorba a údržba jednotného stylu celého webu (pro celý web stačí jediný soubor s tabulkou stylů) oddělení struktury a stylu (důsledky: přehlednost; obsah a vzhled mohou tvořit různí lidé, což je v praxi často potřeba; tentýž obsah lze beze změny logické struktury naformátovat více [1]

6 způsoby; stylové pravidla je možné tvořit pro obecnou strukturu obsahu ještě dříve, než skutečný obsah vznikne) vyšší přístupnost dokumentů (pro osoby s různými hendikepy, libovolné koncové zařízení např. prohlížeč, tiskárna, zvukový styl pro čtecí zařízení, atd.) dynamická práce se styly (různé efekty jako popup menu, atd.) formátování XML dokumentů Až s takovýmto dokumentem pracuje grafik, který do něj zasahuje jen přidáváním neškodných příkazů <div> 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 a. 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

7 2. Obsah 1. ÚVOD OBSAH NUTNÁ TEORIE JAZYKA CSS PODPORA CSS PROHLÍŽEČI VAZBA CSS NA (X)HTML A XML DOKUMENTY Vazba na HTML dokumenty Vazba na XHTML dokumenty Vazba na XML dokumenty SYNTAXE CSS Symbolický popis syntaxe Speciální znaky Symboly v zápisu syntaxe Definice CSS Hodnoty a jednotky Média Použití médií v tabulkách stylů Strom dokumentu Vztahy mezi prvky: Selektory v tabulkách stylů Kombinování selektorů Pseudo-prvky a pseudo-třídy Dědičnost a kaskáda CSS Postup hledání optimální hodnoty Dědičnost Kaskádování Hodnota a a!important Vizuální formátovací model Koncepce boxů Generování boxů Poziční schéma Výpočet rozměrů prvků KRÁTCE O CSS PŘEHLED FUNKCÍ A VLASTNOSTÍ CSS CSS V PRAXI OBECNÉ POSTUPY CHYBY PROHLÍŽEČŮ USPOŘÁDÁNÍ STRÁNKY SEZNAMY FORMULÁŘE A TABULKY FORMÁTOVÁNÍ TEXTU

8 5.7. VIZUÁLNÍ EFEKTY UŽITEČNÉ RADY ZÁVĚR LITERATURA PŘÍLOHY

9 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 InternetExplorer 1. 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 Více v kapitole 5.2. Chyby prohlížečů. 2 Více v kapitolách Selektory v tabulkách stylů a 4. Přehled funkcí a vlastností CSS, popř. v použité literatuře. 5

10 3.2. Vazba CSS na (X)HTML a XML dokumenty 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 <link> 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 ] Příkaz <link> má atributy: href: URL adresa k externímu souboru s tabulkou stylů type: Content-type, neboli typ obsahu vždy text/css rel: typ vazby k externímu zdroji, vždy stylesheet pro základní tabulky stylů, resp. alternate stylesheet pro alternativní tabulky stylů media: druh média, pro který je tabulka stylů určena; nepovinný atribut; implicitní hodnota all, viz část Média title: titulek k tabulce stylů; praktický význam jen u alternate stylesheet Příklad 1: [1, str. 37] <head> <link rel="stylesheets" type="text/css" href="<uri>"> </head> 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í do tabulky stylů. Příkaz <style> má atributy: type, media, title viz. Připojením externího souboru. 6

11 Příklad 2: [1, str. 36] <head> <style type="text/css"> <!-- tabulka_stylů //--> </style> </head> 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: <značka style="seznam_definic"> 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 nebo pomocí příkazu <LINK>. 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 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] <head> <style type="text/css"> /* <![CDATA[ */ tabulka_stylů /* ]] */ </style> </head> Vazba na XML dokumenty V jazyce XML se externí soubory s CSS načítají do dokumentu pomocí deklarace: Příklad 6: [1), str. 38] <?xml stylesheet type="text/css" tref="url"> 7

12 3.3. Syntaxe CSS Symbolický popis syntaxe Používají se znaky podle normy ISO 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 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 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 [ ] [X] * [X] + [X]? [X]{m,n} [X Y Z] [X Y Z] mezera 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. Výraz X se může vyskytovat v lib. počtu, ale alespoň jednou (1 až n-krát). Výraz X se může i nemusí vyskytovat (0 nebo 1-krát). Výraz X se opakuje nejméně m-krát a nejvýše n-krát. Seznam alternativ, vyskytuje se právě jedna z uvedených položek. Seznam alternativ, vyskytuje se jedna či více z uvedených položek v lib. pořadí. Všude kde je mezera může být lib. prázdný prostor. Některé znaky (, [, ], {, },?, *, +, mezera ) mají zvláštní význam - pokud se tento znak vyskytne v textu, bude uveden v uvozovkách. 8

13 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 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 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 Hodnoty a jednotky Tabulka 3: typy hodnot i jednotek a jejich charakteristika [1), str ; 2, str ] hodnota popis příklad <klíčová slova> <číslo> obvykle zastupuje jinou hodnotu, na níž se dané klíčové slovo převede; zapisujeme bez uvozovek celé [+ -]<číslo> přirozenému číslu může předcházet symbol +, - (bez mezery) color: yellow kde yellow = rgb(100%,100%,0%)) 0, 1, 10,

14 reálné [+ -]<číslo>[.<číslo>]? jsou buď celá, nebo desetinná čísla; desetinná část se odděluje. 0, 1, 10, -156, , -2.1,.3 <velikost> relativní jednotky em ex 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 výška malého písmene x zvoleného písma; často prohlížeče mylně interpretují jako 1ex = 0.5em line-height: 1.2em font-size: 1.2em font-size: 1.2ex px obrazový bod, jehož velikost závisí na zobrazovacím zařízení: obrazovka, tiskárna, projektor, atp. width: 780px absolutní jednotky 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 = mm pc typografická jednotka pica 1pc = 12pt 1in = 6pc = 72pt <%> 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% <uri> 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(" blbeckove.com/ ebook/css.pdf") url(../css.pdf) url(../css.pdf ) url("../css.pdf")../css.pdf "../css.pdf " <barva> čí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

15 klíčová slova AliceBlue (#F0F8FF), AntiqueWhite (#FAEBD7), Aqua (#00FFFF), Aquamarine (#7FFFD4), Azure (#F0FFFF), Beige (#F5F5DC), Bisque (#FFE4C4), Black (#000000), BlanchedAlmond (#FFEBCD), Blue (#0000FF), BlueViolet (#8A2BE2), Brown (#A52A2A), BurlyWood (#DEB887), CadetBlue (#5F9EA0), Chartreuse (#7FFF00), Chocolate (#D2691E), Coral (#FF7F50), CornflowerBlue (#6495ED), Cornsilk (#FFF8DC), Crimson (#DC143C), Cyan (#00FFFF), DarkBlue (#00008B), DarkCyan (#008B8B), DarkGoldenRod (#B8860B), DarkGray (#A9A9A9), DarkGrey (#A9A9A9), DarkGreen (#006400), DarkKhaki (#BDB76B), DarkMagenta (#8B008B), DarkOliveGreen (#556B2F), Darkorange (#FF8C00), DarkOrchid (#9932CC), DarkRed (#8B0000), DarkSalmon (#E9967A), DarkSeaGreen (#8FBC8F), DarkSlateBlue (#483D8B), DarkSlateGray (#2F4F4F), DarkSlateGrey (#2F4F4F), DarkTurquoise (#00CED1), DarkViolet (#9400D3), DeepPink (#FF1493), DeepSkyBlue (#00BFFF), DimGray (#696969), DimGrey (#696969), DodgerBlue (#1E90FF), FireBrick (#B22222), FloralWhite (#FFFAF0), ForestGreen (#228B22), Fuchsia (#FF00FF), Gainsboro (#DCDCDC), GhostWhite (#F8F8FF), Gold (#FFD700), GoldenRod (#DAA520), Gray (#808080), Grey (#808080), Green (#008000), GreenYellow (#ADFF2F), HoneyDew (#F0FFF0), HotPink (#FF69B4), IndianRed (#CD5C5C), Indigo (#4B0082), Ivory (#FFFFF0), Khaki (#F0E68C), Lavender (#E6E6FA), LavenderBlush (#FFF0F5), LawnGreen (#7CFC00), LemonChiffon (#FFFACD), LightBlue (#ADD8E6), LightCoral (#F08080), LightCyan (#E0FFFF), LightGoldenRodYellow (#FAFAD2), LightGray (#D3D3D3), LightGrey (#D3D3D3), LightGreen (#90EE90), LightPink (#FFB6C1), LightSalmon (#FFA07A), LightSeaGreen (#20B2AA), LightSkyBlue (#87CEFA), LightSlateGray (#778899), LightSlateGrey (#778899), LightSteelBlue (#B0C4DE), LightYellow (#FFFFE0), Lime (#00FF00), LimeGreen (#32CD32), Linen (#FAF0E6), Magenta (#FF00FF), Maroon (#800000), MediumAquaMarine (#66CDAA), MediumBlue (#0000CD), MediumOrchid (#BA55D3), MediumPurple (#9370D8), MediumSeaGreen (#3CB371), MediumSlateBlue (#7B68EE), MediumSpringGreen (#00FA9A), MediumTurquoise (#48D1CC), MediumVioletRed (#C71585), MidnightBlue (#191970), MintCream (#F5FFFA), MistyRose (#FFE4E1), Moccasin (#FFE4B5), NavajoWhite (#FFDEAD), Navy (#000080), OldLace (#FDF5E6), Olive (#808000), OliveDrab (#6B8E23), Orange (#FFA500), OrangeRed (#FF4500), Orchid (#DA70D6), PaleGoldenRod (#EEE8AA), PaleGreen (#98FB98), PaleTurquoise (#AFEEEE), PaleVioletRed (#D87093), PapayaWhip (#FFEFD5), PeachPuff (#FFDAB9), Peru (#CD853F), Pink (#FFC0CB), Plum (#DDA0DD), PowderBlue (#B0E0E6), Purple (#800080), Red (#FF0000), RosyBrown (#BC8F8F), RoyalBlue (#4169E1), SaddleBrown (#8B4513), Salmon (#FA8072), SandyBrown (#F4A460), SeaGreen (#2E8B57), SeaShell (#FFF5EE), Sienna (#A0522D), Silver (#C0C0C0), SkyBlue (#87CEEB), SlateBlue (#6A5ACD), SlateGray (#708090), SlateGrey (#708090), Snow (#FFFAFA), SpringGreen (#00FF7F), SteelBlue (#4682B4), Tan (#D2B48C), Teal (#008080), Thistle (#D8BFD8), Tomato (#FF6347), Turquoise (#40E0D0), Violet (#EE82EE), Wheat (#F5DEB3), White (#FFFFFF), WhiteSmoke (#F5F5F5), Yellow (#FFFF00), YellowGreen (#9ACD32) <řetězec> reprezentuje nějaký text, který vpisujeme mezi, nebo "; možný zápis: " "; výskyt znaků, jimiž je řetězec omezen: \, "\"", "\\", odřádkování: "\n", popř. rozepsání ve zdroji na více řádků: "...\..." <audio> <úhel> <čas> <čí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ů) <číslo>[s ms], kde číslo je kladné a s jsou sekundy, ms milisekundy P.pozn:before { content: "citace odřádkovaného textu \n na výstupu " } A[title="velmi dlou\ hý titulek] {... } 10deg = 350deg = rad = 388.9grad 120ms, 5s <frekvence> <číslo>[hz khz], kde číslo je kladné a Hz jsou hertze, khz kilohertze 2400Hz, 4.2kHz 11

16 Média Jedním z hlavních úkolů CSS je určit, jakým způsobem se má zobrazit dokument na různých typech koncových zařízení (médiích), tj. definovat pro ně rozdílné styly prezentace dokumentu. Média jsou určené typem a mají přiřazenou minimálně jednu skupinu médií, do které náleží. Příslušnost ve skupině přiřazuje médiu množinu vlastností, definovanou pro tuto skupinu. Proto se jednotlivé typy médií vyznačují rozdílnou množinou vlastností (popř. hodnot těchto vlastností). Tabulka 4: typy médií a jejich charakteristika [1), str ; 2), str ] typ média popis stránkovaná plynulá zvuková vizuální hmatová znaková grafická interaktivní statická all všechny typy médií aural zvukový výstup na klávesovém syntetizátoru braille braillova dotyková zařízení embossed stránka zobrazená plastickým tiskem na braillově tiskárně handheld obrazovka kapesního počítače print náhled tisku, stránky tištěné na tiskárně projeciton promítané prezentace (např. projektory) screen obrazovka počítače tty neproporční znakový výstup (dálnopisy, terminály, atp.) tv televizní obrazovky a podobné zařízení Použití médií v tabulkách stylů Připojení tabulky stylů do hlavičky dokumentu, která má platit pouze pro dané médium: Příklad 8: [1), str ] <link rel="stylesheet" type="text/css" href="styl.css" media="seznam_medií"> <style type="text/css" media="seznam_medií"> <!-- tabulka_stylů //--> </style> <style url("url"): seznam_medií; </style> kde seznam médií obsahuje názvy médií oddělené čárkou. Implicitně je nastaveno all. Pro definování médií přímo v tabulce stylů : Příklad 9: [1), str. seznam_medií { /* pravidla platná pro tato média */ } 12

17 uvnitř bloku nesmíme importovat další tabulky stylů Strom dokumentu HTML i XML popisují dokument pomocí stromové struktury. Kořenový prvek, který je jediný (př. <html> ), obsahuje všechny ostatní prvky. Ty jsou uzavřené do jednotlivých celků větví, vytvářejících hierarchii dokumentu. Možné vztahy mezi prvky stromové struktury ilustruje příklad: Příklad 10: [1), str. 49] <html> <head> <title>titulek stránky</title> </head> <body> <h1>nadpis1</h1> <p>odstavcový text</p> <ul> <li>položka seznamu1</li> <li>položka seznamu2</li> </ul> </body> </html> Vztahy mezi prvky: Tabulka 5: demonstrace vztahů mezi prvky [1, str ] Každý prvek kromě kořenového obsahuje právě jeden rodičovský prvek. Každý rodič má množinu potomků, tj. prvky, které bezprostředně obsahuje. Prvky, které rodič obsahuje, ale ne bezprostředně (jsou hlouběji vnořené), jsou jeho následovníci. Potomci stejného rodiče jsou sourozenci. Předcházející sourozenec je prvek, který předchází uvažovanému prvku a je současně sourozenec. např. pro 4. je rodič 1. např. pro 4. jsou potomci 5.,6., 7. např. pro 4. jsou následovníci 8., 9. např. 5., 6., 7. jsou sourozenci např. pro 6. je předcházející sourozenec 5. Obdobně následující sourozenec. např. pro 6. je následující sourozenec 7. Předcházející prvek je prvek, který je předcházející sourozenec nebo předek. Následující prvek je prvek, který je následující sourozenec nebo následovník. např. pro 6. jsou předcházející prvky 5., 4., 1. např. pro 6 jsou následující prvky 7., 8., Selektory v tabulkách stylů Mějme: pravidlo = selektor {seznam_definic} Selektor je přepínač pravidla je to symbolický popis prvku nebo skupiny prvků, které se v dokumentu mohou vyskytovat. Pokud selektor vyhovuje prvku, potom se prvku přiřazuje seznam definic pravidla. Ovšem prvek může vyhovovat více pravidlům, což řeší kaskádování a dědičnost (viz dále). Selektorů je více druhů a existuje i několik operátorů. 13

18 Tabulka 6: typy selektorů a jejich charakteristika [1), str ; 2), str ] skupina typ selektoru popis příklad podpora základní univerzální označuje se symbolem * a vyhovují mu všechny prvky dokumentu rozšířené s atributy typový existence atributu atribut dané hodnoty atribut obsahující danou hodnotu atribut obsahující danou podhodnotu vícenásobné atributy vyhovují mu všechny prvky daného typu značky označuje se x[atribut] a vyhovují mu všechny prvky typu x (i pro * ), které mají (jakkoli) definovaný zvolený atribut označuje se x[atribut=hodn] a vyhovují mu prvky typu x (i pro * ), jejichž atribut má hodnotu přesně rovnu hodn. Hodnotami jsou buď id, nebo jméno třídy nebo řetězce označuje se x[atribut~=hodn[ hodn] * ] (ekvivalentně x.hodn[.hodn] * ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je atribut=hodn resp. atribut=hodn[ hodn] * pro vícenásobné třídy označuje se x[atribut =hodn] a vyhovují mu prvky typu x (i pro * ), jejichž atribut obsahuje seznam hodnot oddělených spojovníkem (znak - ), a první z nich je právě hodnota hodn označuje se x[atribut[=hodn]? ] + a vyhovují mu prvky typu x (i pro * ), jež odkazuje na více atributů prvku, nebo na více možných hodnot jednoho atributu vlastní třídy označuje se x[class~=hodn[ hodn] * ] (ekvivalentně x.hodn[.hodn] * ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je class=hodn, resp. class=hodn[ hodn] * pro vícenásobné třídy * {font-size: 10pt} IE5.0 img {border: 1px solid #FF0000} *[alt] {... } img[title] {... } *[alt="popis1"] {...} img[title="titul1"] {...} p[id="odstavec1"] {...} div[class="box1"] {...} *[class~="nadpis"] {...} pro <h1 class="nadpis"> <h1 class="cervena nadpis kurziva"> platí, kdežto pro <h1 class="cervenanadpi s"> neplatí a[lang="en-us"] {...} a[lang="cs"][title] {...} h1[class~="nadpis"] {...} h1[class~="cerveny nadpis kurzivou"] {...} ekvivalentně h1.nadpis {...} h1.cerveny.nadpis.k urzivou {...} NN4.0 IE4.0 OP5.0 IE5.0 resp. 14

19 id označuje se x[id~=hodn] (ekvivalentně x#hodn ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je id=hodn, hodn musí nabývat unikátních hodnot h1#nadpis {...} *#nadpis {...} #nadpis {...} NN4.0 IE4.0 resp. Kdy použít atribut id a kdy class : to vychází z povahy atributu id z jeho unikátnosti. Atribut id tedy používáme u prvku, o němž víme, že se v dokumentu vyskytuje pouze jednou, a class naopak u prvku, o němž víme, že se vyskytuje vícekrát Kombinování selektorů Selektory je možné vícenásobně kombinovat pomocí operátorů a podle jejich kontextu a vazeb na okolí ve stromu dokumentu, což umožňuje vytvářet velmi složité i podrobné selektory, a tím rozšířit jejich pole působnosti. Tabulka 7: relační operátory mezi selektory [1), str ; 2), str ] operátor popis příklad podpora, mezera slučování umožňuje do jednoho pravidla sloučit více selektorů, které mají mít shodnou definici stylu; dál v kódu je možné pravidla samostatně (pře)definovat následnictví definice stylu pro potomka, nebo následníka uvažovaného prvku > potomek definice stylu pro přímého potomka uvažovaného prvku + sousední sourozenci definice stylu pro následujícího sourozence uvažovaného prvku (časté využití pro oddělovače mezi stejnými prvky) h1, h2 {color: blue} h1 {font-size: 12pt} h1 strong {color: blue}... <h1><strong>nadpis1 </strong></h1> h1>strong {color: blue} platí pro <h1><strong> nadpis1</strong></h1> ale neplatí pro <h1><i><strong> nadpis1</strong></i></h1> li+li { border-top: 1px solid black } NN4.0 IE4.0 IE4.4, Pseudo-prvky a pseudo-třídy Pseudo-prvky a pseudo-třídy umožňují formátování na základě informací existujících mimo strom dokumentu. Pseudo-prvky rozšiřují strom dokumentu o prvky, které v dokumentu neexistují. Pseudo-třídy umožňují rozlišit prvky podle jiných charakteristik, než je jméno a atribut - tedy takových, které nelze odvodit přímo ze stromu dokumentu. Mohou být i dynamické prvky díky aktivitě uživatele do třídy střídavě patří nebo nepatří. Každý klient je interpretuje po svém, proto jimi není vhodné definovat důležité informace pro použití stránky. Pseudo-prvky a pseudo-třídy mohou být uvedeny jen za názvem selektoru. Na velikosti písmen v jejich názvech nezáleží. Některé z nich lze volně kombinovat, zatímco jiné se vylučují. 15

20 Tabulka 8: typy pseudo-prvků i pseudo-tříd a jejich charakteristika [1), str ; 2), str ] kategorie prvky/třídy popis příklad podpora pseudo-prvky pseudo-třídy textové (blokové) vkládání nového obsahu hypertextové odkazy dynamické :first-line :first-letter :before :after :first-child :link :visited :hover :active definice stylu pro první řádek odstavce (může být přiřazen pouze blokovému prvku) definice stylu pro první znak textu iniciála (může být přiřazen pouze blokovému prvku; pokud není vlastnost float: none, tak se chová jako plovoucí prvek) vkládání dat obsahu před prvek (pomocí vlastnosti content ) vkládání dat obsahu za prvek (pomocí vlastnosti content ) vztahuje se k prvku daného typu, který je prvním potomkem nějakého prvku vztahuje se k dosud nenavštíveným odkazům vztahuje se k navštíveným odkazům, s pseudo-třídou :link se vylučuje vztahuje se k prvku, na něhož uživatel ukázal zařízením, ale neaktivoval jej (např. myší) vztahuje se k prvku, jenž byl aktivován (např. v době mezi stiskem a uvolněním tlačítka myši) :focus vztahuje se k prvku, jenž získal zaměření akcí uživatele (např. z klávesnice tabulátor); většinou má uplatnění u formulářových prvků jazykové :lang(jaz) definice jazyka prvku; za jaz dosadíme zkratku zvoleného jazyka (pro stránku definujeme jazyk v meta příkazu a hlavičce protokolu HTTP) p:first-line { font-variant: small-claps } p:first-letter { float:left; fontsize: 18pt } p:before { content: "hlavička"} p:after {content: "hlavička" } div>p:first-child {text-indent: 0px} uvádíme pravidla ve vhodném pořadí od nejobecnějších k nejkonkrétnějším tj. např. pro značku a : a:link {color: red} a:visited {color: green} a.externi:visited {color: purple} a:hover {color: yellow} a:active {color: lime} je možné kombinovat pseudo-třídy: input:focus:hover {...} q:lang(en) {quotes: } q:lang(cs) {quotes: } q:lang(fr) {quotes: } IE5.5 OP5.0 IE4.0 OP5.0 IE4.0 OP Dědičnost a kaskáda CSS Každý prvek dokumentu může vyhovovat více definicím stylu najednou definovaných (i) v několika tabulkách stylů, nebo jako důsledek dědičnosti. Při správném výběru hodnoty se uplatňuje základní princip CSS: kaskádování (viz dále). 16