CSS Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu... 26

Transkript

1

2

3

4

5 CSS 5 Obsah Úvod Základy CSS Základem je dobrý dokument Vytvoření stylopisu...26 Základní syntaxe Komentáře Připojení stylopisu k dokumentu XHTML...27 Zápis přímo do dokumentu Načtení externího stylopisu Hodnoty...28 Klíčová slova <číslo>, <celé_číslo> <velikost>, <délka> Absolutní jednotky Relativní jednotky <procenta> <barva> <URI> <řetězec> <čas> Selektory...31 Selektory typu Univerzální selektor Selektory třídy Násobné třídy Selektory ID Selektory s atributy Existence atributu Atribut hodnoty Atribut obsahující hodnotu Atribut obsahující podhodnotu Vícenásobné selektory s atributy Selektory následníků Obsah

6 6 CSS Selektory potomků Selektory sourozenců Pseudotřídy a pseudoprvky...34 Pseudotřídy :link a :visited Dynamické pseudotřídy :hover, :active a :focus Pseudotřída :first-child Jazyková pseudotřída :lang Pseudoprvek :first-line Pseudoprvek :first-letter Pseudoprvky :before a :after Kombinování a seskupování selektorů, pseudotříd a pseudoprvků...38 Kombinované selektory Seskupování selektorů Média...38 Typy médií Určení médií v dokumentu Určení médií přímo ve stylopisu Dědičnost...39 Klíčové slovo inherit Vypočítané hodnoty a kaskáda...40 Vypočítané hodnoty Kaskáda Konkrétnost selektorů Pravidlo!important Podpora vlastností v nejběžnějších prohlížečích CSS a JavaScript Připojení souboru JavaScriptu k dokumentu XHTML Identifikace prohlížečů JavaScriptem (příklady) Podstrčení vhodného stylu na základě identifikace prohlížeče Rozměry prvků a přetékání obsahu Výpočet rozměrů prvků...50 Výpočet rozměrů prvků podle Specifikace W3C (model pouze obsah ) Výpočet rozměrů prvků podle Microsoftu (model včetně rámečku a výplně ) Obsah

7 CSS 7 Hodnota auto Blokové (nenahrazované) prvky Řádkové (nenahrazované) prvky Nahrazované (blokové i řádkové) prvky Absolutně poziciované (nenahrazované) prvky Absolutně poziciované (nahrazované) prvky Šířka obsahu prvku vlastnost width...52 Problém chybného počítání rozměrů v Internet Exploreru Řešení Starší způsoby řešení Řešení pomocí CSS Minimální šířka prvku vlastnost min-width...61 Příklad Maximální šířka prvku vlastnost max-width Šířka prvku od hrany rámečku po hranu rámečku vlastnost box-width Výška obsahu prvku vlastnost height...68 Problém chybného počítání rozměrů v Internet Exploreru Možnosti řešení Starší způsoby řešení Řešení pomocí CSS Procentní výška prvku umístěného v <body> Minimální výška prvku vlastnost min-height Maximální výška prvku vlastnost max-height Výška prvku od hrany rámečku po hranu rámečku vlastnost box-height Výpočetní model rozměrů prvků vlastnost box-sizing Přetékání obsahu vlastnosti overflow, overflow-x a overflow-y.80 Přetékání v praxi Viditelná oblast vlastnost clip Viditelná oblast v CSS 3 vlastnost overflow-clip Viditelná oblast nahrazovaných prvků vlastnost crop Podpora vlastností v nejběžnějších prohlížečích...86 Obsah

8 8 CSS 4. Barvy a pozadí Barva textu vlastnost color Styl pozadí vlastnost background...90 Barva pozadí vlastnost background-color Obrázek na pozadí vlastnost background-image Opakování obrázku na pozadí vlastnost background-repeat Umístění obrázku na pozadí vlastnost background-position Ukotvení obrázku na pozadí vlastnost background-attachment Sdružená vlastnost background Podpora vlastností v nejběžnějších prohlížečích Okraje, výplně a rámečky Základní koncepce rámů...95 Základní podpora v různých prohlížečích Okraje vlastnost margin Slučování okrajů Hodnota auto snadné centrování blokových prvků Stránka na střed v Mozille Výplně vlastnost padding Rámečky vlastnost border Šířka rámečku vlastnost border-width Barva rámečku vlastnost border-color Styl rámečku vlastnost border-style Sdružená vlastnost border Zaoblení rámečku vlastnost border-radius Složitější příklad Obrazy v rámečku vlastnosti border-image, border-corner-image, border-fit, border-image-transform, border-corner-imagetransform Obrázek v rámečku vlastnost border-image Obrázek v rohu rámečku vlastnost border-corner-image Opakování obrázků v rámečku vlastnost border-fit Natočení obrázku v rámečku vlastnosti border-image-transform, border-corner-image-transform Sdružená vlastnost border dle CSS Obsah

9 CSS Obrys prvku vlastnost outline Stín prvku vlastnost box-shadow Podpora vlastností v nejběžnějších prohlížečích Vlastnosti písma Typ písma font-family Písma pro starší verze Linuxu Písma pro Windows 3.x Písma pro Mac OS Písma pro moderní Linux Bezpatková písma Patková písma Psaná písma Písma pro Windows 95/98/ME/NT/2000/XP Bezpatková písma Ostaní písma Příklady definice písem Bezpatkové písmo malé Bezpatkové písmo střední Bezpatkové písmo velké Patkové písmo malé Patkové písmo větší Proložené písmo menší Proložené písmo větší Dekorativní písmo Psané písmo Dynamické vkládání fontů Velikost písma font-size Styl písma font-style Síla písma font-weight Kapitálky font-variant Výška řádek line-height Sdružená vlastnost font Hustota písma font-stretch Výška nízkých liter font-size-adjust Podpora vlastností v nejběžnějších prohlížečích Obsah

10 10 CSS 7. Vlastnosti textu Odsazení první řádky vlastnost text-indent Rozestup znaků vlastnost letter-spacing Rozestup slov vlastnost word-spacing Vodorovné zarovnání vlastnost text-align Svislé zarovnání vlastnost vertical-align Velikost písmen vlastnost text-transform Dekorace textu vlastnost text-decoration Stín kolem textu vlastnost text-shadow Rolování textu vlastnosti marquee Styl rolování textu vlastost marquee-style Směr rolování textu vlastnost marquee-direction Rychlost rolování textu vlastnost marquee-speed Opakování rolování textu vlastnost marquee-repetition Sdružená vlastnost marquee Efekty písma vlastnost font-effect Podpora vlastností v nejběžnějších prohlížečích Typ prvku a viditelnost Typ prvku vlastnost display block, inline, none inline-block run-in compact table, table-cell a inline-table Svislé centrování obsahu pomocí vlastnosti display Viditelnost prvku vlastnost visibility Podpora vlastností v nejběžnějších prohlížečích Pozice prvku Pozice prvku vlastnosti position, top, right, bottom, right, z-index Pozice prvku position Souřadnice prvku top, right, bottom, left Obsah

11 CSS 11 Pozice prvku ve třetím rozměru z-index Praktické příklady poziciování Kompletní rozvržení stránky pomocí position: absolute pevný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute pružný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute částečně pružný třísloupcový layout Kompletní rozvržení stránky pomocí position: absolute částečně pružný třísloupcový layout rozměry v em Kompletní rozvržení stránky pomocí position: fixed pružný třísloupcový layout s fixně poziciovaným ovládacím menu rozměry v em Relativní poziciování řádkových prvků Plovoucí vykřičník Pružné poznámky ve zdrojovém kódu Svislé centrování obsahu verze pro Internet Explorer Svislé centrování obsahu kompletní verze (pro všechny prohlížeče) Plovoucí prvky vlastnost float Praktické příklady použití vlastnosti float Plovoucí nadpisy Dva sloupce s obrázkem uprostřed Tři sloupce s obrázkem uprostřed Zrušení obtékání vlastnost clear Podpora vlastností v nejběžnějších prohlížečích Tabulky Tabulky a CSS Tabulkový formátovací model CSS Tabulkové prvky Přehled předdefinovaných hodnot display v XHTML Šířka tabulky Formátovací modely vlastnost table-layout Automatický model Fixní model Výška tabulky Vodorovné zarovnání obsahu buněk Teoretický výsledek: Obsah

12 12 CSS 10.8 Svislé zarovnání obsahu buněk vlastnost vertical-align Formátování sloupců Dynamické efekty skrytí či zobrazení řádků a sloupců vlastnost visibility Slučování rámů buněk vlastnost border-collapse Rozestup mezi rámy buněk vlastnost border-spacing Zobrazení prázdných buněk vlastnost empty-cells Pozice titulku tabulky vlastnost caption-side Praktické příklady formátování tabulek v CSS Příklad 1 jednoduchá tabulka Příklad 2 trochu složitější tabulka Celý kód opravné funkce Celé řešení Automatické nastavení barev v buňkách podle obsahu Základní řešení Podpora CSS v nejběžnějších prohlížečích Generovaný obsah Generování obsahu vlastnost content <řetězec> attr(x) <uri> Čítače a uvozovky Čítače vlastnosti counter-increment a counter-reset Uvozovky vlastnost quotes Podpora vlastností v nejběžnějších prohlížečích Vlastnosti seznamů Typ odrážky seznamu vlastnost list-style-type Obrázek jako odrážka seznamu vlastnost list-style-image Umístění odrážky seznamu vlastnost list-style-position Sdružená vlastnost list-style Podpora vlastností v nejběžnějších prohlížečích Obsah

13 CSS Uživatelské efekty Tvar kurzoru vlastnost cursor Průhlednost prvku vlastnost opacity Podpora vlastností v nejběžnějších prohlížečích Vlastnosti tisku Zalamování textu vlastnosti page-break-before, page-break-after, page-break-inside Minimální počet řádků na stránce vlastnosti orphans a widows Tisknutelná oblast 14.4 Velikost a orientace tisknutelné oblasti vlastnost size Pojmenované stránky vlastnost page Adresování první, levé a pravé strany pseudotřídy :first, :left a :right Další tipy k formátování pro tisk Zrušte tisk zbytečností Barvy a pozadí Tisk odkazů Podpora vlastností v nejběžnějších prohlížečích Odstřižení starých prohlížečů od stylů a skriptů, individualizace stylopisů Individualizace stylů Připojení externích stylů Link a import Podmíněné komentáře Příklad odříznutí starších prohlížečů od stylu Triky na úrovni pravidel stylů Triky se selektory Další CSS triky Individualizace skriptů Identifikace prohlížeče JavaScriptem příklady useragent Opera Opera Obsah

14 14 CSS Internet Explorer 5.5 a Konqueror Staré prohlížeče, Mozilla 0, Opera 6, IE Další tipy a řešení Režimy prohlížečů Zapsání stylu JavaScriptem Registrace ovladačů událostí Jak na onload Rozbalovací nabídky Svislá rozbalovací nabídka (změna výšky) Svislá rozbalovací nabídka (pomocí display) Víceúrovňová rozbalovací nabídka Několik poznámek Nejzákladnější styly pište přímo do dokumentu Rejstřík Obsah

15 + CSS 15 Úvod Úvod CSS ( Tabulky kaskádových stylů, Cascading Style Sheets) jsou skutečným přelomem ve způsobu formátování webových prezentací. Protože CSS neovlivňuje obsah dokumentů samotných, umožňuje vytvářet čisté, přísně strukturované dokumenty, vyhovujíci logice i standardům, umožňující bezproblémovou práci s obsahem vašich stránek i jiným aplikacím, než jakými jsou běžné prohlížeče (včetně čtecích zařízení pro nevidomé, mobilních zařízení, XML aplikací, fulltextových vyhledávačů na webu, ale třeba i starých textových prohlížečů). Jak je tato kniha napsána Tato kniha je psána trochu jinak, než je u většiny podobných knih o CSS zvykem. Najdete tu jen velmi málo teorie, kniha je koncipována spíše jako praktický manuál pro tvůrce webových stránek. Obsahuje základní popis využití CSS, dále detailní popis vlastností s přihlédnutím k praxi, řešení problémů pomocí JavaScriptu, využití spojení CSS a JavaScriptu, kompatibilitu CSS v nejčastěji používaných prohlížečích a další témata. Úvod

16 16 CSS Další rozdíl je v tom, že zde nezatajuji žádné problémy, které vás při vytváření dokumentů za pomoci CSS mohou potkat. Většina publikací o CSS se spokojí s tím, že popíší teorii, popíší stručně jednotlivé vlastnosti a připojí test podpory v jednotlivých prohlížečích v základních konstrukcích, avšak chování prohlížečů ve složitějších situacích příliš nerozebírají, aby čtenáře neodradili od CSS zcela. V této knize je tomu jinak pokud jsem zjistil v určitých situacích nějaké nekorektní chování prohlížečů, neváhám na problém upozornit a nabídnu případně řešení. Rovněž se snažím nepreferovat žádný prohlížeč, nejsem ani stoupenec tzv. IE ONLY, ani bezvýhradný obdivovatel Mozilly, jsem zastáncem hesla padni komu padni, jen když to bude užitečné pro čtenáře. Co byste měli znát Studium této knihy předpokládá, že máte alespoň základní znalosti jazyka HTML či XHTML. Není nutná žádná znalost CSS (...to vás má tato kniha přece naučit...). Vítána je znalost jazyka JavaScript není však vůbec nutná, při jeho neznalosti se pouze připravíte o spoustu zajímavých možností. Struktura knihy Jak již bylo uvedeno výše, tato kniha má posloužit hlavně praktickým potřebám webových tvůrců, proto zde praxe vysoce převažuje nad teorií. Zájemce o studium teorie CSS odkazuji na jinou literaturu či ještě lépe přímo na stránky W3C ( kde naleznete přesné znění všech specifikací (CSS 1, CSS 2, CSS 2,1, jakož i stále ještě rozpracované CSS 3). Největší část obsahu knihy (kapitoly 3 až 14) proto tvoří popis jednotlivých vlastností, návody na jejich praktické použití (a využití), řešení případných problémů s nekompatibilitou v prohlížečích a zajímavé tipy. Na konci každé kapitoly je pak ještě tabulka s detailním popisem podpory vlastností popsaných v této kapitole, a to ve všech běžně používaných prohlížečích (novější verze prohlížečů Mozilla, Opera, Internet Explorer a Konqueror). Popisované vlastnosti jsou do jednotlivých kapitol zařazovány podle toho, v jakých situacích jsou nejčastěji využívány (např. vlastnost font-size spolehlivě najdete v kapitole Vlastnosti písma). Historie formátování (X)HTML Ve svých počátcích v roce 1990 byla jediným cílem jazyka HTML prezentace obsahu (především textu) v čisté, strukturované formě, pouze s několika značkami. Mělo být pouze zřejmé, co je nadpis, co odstavec apod. Již v těchto dobách se předpokládalo, že způsob zobrazení se bude řídit stylovými předpisy. První webový prohlížeč na světě NeXT byl navržen tak, že výsledné formátování dokumentu bylo řízeno jednoduchým stylovým předpisem. Další prohlížeč, Mozaic z roku 1993, však tuto koncepci zcela opustil a možnosti práce se styly dokumentu prakticky znemožnil. Později si začalo mnoho autorů stěžovat, že nemohou nikterak ovlivnit vzhled svých HTML stránek. Proto byl již v roce 1994 vypracován první návrh Cascading Style Sheets. Bohužel se však v téže době objevil webový prohlížeč Netscape 1, což s odstupem doby byla pro web katastrofa. Firma Netscape totiž místo podpory stylů zabudovala vlastnosti pro řízení vzhledu přímo do značek HTML. Toto řešení započalo éru nekompatibility webových stránek i prohlížečů, a hlavně zanesení původně čistého a strukturovaného kódu HTML dokumentu různým formátovacím balastem. Postupně přišli na trh webových prohlížečů další výrobci, kteří v tomto trendu pokračovali, a HTML kód se tak zanášel dalšími značkami a jejich atributy, které nesloužili ničemu jinému, Úvod

17 CSS 17 nežli k řízení vzhledu dokumentů. V jazyce HTML byly k dispozici i tabulky, a to výhradně k prezentaci tabulkových dat. Jenže autoři brzy přišli na to, že tabulky se dají využít k rozvržení stránek a nalili do buněk sloupce textu a dalšího obsahu. Autoři byli později obohaceni o tzv. rámce, pomocí kterých bylo možno vzhled prezentace na obrazovce (ale pouze na ní) zobrazit do té doby nevídaným způsobem. Tak bylo například možno zajistit, aby v jednom místě obrazovky byly ovládací prvky, které se nerolovaly s ostatní prezentací. Rámce však přinášely spoustu problémů (ukládání, záložky, tisk, čtečky pro nevidomé atd.). Později začalo být i výrobcům prohlížečů jasné, že tudy cesta nevede. Prvním novodobým prohlížečem, který začal styly částečně podporovat, byl Internet Explorer 3. Jelikož v té době CSS však ještě nebyly nikým standardizovány, implementace CSS se v tomto prohlížeči s pozdějšími standardy příliš neshoduje. První verze specifikace standardizačního konsorcia W3C (CSS 1) byla uvedena v roce 1996, těsně po příchodu Internet Exploreru 3. Za otce dnešních CSS je považován Híkon Wium Lie, vývojář (dnes šéfvývojář) Opery. Další prohlížeče firmy Microsoft verze 4 a 5.0 už měly zabudovánu poměrně slušnou podporu CSS (i když z dnešního pohledu naprosto nedostatečnou). Konkurenční Netscape byl zpočátku ke kaskádovým stylům velmi skeptický. První prohlížeč firmy Netscape, který začal CSS podporovat, byl Netscape 4. Podpora CSS v tomto prohlížeči je však minimální a velmi chybová. Podpora stylů v Netscape byla spíše důsledkem konkurenčního boje než touhy po standardech. V podstatě šlo jen o z nouze ctnost. Netscape 4 rozhodně nelze považovat za prohlížeč podporující CSS. Firma Netscape totiž v té době slavila velké úspěchy se svou velkou zbraní skriptovacím jazykem JavaScript. Velká část programového kódu pro formátování HTML dokumentů již byla v JavaScriptu k dispozici. Vývojářům ve firmě Netscape se tedy zdálo jen přirozené využít JavaScript k práci se styly. Tak vznikl JSS ( JavaScript Style Sheets). Tato alternativní technologie se však neujala a nikdy nebyla standarizována. Její podpora byla zabudována pouze do Netscape 4. Netscape později uvolnil svůj kód, který začali pod názvem Mozilla dále rozvíjet nezávislí tvůrci. Jádro Mozilly 0.6 poté zpětně firma Netscape implementovala do svého prohlížeče Netscape 6, a to přesto, že samotní tvůrci Mozilly upozorňovali na její přetrvávající chyby. Dá se říci, že ačkoliv je teoretická podpora standardů CSS, JavaScriptu i XHTML v Mozille 0 / Netscape 6 velmi rozsáhlá, v případě složitých konstrukcí zcela selhává. Další verze Mozilla 1 / Netscape 7 vrátila firmu Netscape opět na piedestal tvůrce nejlepšího prohlížeče a svého konkurenta Internet Explorer 6 s přehledem poráží. Přesněji však nejde ani tak o Netscape, jako spíše o Mozillu a ostatní open source prohlížeče s jádrem Gecko ( Phoenix, Firefox, Camino). O místo na slunci se však začíná hlásit další hráč Opera. Zatímco do verze 6 nebyla považována za nijak oslnivý prohlížeč (pro nás zvláště kvůli problémům se zobrazováním češtiny, slovenštiny a středoevropských jazyků vůbec), verze 6 se stala celkem oblíbenou. Vývojáři Opery však nelenili, a jejich další verze Opera 7 byla bomba. Atraktivní design, bohaté možnosti nastavení, výborná podpora webových technologií. Další verze Opera 7.5 již v podstatě mírně předehnala Mozillu v podpoře CSS, slabší je však v JavaScriptu, ale jedná se jen o pokročlejší funkce. Současné verze prohlížečů (Mozilla 1.5+, Opera 7.5+, Konqueror 3.2+, Safari 1.2+, s (většími) výhradami i Internet Explorer 6) jsou již z hlediska podpory CSS i JavaScriptu na velmi vysoké úrovni. Není problém vytvořit pro tyto prohlížeče jakkoliv složitý XHTML dokument zcela bez použití HTML formátovacích značek, a pochopitelně i bez použití tabulek a rámů. Úvod Úvod

18 18 CSS Co dokáže CSS Před nástupem CSS se HTML dokumenty formátovaly pomocí značek a jejich atributů (jmenujme například značky <font>, <b> či <center>, nebo atributy align či bgcolor). K rozvržení stránky se používaly výhradně tabulky (co se dříve nedělalo pomocí tabulek). S narůstající složitostí HTML dokumentů však narůstaly i problémy. Datový objem různých formátovacích značek a atributů byl často vyšší, než objem vlastního obsahu. Tím docházelo ke zpomalení načítání stránek, zbytečně narůstaly i nároky na servery (jakož i náklady). Formátování stránek pomocí skrytých tabulek pak přinášelo spoustu problémů pro jiná zařízení, nežli běžné prohlížeče. V podstatě byli vyřazeni zrakově handicapovaní, jejichž čtecí zařízení si s takovouto stránkou obvykle nedokáže poradit. Formátování dokumentů pomocí CSS tyto problémy odstraňuje. Umožňuje vytvořit čistý XHTML dokument, plně vyhovující současným standardům (např. velmi přísné normě XHTML 1.1), a hlavně 100% přístupný všem aplikacím od velmi starých textových prohlížečů, přes zvuková zařízení, až po nejmodernější mobilní telefony. Poznámka Pochopitelně zde záleží na obsahu a účelu prezentace např. e-obchod s rozsáhlou ukázkou zboží, formuláře řízené JavaScriptem apod., na mobilu či na papírovém výstupu z tiskárny asi nezprovozníte... Používání CSS vám však přinese mnoho dalších, praktických výhod: širší možnosti formátování, snadnou tvorbu a údržbu stylu, dynamickou práci se styly, dopřednou kompatibilitu, možnosti řízení tisku, formátování XML dokumentů. Širší možnosti formátování CSS nabízí mnohem širší možnosti formátování oproti HTML. Jeden příklad seznamy. V HTML se rozlišuje mezi uspořádanými <ol> a neuspořádanými <ul> seznamy. Neuspořádanému seznamu lze přiřadit jeden ze tří možných stylů odrážek, uspořádanému jeden z pěti. Pokud chcete změnit styl odrážek ze symbolů třeba na čísla (nebo naopak), musíte změnit i základní značky, a to včetně koncových. CSS mezi značkami <ol> a <ul> nerozlišuje, je možno nastavit více druhů odrážek, dále libovolný obrázek či none. Změna je dílem okamžiku. Některé potřebné vlastnosti klasický způsob formátování pomocí HTML ani realizovat neumožňuje (nebo jen ve značně omezené míře) např vlastnosti okrajů, výplní, orámování, pozadí jiných než tabulkových prvků, nebo poziciování (přesné nastavení polohy). V CSS lze přesně umístit nejen jakýkoliv prvek, ale třeba i obrázek na pozadí. Úvod

19 CSS 19 Snadná tvorba a údržba stylu Obtížnost tvorby a především změn patří mezi největší slabiny klasického HTML formátování. Všechny související stránky by měly by měly být formátovány shodně (tzv. zásada konzistentního stylu). Tedy např. barvy, písmo, ale i styl nadpisů, odstavců, odkazů, apod. Toho se při klasickém HTML formátování dociluje jen velmi obtížně. Ještě obtížnější je provést změnu vzhledu celého webu. Znamená to projít všechny HTML dokumenty, nalézt a změnit stovky značek a jejich atributů, či dokonce zcela překopat tabulky užité k poziciování prvků. Naproti tomu změna webu používajícího CSS je snadná a rychlá. Pokud se například rozhodnete změnit barvu nadpisů, stačí jednoduchá úprava v tabulce stylů. Pokud byste chtěli totéž provést u webu formátovaného postaru, bylo by třeba projít všechny HTML dokumenty, vyhledat v nich všechny nadpisy a ručně změnit jejich atributy ve značkách <font>. Pokud jsou tyto stránky vytvořeny dokonce pomocí WYSIWYG editoru, bývá balast několikráte se opakujících a vzájemně se přebíjejících formátovacích značek často tak neproniknutelný, že jediným východiskem je provést změny zase jen v tomto editoru. Úvod Dynamická práce se styly Pomocí kombinace CSS a JavaScriptu lze vaše stránky obohatit o spoustu efektů, lze však i zcela změnit chování prezentace. Například rozbalovací nabídky či automatické nastavení barvy pozadí tabulkových buněk v závislosti na jejich obsahu. Dopředná kompatibilita Dopředná kompatibilita znamená, že vaše dokumenty, vytvořené například podle standardu XHTML 1.1, budou zaručeně funční i v budoucích generacích webových prohlížečů, neboť současné verze standardů (XHTML, CSS, JavaScript) budou dozajista platit velmi dlouho, a prohlížeče je tedy budou podporovat, což se o formátování HTML tvrdit nedá. Normy HTML 4.01 a XHTML 1.0 již mnoho starších značek a atributů prohlásily za odmítnuté, a jejich užívání je povoleno pouze v tzv. přechodových verzích těchto norem (Transitional), verze XHTML 1.1 pak většinu formátovacích značek a atributů zakázala zcela. A nejde jen o jakési standardy, které stejně nikoho nezajímají, nejmodernější prohlížeče už nyní přestávají zvlášť zastaralé značky podporovat a tento trend bude dozajista pokračovat. Navíc, dokument vytvořený zcela bez formátovacích značek HTML dokáží zpracovat i další aplikace. Můžete sice namítnout, že vytváříte stránku určenou výhradně k prezentaci na počítačovém monitoru, nikoliv kód pro řízení mikrovlnné trouby, avšak: Nikdy nevíte, pro jaké zařízení budete v budoucnu chtít svůj dokument zpřístupnit (třeba mobilní telefon). Tím, že se naučíte vytvářet bezchybné dokumenty XHTML, bude pro vás budoucí přechod k jazyku XML mnohem snazší. Řízení tisku Pomocí CSS můžete též dokonale ovládat chování dokumentu při tisku. Můžete například určit, že na začátku každé vytištěné stránky bude logo vaší firmy, nebo můžete zakázat tisk ovládacích tlačítek a určit, že po celé šířce tištěné plochy bude pouze vlastní obsah. Úvod

20 20 CSS Formátování XML dokumentů Formátovat pomocí CSS lze nejen tradiční (X)HTML dokumenty, ale též dokumenty XML. Tato možnost je velmi důležitá, protože XML dokumenty sice současné prohlížeče již zobrazit dokáží, avšak bez jakéhokoliv formátování. Nepočítáme-li stylování pomocí XSL, je použití CSS jedinou použitelnou metodou, jak dokument vhodně zobrazit. Vlastnosti prohlížečů a jejich použitelnost Protože technologie CSS je poměrně nová, starší prohlížeče nedokáží dokumenty stylované pomocí CSS správně zobrazit. V zásadě je možné prohlížeče rozdělit do čtyř skupin: Archaické tyto prohlížeče používá minimum uživatelů. Žádná podpora CSS, žádná nebo jen symbolická podpora JavaScriptu. Těmto prohlížečům můžeme nabídnout pouze čisté XHTML, jinak se jimi nemusíme zabývat. Příklady těchto prohlížečů: textové prohlížeče, Netscape 1, 2, 3, Internet Explorer 1, 2, 3, Opera 1, 2, 3. Silně zastaralé tyto prohlížeče se občas ještě provozují, jejich podíl však (naštěstí) rychle klesá. Je pro ně charakteristická nízká podpora CSS i JavaScriptu (především standardní DOM). Také touto skupinou je zbytečné se zabývat, chceme-li, můžeme jim nabídnout pouze pár jednoduchých stylů a JavaScriptových efektů. Složitější styly a skripty by v nich napáchaly více škody než užitku. Příklady těchto prohlížečů: Netscape 4, Opera 4 a 5, Internet Explorer 4 a 5.0. Zastaralé tyto prohlížeče se vyznačují na jedné straně velmi vysokou podporou CSS i JavaScriptu, na straně druhé však také značnou chybovostí a mezerami. Vzhledem k jejich velkému zastoupení na webu však musíme s těmito prohlížeči vážně počítat, a prezentaci navrhnout tak, aby i těmto prohlížečům byla přístupná v plné parádě. Bohužel, chování Mozilly 0 a Opery 6 je však ve složitějších konstrukcích velmi problematické, někdy v nich takovouto složitější prezentaci ani nezprovozníme. O problémech Internet Exploreru se dají psát romány. Příklady těchto prohlížečů: Mozilla 0 / Netscape 6, Opera 6, Internet Explorer 5.5 a 6. Moderní současné verze kvalitních prohlížečů mají vysokou podporu CSS i JavaScriptu, není problém v nich zprovoznit jakkoliv složitou a efektní prezentaci zcela bez použití HTML formátování, tabulek a rámců. Příklady těchto prohlížečů: Mozilla 1 / Netscape 7, Opera 7, Úvod

21 CSS 21 Konqueror 3, Safari 1. Supermoderní nejnovější verze prohlížečů jsou zatím ve stadiu betaverzí a prvních subverzí. Mají velmi vysokou podporu CSS i JavaScriptu, není problém v nich zprovoznit jakkoliv složitou a efektní prezentaci zcela bez použití HTML formátování, tabulek a rámců. Příklady těchto prohlížečů: Mozilla / Netscape 8+, Opera 8+, Konqueror 3, 4+. Úvod Nejčastější problémy používaných prohlížečů I novější prohlížeče mají v některých náročnějších konstrukcích problémy. Jde většinou o velmi složité prezentace (e-obchod na straně klienta, skrývání a zobrazování celých bloků, fixní polohování, čtení a zápis formulářových prvků apod.). Nejvážnější problémy těchto prohlížečů uvádím níže. (Kategorie archaických a silně zastaralých prohlížečů zde již nerozebírám.) Mozilla 0 / Netscape 6 v těchto prohlížečích je teoretická podpora CSS i JavaScriptu velmi vysoká. Bohužel platí, že čím složitější konstrukce a čím vyšší důraz klademe na nejnovější standardy, tím je chování Mozilly 0 / Netscape 6 problematičtější. Do jisté míry lze tyto chyby kompenzovat JavaScriptem, nebo zvolit méně náročnou normu (např. HTML 4.0 Transitional). Pokud se však nehodláme vzdát možností naší prezentace, ani striktního dodržování standardů (samozřejmě za předpokladu, že naše prezentace bez problémů funguje v Mozille 1 tam šlapat musí, jinak je chyba na naší straně), nezbývá nic jiného, než i tomuto prohlížeči nabídnout pouze základní (X)HTML dokument. Problémy s týkají především JavaScriptu (například standard XHTML 1.1 nepovoluje atribut target u formulářů. Pokud tedy chceme zaslanou odpověd ze serveru zobrazit v novém okně, musíme jej otevřít JavaSciptem. Mozilla 0 toto okno sice otevře, ale odpovědi se nedočkáme. Ve složitých konstrukcích jsem pozoroval i chyby v použítí stylů, například rozměry grafiky, rodina písma nebo zarovnání textu. Samozřejmě šlo o poněkud extrémně složité konstrukce, jež se však v Mozille 1 zobrazily bez problémů). Pokud ovšem tvoříte pouze běžné WWW stránky, problémy se nevyskytují, a můžete se spolehnout na vysokou podporu CSS i JavaScriptu. Platí, že v Mozille 0 / Netscape 6 zprovozníme i velice složitou prezentaci, pokud slevíme z dodržování standardů. Tyto staré verze Mozilly se dnes již téměř nevyskytují. Poznámka Opera 6 problémy se týkají CSS a ještě více JavaScriptu. Opera 6 při pokusu číst a zapisovat hodnoty formulářových prvků skrytých vlastností display:none pomocí JavaScriptu končí pádem. Rovněž Opera 7 toto nedokáže, avšak pádem nekončí. Pokud naše prezentace ke své činnosti formulářové prvky nezbytně potřebuje, je nutné dosti složité obcházení tohoto problému opravným kódem JavaScriptu. Úvod

22 22 CSS Poznámka Opera 7.5 již popsanými problémy JavaScriptu netrpí. Internet Explorer 5.5 a 6.0 největším problémem těchto prohlížečů je chybný výpočet rozměrů, dále absence přetékání, chybné chování selektorů a pseudotříd (nebo absence jejich podpory), chybný výpočet velikosti písma (zadaného klíčovým slovem, procenty, nebo bez zadání), nízká podpora formátování tabulek. Nepříjemným problémem je dále skutečnost, že nepodporují fixní poziciování prvků (position:fixed). Tento typ umísťování prvků na stránce umožňuje docílit podobných efektů, kterých se dříve dosahovalo pomocí tzv. rámců. Pokud tedy hodláme vlastnost position:fixed ve svých webových prezentacích používat, musíme pomocí v této knize popsaných způsobů vlastnost position převést na hodnotu absolute, případně nastavit vzhled zakončení stránky. Není sice problém pro tyto prohlížeče CSS vytvořit, jen dá zbytečnou práci jej pro ně optimalizovat. Pro tvůrce webu jde o nejhorší dnes používané prohlížeče. Vytvoření kompletního vzhledu (layoutu) pomocí CSS Současný trend při tvorbě XTML dokumentů směřuje k tomu, že veškeré rozmístění (polohování) prvků svěříme CSS (nikoliv dříve obvyklým tabulkám a rámcům). Takto formátovaný dokument dokáží bez problémů zobrazit nejen všechny moderní prohlížeče (Mozilla 1+, Opera 7+, Konqueror 3+, Safari 1+, částečně i Internet Explorer 5.5 a 6), ale i prohlížeče o generaci starší. Přístupnost obsahu prezentace pro zastaralé prohlížeče pak vyplývá automaticky z kvalitně strukturovaného dokumentu. Změna vzhledu prezentace, v níž je i rozmístění prvků řízeno CSS, je potom hračkou. Snadno několikerým stiskem kláves na klávesnici změníme zcela vzhled naší prezentace. Nejen barvy, písmo, zarovnání či rozměry prvků, ale i jejich umístění. Přestaly nám vyhovovat tlačítka nahoře umístíme je tedy vlevo! Zbylý obsah umístíme vpravo. Něco takového, zvláště máme-li celou kolekci dokumentů, by bylo v případě použití tabulek a rámců značně obtížné. Z vlastní zkušenosti si troufám tvrdit, že pokud si jednou vyskoušíte rozvržení dokumentu pomocí CSS, již se nebudete chtít ke starým tabulkám a rámcům vrátit. Nestandardní vlastnosti v CSS Kromě standardních vlastností, definovaných ve specifikaci CSS, prohlížeče často podporují další (nestandardní) vlastnosti. Všechny možné hodnoty patří do některé z těchto kategorií: Standardní vlastnosti CSS: vlastnosti, jejichž možné hodnoty a možnosti užití odpovídají v současnosti platné specifikaci CSS 2.1. Tato kniha se věnuje především této skupině. Připravované vlastnosti CSS: jedná se o vlastnosti, o nichž se zmiňuje stále ještě nehotová CSS 3, u kterých je dosti velká šance, že nakonec ve specifikaci CSS 3 budou zakomponovány. Ovšem z pohledu CSS 2.1 se jedná o hrubý nestandard, a současná verze validátoru (programu na kontrolu validity) označí tyto za nevalidní (odporující platné specifikaci CSS 2.1). V této knize jsou některé zajímavé vlastnosti popsány, vždy však uvádím, že jde o připravovanou vlastnost CSS 3. Pokud Úvod

23 CSS 23 se rozhodnete tyto vlastnosti použít, mějte prosím na paměti, že v době psaní této knihy je CSS 3 ve stadiu rozpracovanosti, proto je možné, že dojde ke změnám. Proto berte popis těchto vlastností spíše jako informativní, a vše si raději ověřte na stránkách W3C ( Odmítnuté vlastnosti CSS: vlastnosti, které byly postoupeny konsorciu W3C ke schválení v rámci specifikace CSS 3, a byly buďto odmítnuty, nebo alespoň dány k ledu, a u kterých je mizivá šance, že nakonec ve specifikaci CSS 3 budou zakomponovány (často mi přijde, že je to škoda). Proprietární vlastnosti CSS: hrubě nestandardní rozšíření prohlížečů (přesněji Internet Exploreru). V této knize se jimi nezabývám. Zajímavou podkategorií jsou zkušební vlastnosti Mozilly (moz něco), simulující CSS 3. Úvod Symboly použité v tabulkách kompatibility Na konci kapitol 3 až 14 je vždy uvedena tabulka představující úroveň podpory vlastností CSS, popsaných v příslušné kapitole, v běžných webových prohlížečích. Jsou v nich použity následující symboly: ++ Prohlížeč danou vlastnost podporuje zcela. + Prohlížeč danou vlastnost podporuje pouze částečně.!+ Prohlížeč danou vlastnost podporuje chybně.!!! Prohlížeč danou vlastnost podporuje s vážnými chybami. -- Prohlížeč danou vlastnost nepodporuje vůbec. Symboly použité v popisu syntaxe V popisu syntaxe jsou použity následující symboly: [... ] Hranaté závorky uzavírají položky. [x]* Hodnota se může vyskytovat v libovolném počtu či vůbec. [x]? Hodnota se může vyskytovat (1 ), ale nemusí (0 ). [x]+ Hodnota se může vyskytovat v libovolném počtu, nejméně však 1. [x](x,y) Hodnota se může vyskytovat minimálně x-krát a maximálně y-krát. x y z Alternativy, jedna z těchto položek. x y z Alternativy, jedna nebo více z těchto položek. Úvod

24 24 CSS Testované prohlížeče Hlavní verze prohlížečů: Testované verze: Zobrazené prohlížeče (Operační systém) Mozilla 0 Mozilla 0.94 WINDOWS - - Mozilla 0.98 WINDOWS Mozilla 1 Mozilla 1.21 LINUX Mozilla 1.21 WINDOWS Mozilla 1.6 LINUX (Suse Linux 9.1) Mozilla 1.6 LINUX Mozilla 1.8 Mozilla 1.8b LINUX - - Firefox 1.02 LINUX Opera 6 Opera 6.0 LINUX Opera 6.0 WINDOWS Opera 6.06 WINDOWS (Windovs 98 SE) Opera 6.06 WINDOWS Opera 6.12 LINUX Opera 7 Opera 7.10 WINDOWS Opera 7.23 LINUX Opera 7.23 WINDOWS Opera 7.54 LINUX Opera 7.23 LINUX (Suse Linux 9.1) Opera 7.54 LINUX (Suse Linux 9.1) Opera 8 Opera 8.00 LINUX Opera 8.00 LINUX (Suse Linux 9.1) Internet Explorer 5 Internet Explorer 5.01 WINDOWS - - Internet Explorer 5.5 Internet Explorer 5.5 WINDOWS Internet Explorer 5.5 (Windows 98 SE) Internet Explorer 6 Internet Explorer 6.0 WINDOWS XP - - Konqueror 3 Konqueror 3.2 LINUX Konqueror 3.4 LINUX Konqueror 3.2 (Suse Linux 9.1) Konqueror 3.4 (Suse Linux 9.3) Elektronická verze knihy na CD Přílohou této knihy je její elektronická verze na CD. To vám umožní nejen přímý přístup k příkladům (naleznete je ve složce kniha/grafika/<název_kapitoly>/html), ale také umožní testování příkladů i v prohlížečích, které v době psaní ještě nebyly na světě. Pod většinou příkladů naleznete tlačítko PŘÍKLAD, které vám po stisku umožní posoudit zpracování aktuálně použitým prohlížečem. Úvod

25 CSS Základy CSS Základy CSS Standardní verze CSS vyvíjí a publikuje organizace W3C ( World Wide Web Consortium Verze CSS specifikované W3C jsou všeobecně považovány za standardní, pokud se setkáte s pojmy jako Standardy CSS, Specifikace CSS apod., je tím míněna právě (většinou nejaktuálnější) verze CSS od W3C. Existují sice i různé jiné verze CSS (typicky od výrobců prohlížečů) s různými proprietárními vlastnostmi, které jsou však vázány pouze na prohlížeče daného výrobce, a jinde většinou nefungují. Pokud se však tyto původně proprietární vlastnosti ukáží jako užitečné, W3C je obvykle časem standardizuje. Organizace W3C sice není zřízena žádným zákonem a porušení jejich specifikací není trestným činem, přesto se to nevyplatí použijete-li pouze proprietární řešení určitého výrobce (CSS, JavaScript aj.), bude váš dokument funkční pouze v jednom prohlížeči, pro uživatele jiných prohlížečů (či zcela odlišných zařízení) bude nepoužitelný. Proto silně doporučuji (a nejen já) tvořit dokumenty dle standardů W3C, a pro méně schopné prohlížeče pak vše pouze doladit. V současné době je aktuální verzí CSS 2.1, což je ovšem pouze mírně vylepšená CSS 2. Nyní se pracuje na CSS 3, která by měla možnosti CSS výrazně rozšířit.

26 26 CSS 1.1 Základem je dobrý dokument Pokud to myslíte s tvorbou webových dokumentů na úrovni opravdu vážně, měli byste si nejprve sehnat nějakou dobrou (tlustou) knihu o XHTML (...a učit se, učit se, učit se...). Pro účely této knížky však postačí i základní znalosti HTML. Vždy však platí, že vaše dokumenty by měly být řádně strukturované a bez chyb v kódu. Příklady uvedené v této knize používají hlavičku (XHTML 1.1, kódování UTF-8), zatímco ve výpisech kódů v knize je to zjednodušeno. V praxi však je nutno tuto ještě rozšířit o různé meta-tagy, linky apod. <?xml version= 1.0 encoding= utf-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN > <html xmlns= xml:lang= cs > <head> <meta http-equiv= content-type content= charset=utf-8 /> <title>titulek</title> </head> 1.2 Vytvoření stylopisu Základní syntaxe Styly platné pro celý dokument se zapisují buďto přímo do dokumentu v sekci <head>, nebo do externího souboru s koncovkou.css. Tím dojde k vytvoření stylopisu (anglicky stylesheet). Někdy se používají též názvy tabulka stylů, šablona stylů a jiné. Ve stylopisech pak definujeme pravidla stylů, skládající se minimálně ze tří částí: selektoru, jenž identifikuje prvky, jejichž prezentaci má pravidlo ovlivňovat, názvu vlastnosti a hodnoty. Například po aplikaci následujícího pravidla se všechny odstavce vykreslí červeným písmem: p {color:red;} Dvojice [název vlastnosti:hodnota;] se ukončují středníkem, mezi nimi je dvojtečka. Pravidlo může obsahovat i více takových dvojic, a některé vlastnosti mohou vyžadovat nebo povolovat více hodnot. Za poslední dvojicí [název vlastnosti:hodnota;] je středník volitelný, avšak doporučuji jej zapisovat. Za prvé se tím sníží možnost chyb, za druhé při použití nestandardních vlastností CSS mají některé prohlížeče problémy, nejsou-li ukončeny středníkem. Dvojice [název vlastnosti:hodnota;] se označuje slovem definice stylu. p {color:red; background:yellow; padding:1px 3px 1px 10px; border: thin solid red;} Nebo: p { color: red; background: yellow; padding: 1px 3px 1px 10px; border: thin solid red; } 1. Základy CSS

27 CSS 27 Oba zápisy jsou rovnocenné, stylopis si můžete zformátovat dle libosti místo jedné mezery může být libovolný počet mezer nebo odřádkování. Jakýkoliv počet mezer či odřádkování může být rovněž před/za nějakým oddělovačem. Komentáře Ve stylopisech lze používat i komentáře (vysvětlující popisky, atd.). Lze je umístit kdekoli, ovšem s touto výjimkou: nelze je vkládat do středu selektorů, názvů vlastností a hodnot. Komentáře se vkládají mezi znaky /* a */ vše mezi nimi je považováno za komentář a je ignorováno. /* Korektní komentář */ h1 {border: 5px double red;} /* Korektní komentář */ h1 /* Korektní komentář */ {border: /* Korektní komentář */ 5px double red;} h1 {border: 5/* CHYBNĚ */px double red; font/* CHYBNĚ */-size: 200%;} Základy CSS 1.3 Připojení stylopisu k dokumentu XHTML Zápis přímo do dokumentu Pro zápis stylopisu na úrovni dokumentu se používá párová značka <style></style>, která se umisťuje do sekce <head>. Do značky <style> je nutno zapsat ještě příslušný MIME-typ, tj. type= text/css. V XHTML je navíc nutno deklarovat obsah značky <style> jako #CDATA. V XHTML mají značky style a script obsah typu #PCDATA, což znamená, že například znak < bude XML procesorem považován za počátek značky, znak > za její ukončení atd. Kvůli zajištění zpětné kompatibiliy se tato deklarace uzavírá do komentářů CSS celé to pak vypadá takto: <style type= text/css > /* <![CDATA[ */ STYLOPIS /* ]]> */ </style> Uzavření stylopisu do deklarace #CDATA má ještě další výhodu staré prohlížeče, vzniklé před příchodem XHTML, s velmi špatnou a chybovou (ne)podporou CSS se k tomuto stylopisu vůbec nedostanou celý stylopis interpretují jako jim neznámou značku. Načtení externího stylopisu Základní (a nejčastější) způsob načtení externího stylopisu je pomocí značky <link />. Do této značky je nutno zapsat ještě příslušný MIME-typ, tj. type= text/css, a dále musíme prohlížeči (správněji klientu anglicky přesně user agent pro zjednodušení používám většinou slovo prohlížeč ) sdělit, že propojení směřuje na stylopis, tj. uvést atribut rel= stylesheet. Celé to pak vypadá takto : <link rel= stylesheet type= text/css href= styly.css /> 1.3 Připojení stylopisu k dokumentu XHTML

28 28 CSS Druhý způsob zavedení externího stylopisu je použití zapsaný jako obsah značky <style></style>. Za pak zapíšeme URI, a to buď standardně jako url (URI), nebo jako řetězec. Tento zápis má mnoho variant, a jeho časté využití je odstřižení starších prohlížečů od stylu, který by v nich napáchal jen škodu. Blíže v kapitole 15. Odstřižení starých prohlížečů od stylů a scriptů, individualizace stylopisů. Příklad: <style type= text/css > /* <![CDATA[ url ( styly.css ) ; /* Středník na konci je nutný! styly_2.css ; /* ]]> */ </style> Pokud použijete výše uvedené a zároveň chcete definovat klasická pravidla stylů (je to možné), je nutno uvést vždy před všemi ostatními pravidly. lze použít i v externích stylopisech, a připojit tak ke stylopisu jiné tabulky url ( styly.css ) ; body{font-family:sans-serif;} V dokumentech XML se načtení stylů provádí níže uvedenou deklarací. Jelikož podmnožinou XML je i XHTML, je tento způsob možný i zde, ale téměř se nepoužívá. <?xml-stylesheet type= text/css href= styly.css?> 1.4 Hodnoty Hodnoty jednotlivých vlastností mohou být těchto typů: klíčová slova, číslo, velikost, procenta, barva, URI, řetězec, úhel, čas, frekvence. Klíčová slova Klíčová slova obvykle vyjadřují nějakou akci (line-through přeškrtni text), nebo mohou zastupovat jinou hodnotu (často závislou na cílovém zařízení), například thin tenký. Zapisují se bez uvozovek. 1. Základy CSS

29 CSS 29 <číslo>, <celé_číslo> Celá čísla (celé_číslo) se zapisují pomocí číslic 0-9, reálná čísla (číslo) se zapisují stejně, případná desetinná část se odděluje desetinnou tečkou u nás obvyklý zápis s desetinnou čárkou je chybný. Před každým číslem může být znaménko + nebo -. Pokud je celá část desetinného čísla 0, smí se vynechat (0.45 i.45 je stejné číslo). <velikost>, <délka> Délkové hodnoty (<velikost>, <délka>) určují velikost nebo délku určité vlastnosti. Jedná se v podstatě o číslo (číslo nebo celé_číslo), za kterým bezprostředně (bez mezery) následuje dvoupísmenná zkratka měrné jednotky. Pokud je celé_číslo 0, jednotku je možno vynechat. Měrná jednotka může být absolutní nebo relativní. Základy CSS Absolutní jednotky Absolutní jednotky lze použít tehdy, jsou-li předem známy rozměry výstupního média (například papíru na tiskárně), jinak je vhodné použít raději jednotky relativní nebo procenta. Absolutní jednotky se ostatně používají zřídka, občas se používají pt ve stylopisech určených k řízení tisku. pt pc mm cm in Typografický bod (0,3528 mm). Typografická jednotka pica (0,0294 mm). Milimetry. Centimetry. Anglické palce (25,4 mm). Relativní jednotky Relativní jednotky se vždy vztahují k jiné hodnotě. em ex px Výška aktuálního písma, při použití na vlastnost font- -size pak výška písma rodičovského prvku. Výška písmene x v aktuálním písmu. Jednotka px je velmi zajímavá. Ačkoli je často považována za jednotku absolutní, jde o jednotku relativní. Někteří autoři dokonce vyčleňují tuto jednotku do zvláštní kategorie pixelová. Je to tím, že prohlížeče v případě výstupu na monitor chápou 1 pixel jako 1 bod obrazovky, ovšem pokud je koncové zařízení jiného typu (tiskárna, projektor) vynikne relativnost jednotek px. Jde tedy o jednotku relativní vzhledem k výstupnímu médiu. <procenta> Procentuální hodnoty se vždy vztahují k jiné hodnotě. Jedná se v podstatě o číslo (číslo nebo celé_číslo), za kterým bezprostředně (bez mezery) následuje znak procent (%). Pokud je celé_číslo 0, znak % je možno vynechat. 1.4 Hodnoty

30 30 CSS <barva> Barvy lze zadat jako dekadickou trojici RGB (například rgb(255,255,255)), procentálně (například rgb(100%,100%,100%)), hexadecimálně (například #ff00c4) pokud jsou složky barvy zapsány vždy dvěma stejnými číslicemi, je možno použít i zkrácený zápis (například #55ffaa=#5fa). Barvy je možno zadat také pomocí těchto klíčových slov: black (#00000 černá), silver (#c0c0c0 stříbřitá), gray (# tmavě šedá), white (#ffffff bílá), red (#ff0000 červená), maroon (# hnědá), purple (# fialová), fuchsia (#ff00ff růžová), green (# tmavě zelená), lime (#00ff00 světle zelená), olive (# olivová), yellow (#ffff00 žlutá), blue (#0000ff modrá), navy (# tmavě modrá), teal (# šedozelená), aqua (#00ffff tyrkysová). Dále lze použít klíčová slova odpovídající barvám v operačním systému. I když je tento způsob standardizován, osobně jej nedoporučuji. Připadá mi totiž šitý na míru operačnímu systému Microsoft Windows s jeho primitivním pravoúhlým GUI. Proč? V kvalitních systémech si uživatel může nastavit skutečně jakýkoliv vzhled titulku okna zaoblený, stínovaný, vícebarevný atd. Pokud je použita barva pozadí titulků, pak ve Windows bude odpovídat naší představě, ale například v Linuxu nikoliv. Jiný příklad: pozadí okna a text okna. Osobně mám například nastaveno tmavě šedé pozadí a světle šedý text, což však neznamená, že stojím o to, aby se mi touto nepříliš čitelnou kombinací zobrazila nějaká webová stránka... <URI> URI představuje platnou adresu externího zdroje. Zapisuje se ve tvaru url(cesta/soubor), přičemž obsah závorek může být volitelně uzavřen v jednoduchých či dvojitých uvozovkách. Pokud se v URI nacházejí mezery, uvozovky, čárky nebo závorky, musí být nahrazeny escape sekvencemi nebo jednoduše odraženy zpětným lomítkem. V případě relativních adres je třeba pamatovat, že se vztahují k adrese souboru se styly. url( url(../obrazky/pozadi.png ) 1. Základy CSS

31 CSS 31 <řetězec> Řetězcové hodnoty se vždy uzavírají do jednoduchých či dvojitých uvozovek. Pokud se v řetězci nacházejí uvozovky nebo znaky odřádkování, musí být odraženy zpětným lomítkem. Pokud chcete do řetězce vložit platný znak odřádkování, použijte sekvenci \A. <čas> Čas se zadává v sekundách (s) nebo milisekundách (ms). 1.5 Selektory Selektory (česky něco jako přepínače ) určují, na které prvky dokumentu se mají definice stylu vlastně vztahovat. Pokud jeden či více prvků tomuto selektoru vyhovuje, bude se na něj vztahovat pravidlo stylu. Základy CSS Selektory typu Tomuto selektoru vyhovují všechny prvky dané značky. Zapisuje se jednoduše názvem značky. h1 {... } Univerzální selektor Jde o nejobecnější selektor vyhovují mu totiž všechny prvky. Zapisuje se znakem *. Pokud není univerzální selektor jedinou částí jednoduchého selektoru, může být vynechán. * {... } *[class~=trida] {... } /* Možno zapsat i jako [class~=trida] {... } */ *>ul {... } /* Zde není možno univerzální selektor vynechat. */ Selektory třídy Tento selektor patří mezi nejčastěji používané. Technicky vzato jde o zjednodušený zápis jednoho ze selektorů atributu. Tomuto selektoru vyhovují prvky, jejichž atribut class obsahuje příslušnou hodnotu. Obsahuje-li atribut class více hodnot oddělených mezerami, stačí, pokud vyhoví jedna z nich. Zapisuje se jako tečka bezprostředně následovaná jménem třídy. *.trida {... } /* Možno zapsat i jako [class~=trida] {... } */.trida {... } /* Takto je to ještě stručnější */ p.trida {... } /* Vztahuje se na odstavce třídy trida */ Násobné třídy V XHTML může být hodnotou atributu class také seznam více tříd (oddělených mezerami). Prvek pak může být současně zařazen v několika třídách..zelena { color: green; }.kurziva { font-style: italic; } 1.5 Selektory

32 32 CSS... <p class= zelena >Zelený text</p> <p class= kurziva >Kurzíva</p> <p class= zelena kurziva >Zelená kurzíva</p> Selektory ID Dokumenty XHTML i XML mohou používat tzv. jedinečné idetifikátory (v XHTML atribut id). Tento atribut musí být unikátní, tedy smí se v celém dokumentu vyskytovat pouze jednou. Jedině tak máme jistotu, že náš styl ovlivní pouze jeden přesně určený prvek. Zapisuje se jako znak (#) bezprostředně následovaný jménem identifikátoru. #xyz {... } /* Možno zapsat i jako [id=xyz] {... } */ Selektory s atributy Značky XHTML i XML mohou obsahovat i nejrůznější atributy, které zase mohou obsahovat nejrůznější hodnoty (například href= str-2.html nebo title= Titulek ). CSS umožňuje adresovat prvky i na základě těchto atributů. Zapisují se vždy do hranatých závorek, před nimi může být volitelně (bez mezery) název značky (například p[]). Existence atributu Tomuto selektoru vyhovují prvky, které obsahují určený atribut, přičemž na hodnotě atributu nezáleží. Například selektoru img[title] vyhoví všechny prvky img, které mají definovány atribut title. [atribut] {... } Atribut hodnoty Tomuto selektoru vyhovují prvky, jejichž určený atribut má přesně určenou hodnotu. Například selektoru img[title= Zvětšit ] vyhoví všechny prvky img, jejichž atribut title má hodnotu Zvětšit. Hodnoty, které nejsou identifikátory (např. class nebo id) musí být zapsány v uvozovkách. [atribut=hodnota] {... } Atribut obsahující hodnotu Tomuto selektoru vyhovují prvky, jejichž určený atribut obsahuje seznam hodnot oddělených mezerou a jedna z těchto hodnot je rovna určené hodnotě. Například selektoru img[class~=def] vyhoví všechny prvky img, jejichž atribut class obsahuje hodnotu def (například <img class= abc def ghi >). Hodnoty, které nejsou identifikátory (např. class nebo id) musí být zapsány v uvozovkách. [atribut~=hodnota] {... } Atribut obsahující podhodnotu Tomuto selektoru vyhovují prvky, jejichž určený atribut obsahuje seznam hodnot oddělených pomlčkou a první z těchto hodnot je rovna určené hodnotě. Tento selektor je určen zejména k rozlišování jazyka. Například selektoru p[lang =en] vyhoví všechny prvky p, 1. Základy CSS

Zobrazit více