Tento materiál byl zkopírován z Wikipedie a je třeba jej ‚přeložit‘ pro Psychology Wiki.
Kaskádové styly
Kódování znaků
Porovnání rozvrhovacího mechanismu
Dynamické HTML
Rodina písma
Editor HTML
Prvek HTML
Skriptování HTML
Unicode a HTML
Webové barvy
W3C
XHTML
Kaskádové styly (CSS) jsou v informatice jazykem stylů, který se používá k popisu prezentace dokumentu napsaného ve značkovacím jazyce. Nejčastěji se používá ke stylování webových stránek napsaných v jazycích HTML a XHTML, ale tento jazyk lze použít na jakýkoli druh dokumentu XML, včetně SVG a XUL. Specifikace CSS spravuje konsorcium World Wide Web Consortium (W3C).
CSS používají autoři i čtenáři webových stránek k definování barev, písem, rozvržení a dalších aspektů prezentace dokumentu. Je určen především k tomu, aby umožnil oddělit obsah dokumentu (zapsaný v jazyce HTML nebo podobném značkovacím jazyce) od prezentace dokumentu (zapsané v jazyce CSS). Toto oddělení může zlepšit přístupnost obsahu, poskytnout větší flexibilitu a kontrolu při specifikaci prezentačních vlastností a snížit složitost a opakování strukturálního obsahu. CSS může také umožnit, aby stejná stránka se značkami byla prezentována v různých stylech pro různé způsoby vykreslování, například na obrazovce, v tisku, hlasem (při čtení prohlížečem nebo čtečkou obrazovky na bázi řeči) a na hmatových zařízeních založených na Braillově písmu. Stejně tak lze identické značky HTML nebo XML zobrazit v různých stylech, „značkách“, livrejích nebo barevných schématech pomocí různých CSS.
CSS určuje schéma priorit, které určuje, která pravidla stylu se použijí, pokud se na určitý prvek vztahuje více než jedno pravidlo. V této takzvané kaskádě se vypočítávají priority neboli „váhy“ a přiřazují pravidlům tak, aby byly výsledky předvídatelné.
Jazyk CSS má jednoduchou syntaxi a používá řadu anglických klíčových slov k určení názvů různých vlastností stylů.
List stylů se skládá ze seznamu pravidel. Každé pravidlo se skládá z jednoho nebo více selektorů oddělených čárkami a bloku deklarace. Blok deklarací se skládá ze seznamu deklarací oddělených středníkem v kudrnatých závorkách. Každá deklarace se skládá z vlastnosti, dvojtečky (:) a hodnoty.
Jedná se o šest pravidel se selektory p, h2, .note, p#paragraph1, a:hover a #news p.
Hodnoty vlastností jsou zadány například pomocí color: red, kde vlastnost color má hodnotu red.
V prvních dvou pravidlech jsou elementům HTML p (odstavec) a h2 (nadpis druhé úrovně) přiřazeny stylistické atributy. Element odstavec bude vykreslen písmem Garamond nebo, pokud není Garamond k dispozici, jiným písmem Serif. Prvek nadpisu druhé úrovně bude vykreslen červeně na bílém pozadí.
Třetí zobrazené pravidlo odpovídá prvkům, které mají atribut class obsahující token „note“. Například:
Tento odstavec bude zobrazen červeně a tučně se žlutým pozadím.
Selektory .class ve skutečnosti zahrnují zvláštní druh porovnávání atributů, na rozdíl od testování rovnosti. Protože atribut třídy HTML je definován jako seznam tokenů oddělených bílými znaky, je selektor třídy vyhodnocován vůči každému z nich zvlášť.
Čtvrté pravidlo bude odpovídat jedinému elementu p v každém dokumentu HTML, jehož atribut id je nastaven na paragraph1: V rámci svého vykreslovacího rámečku nebude mít žádný okraj, protože jeho šířka okraje je nastavena na nulu.
Páté pravidlo definuje styl hover pro prvky. Ve výchozím nastavení většiny prohlížečů jsou prvky a podtržené. Toto pravidlo podtržení odstraní, když uživatel „najede“ kurzorem myši na tyto prvky.
Poslední pravidlo odpovídá těm prvkům p, které se nacházejí uvnitř prvku, jehož atribut id má hodnotu news; příklad selektoru potomka.
Soubor stylů CSS může obsahovat komentáře; syntaxe komentářů je podobná syntaxi používané v programovacím jazyce C.
V CSS se selektory používají k deklarování, na které prvky se styl vztahuje, což je druh výrazu shody. Zde je několik příkladů syntaxe selektorů:
Kromě nich lze k definování dalšího chování použít sadu pseudotříd. Pravděpodobně nejznámější z nich je :hover, která aplikuje styl pouze tehdy, když uživatel „ukáže“ na viditelný prvek, obvykle tak, že nad ním podrží kurzor myši. Připojuje se k selektoru jako a:hover nebo #elementid:hover. Další pseudotřídy a pseudoelementy jsou například :first-line, :visited nebo :before. Speciální pseudotřídou je :lang(c), kde by se styl aplikoval na prvek pouze v případě, že je v jazyce „c“.
Selektory lze kombinovat i jinými způsoby, zejména v CSS 2.1, aby se dosáhlo větší specifičnosti a flexibility.
V následujícím příkladu je několik selektorů seskupeno pomocí čárky. Pravidlo nastavuje písmo pro všechny nadpisy HTML.
Chcete-li použít soubor stylů CSS, uložte kód CSS do souboru, například example.css, a poté na něj odkažte nebo jej importujte z webových stránek HTML nebo XHTML pomocí jednoho ze dvou následujících formátů:
V prvním příkladu si uvědomte, že syntaxe /> platí pouze v jazyce XHTML; pokud píšete HTML, uzavřete prázdný element, jako je tento, pomocí >.
Chcete-li na dokument XML použít soubor stylů CSS, přidejte následující příkaz ke zpracování podle níže uvedeného příkladu XML:
Styly se v té či oné podobě objevují již od počátků SGML v 70. letech 20. století. Různé prohlížeče obsahovaly vlastní jazyk stylů, který bylo možné použít k přizpůsobení vzhledu webových dokumentů. Původně byly soubory stylů určeny koncovému uživateli; první revize jazyka HTML neposkytovaly mnoho možností pro prezentační atributy, a tak bylo často na uživateli, aby rozhodl, jak budou webové dokumenty vypadat.
S rozvojem jazyka HTML se rozšířily jeho stylistické možnosti, aby splňoval požadavky vývojářů webových stránek. Návrháři tak získali větší kontrolu nad vzhledem stránek, ale jazyk HTML se stal složitějším na psaní a údržbu. Rozdíly v implementacích webových prohlížečů ztěžovaly konzistentní vzhled stránek a uživatelé měli menší kontrolu nad prohlížením webu.
Håkon Wium Lie (dnes známý jako technický ředitel společnosti Opera Software) v roce 1994 navrhl systém kaskádových stylů (CSS), protože viděl potřebu vylepšeného systému webové prezentace. Bert Bos v té době pracoval na prohlížeči Argo, který používal vlastní styly; oba se rozhodli spolupracovat na vývoji CSS.
Na rozdíl od existujících jazyků stylů, jako jsou DSSSL a FOSI, CSS umožňoval, aby styl dokumentu ovlivňovalo více stylů. Jeden list stylu mohl dědit nebo „kaskádovat“ z jiného, což umožňovalo směs stylistických preferencí, které byly řízeny stejnou měrou tvůrcem webu i uživatelem.
Håkonův návrh byl prezentován na konferenci „Mosaic and the Web“ v Chicagu ve státě Illinois v roce 1994 a znovu s Bertem Bosem v roce 1995. V té době vznikalo konsorcium World Wide Web Consortium, které se zajímalo o vývoj CSS a uspořádalo workshop, jemuž předsedal Steven Pemberton. To vedlo k tomu, že W3C přidalo práci na CSS k výsledkům redakční revizní komise HTML (ERB). Håkon a Bert byli hlavními technickými pracovníky tohoto aspektu projektu a podíleli se na něm i další členové, včetně Thomase Reardona ze společnosti Microsoft. Koncem roku 1996 bylo CSS připraveno stát se oficiálním a v prosinci bylo zveřejněno doporučení CSS úrovně 1.
Vývoj jazyků HTML, CSS a DOM probíhal v jedné skupině, HTML ERB. Počátkem roku 1997 byla tato skupina rozdělena na tři pracovní skupiny: HTML WG, které předsedal Dan Connolly z W3C, DOM WG, které předsedala Lauren Woodová ze SoftQuad, a CSS WG, které předsedal Chris Lilley z W3C.
Pracovní skupina CSS se začala zabývat otázkami, které nebyly řešeny v rámci CSS 1. úrovně, což vedlo k vytvoření CSS 2. úrovně, jejíž první veřejný pracovní návrh byl zveřejněn 4. listopadu 1997. Jako doporučení W3C byl zveřejněn 12. května 1998. Úroveň CSS 3, jejíž vývoj byl zahájen v roce 1998, se v roce 2005 stále vyvíjí.
Přestože specifikace CSS1 byla dokončena v roce 1996 a v témže roce byl vydán prohlížeč Internet Explorer 3 společnosti Microsoft s určitou podporou CSS, trvalo více než tři roky, než některý webový prohlížeč dosáhl téměř úplné implementace této specifikace. Internet Explorer 5.0 pro počítače Macintosh, dodaný v březnu 2000, byl prvním prohlížečem s plnou (více než 99procentní) podporou CSS1, čímž překonal prohlížeč Opera, který byl lídrem od zavedení podpory CSS o patnáct měsíců dříve. Další prohlížeče následovaly brzy poté a mnohé z nich dodatečně implementovaly části CSS2, ačkoli od roku 2006 žádný prohlížeč nedosáhl plné implementace CSS2. Nejméně podporovanými zůstávají vlastnosti specifické pro zvukové a stránkované médium.
Vzhledem k tomu, že rané prohlížeče, jako například Internet Explorer 3 a 4 a Netscape 4.x, měly podporu CSS nejednotnou a plnou chyb, byla přítomnost klesajícího, ale stále významného počtu uživatelů těchto starých prohlížečů, a to i mnoho let poté, co se staly zastaralými, důležitým faktorem, který bránil návrhářům v přijetí CSS v prvních dnech.
Když pozdější modernější prohlížeče „v5“ nakonec začaly nabízet poměrně plnou implementaci CSS, mnohé z jejich implementací CSS byly v určitých oblastech stále nesprávné a byly plné nekonzistencí, chyb a dalších podivností. Šíření těchto chyb, podivností a nekonzistencí souvisejících s CSS v prohlížečích a rozdílná podpora funkcí v implementacích CSS ztěžovaly návrhářům dosažení konzistentního vzhledu na různých platformách. Kvůli těmto problémům se autoři běžně museli uchýlit k používání hacků a obcházení CSS a filtrů CSS, aby dosáhli konzistentních výsledků napříč webovými prohlížeči a platformami.
Filtr CSS je kódovací technika, jejímž cílem je efektivně skrýt nebo zobrazit části CSS v různých prohlížečích, a to buď využitím zvláštností nebo chyb při práci s CSS v prohlížeči, nebo využitím nedostatečné podpory částí specifikace CSS. Pomocí filtrů CSS zašli někteří návrháři tak daleko, že některým prohlížečům poskytli zcela odlišné CSS, aby zajistili, že návrhy budou vykresleny podle očekávání. Protože velmi rané webové prohlížeče buď vůbec neuměly zpracovávat CSS, nebo CSS vykreslovaly velmi špatně, návrháři dnes často běžně používají filtry CSS, které těmto starým prohlížečům zcela zabrání „vidět“ jakoukoli část CSS. Například filtry CSS jsou velmi často používány tak, aby vyloučily prohlížeče Netscape 4.xx a Internet Explorer 4 a zajistily, že CSS „uvidí“ pouze novější prohlížeče „v5“.
Příkladem známé chyby prohlížeče CSS je chyba modelu rámečků v prohlížeči Internet Explorer, kdy jsou šířky rámečků v několika verzích prohlížeče interpretovány nesprávně, což vede k tomu, že při zobrazení v prohlížeči Internet Explorer jsou bloky příliš úzké, ale v prohlížečích splňujících standardy jsou správné. Této chybě se lze v Internet Exploreru 6 vyhnout použitím správného doctype v dokumentech (X)HTML. Ke kompenzaci chyb, jako je tato, se používají hacky a filtry CSS, což je jen jedna ze stovek chyb CSS, které byly zdokumentovány v různých verzích prohlížečů Internet Explorer, Netscape, Mozilla a Opera.
I když se díky dostupnosti prohlížečů podporujících CSS stala tato technologie životaschopnou, její přijetí stále brzdily problémy návrhářů s nesprávnou implementací CSS v prohlížečích a nejednotnou podporou CSS. I dnes jsou tyto problémy příčinou toho, že návrh CSS je složitější a nákladnější, než by měl být, a testování napříč prohlížeči zůstává nutností. Dalšími důvody, proč se CSS stále nepřijímá, jsou: jeho složitost, setrvačnost a neznalost CSS a potřebných technik ze strany autorů, slabá podpora ze strany autorských nástrojů, rizika plynoucí z nekonzistence mezi prohlížeči a zvýšené náklady na testování a méně často požadavek na konzistentní vzhled i pro uživatele prastarých prohlížečů, které CSS neumí.
V současné době probíhá silná konkurence mezi rozvrhovacím jádrem Gecko od Mozilly, rozvrhovacím jádrem Presto od Opery a jádrem KHTML používaným v prohlížečích Safari od společnosti Apple a Konqueror od KDE – každý z nich má vedoucí postavení v různých aspektech CSS. Od roku 2006 zůstává Internet Explorer nejhorší ve vykreslování CSS podle standardů World Wide Web Consortium.
Problémy s nejednotným používáním CSS v prohlížečích vedly W3C k revizi standardu CSS2 na CSS2.1, který lze považovat za něco, co se blíží funkčnímu snímku současné podpory CSS v prohlížečích HTML. Vlastnosti CSS2, které žádný prohlížeč HTML úspěšně neimplementoval, byly vypuštěny a v několika případech bylo změněno definované chování, aby se standard přizpůsobil převažujícím stávajícím implementacím. CSS2.1 se 25. února 2004 stalo kandidátským doporučením, ale 13. června 2005 bylo staženo zpět do pracovního návrhu, aby se opravily různé problémy (v některých případech, aby více odpovídaly implementaci v prohlížečích).
Typ média text/css je registrován pro použití s CSS podle RFC 2318 (březen 1998).
Od roku 2006 jsou některé starší webové servery stále nakonfigurovány tak, aby zobrazovaly soubory CSS s typem média application/x-pointplus. Již v červenci 1996 prodávala společnost Net-Scene program PointPlus Maker pro převod souborů PowerPoint na soubory Compact Slide Show (CSS) a webové servery byly nakonfigurovány tak, aby odesílaly mediální typ x-pointplus a vyzvaly prohlížeče ke spuštění bezplatného doplňku PointPlus Viewer. Protože byl zásuvný modul uveden v adresáři pro Netscape Navigator 3.0, byl s tímto mapováním distribuován i populární Netscape Enterprise Server. Při čtení externích souborů stylů některé webové prohlížeče ignorují nebo překládají mediatyp PointPlus, ale některé (zejména Firefox) tento mediatyp dodržují a nezobrazí externí soubor CSS jako soubor stylů.
CSS je navržen tak, aby umožňoval oddělit prezentaci od struktury. Před zavedením CSS byly téměř všechny prezentační atributy dokumentu HTML obsaženy v kódu HTML; všechny barvy písma, styly pozadí, zarovnání prvků, okraje a velikosti musely být explicitně popsány, často opakovaně, uprostřed kódu HTML. CSS umožňuje autorům přesunout většinu těchto informací do souboru stylů, což vede k podstatně jednoduššímu kódu HTML. Dokumenty HTML jsou mnohem menší a webové prohlížeče obvykle ukládají soubory stylů CSS do mezipaměti. To vede ke snížení síťového provozu a znatelně rychlejšímu stahování stránek.
Například element HTML h2 určuje, že text v něm obsažený je nadpis druhé úrovně. Má nižší úroveň důležitosti než nadpisy h1, ale vyšší úroveň důležitosti než nadpisy h3. Tento aspekt elementu h2 je strukturální.
Obvykle se nadpisy zobrazují v sestupném pořadí podle velikosti, přičemž h1 je největší, protože větší nadpisy jsou obvykle interpretovány jako důležitější než menší. Nadpisy se také obvykle vykreslují tučným písmem, aby se jim dodalo další zvýraznění. Prvek h2 může být vykreslen tučným písmem a písmem větším než h3, ale menším než h1. Tento aspekt prvku h2 je prezentační.
Dodatečné prezentační značky v jazyce HTML činily dokumenty složitějšími a obecně náročnějšími na údržbu; pokud měly být všechny nadpisy druhé úrovně zobrazeny v tomto stylu, musely být značky použity pro každý z nich zvlášť. Navíc osoba, která čte stránku pomocí webového prohlížeče, ztrácí kontrolu nad zobrazením textu; pokud by raději viděla nadpis modře, nemůže tak snadno učinit, protože autor webu výslovně definoval barvu nadpisu, která se má použít.
Zatímco následující blok v doprovodném listu stylů definuje stejný styl pro všechny výchozí nadpisy h2 na celém webu:
Prezentace je tak oddělena od struktury. (Právě kvůli výhodám, které CSS nabízí, považuje W3C mnoho prezentačních prvků a atributů v HTML za zastaralé.) CSS může definovat barvu, písmo, zarovnání textu, velikost a také nevizuální formátování, například rychlost, s jakou se stránka čte nahlas v textových čtečkách.
Informace o stylech CSS mohou být připojeny jako samostatný dokument nebo vloženy do dokumentu HTML. Lze importovat více souborů stylů a zadat alternativní soubory stylů, aby si uživatel mohl mezi nimi vybrat. V závislosti na použitém výstupním zařízení lze použít různé styly. Například verze pro obrazovku může být zcela odlišná od verze pro tisk. To umožňuje autorům vhodně přizpůsobit prezentaci pro každý druh média. Jedním z cílů CSS je také umožnit „uživatelům“ větší míru kontroly nad prezentací; uživatelé, kterým se červené nadpisy s kurzívou zdají špatně čitelné, mohou na dokument aplikovat vlastní styl a prezentační vlastnosti budou „kaskádovány“; uživatel může přepsat pouze styl červeného nadpisu s kurzívou a ostatní atributy zůstanou tak, jak jsou.
Příklad dokumentu XHTML využívajícího CSS
Zobrazí se tučnou červenou kurzívou na zeleném pozadí;
výše definovaný styl pro h2 je částečně přepsán.
Zobrazí se tučnou modrou kurzívou
Příklad uživatelského listu stylu
Soubor highlightheaders.css obsahující:
Takový soubor je uložen lokálně a je použitelný, pokud byl zadán v možnostech prohlížeče. „!important“ znamená, že má přednost před specifikacemi autora.
Příklad použití CSS na „obyčejné“ XML
Tento příklad souboru XML, stylizovaného pomocí níže uvedeného souboru stylů CSS, vidíte v prohlížeči Mozilla Firefox.
Soubor XML obsahující následující údaje – všimněte si instrukce pro zpracování xml-stylesheet:
A samostatný soubor s názvem css.css (v tomto případě ve stejné složce):
Všimněte si definice vlastnosti display v některých případech, v jiných případech je výchozí hodnota ‚inline‘. Nastavení této vlastnosti je zřídka nutné při stylování HTML nebo XHTML, kde jsou tyto vlastnosti předdefinovány.
Většina problémů připisovaných CSS je ve skutečnosti důsledkem chyb v prohlížeči nebo nedostatečné podpory funkcí CSS. Nejzávažnějším provinilcem mezi současnými prohlížeči je Microsoft Internet Explorer, jehož verze 6 postrádá podporu pro přibližně 30 % vlastností CSS2 a, což je ještě významnější, chybně interpretuje značný počet důležitých vlastností, jako jsou „width“, „height“ a „float“.
Současné specifikace CSS však mají některé skutečné nedostatky.
První specifikací CSS, která se stala oficiálním doporučením W3C, je CSS úrovně 1, zveřejněná v prosinci 1996. Mezi její možnosti patří podpora:
W3C spravuje doporučení CSS1.
Úroveň 2 CSS byla vyvinuta konsorciem W3C a zveřejněna jako doporučení v květnu 1998. CSS2 je nadmnožinou CSS1 a obsahuje řadu nových funkcí, mimo jiné absolutní, relativní a pevné pozicování prvků, koncept mediálních typů, podporu zvukových stylů a obousměrného textu a nové vlastnosti písma, například stíny. Doporučení CSS2 spravuje konsorcium W3C.
Revize CSS 2 úrovně 1 neboli CSS 2.1 opravuje chyby v CSS2, odstraňuje nedostatečně podporované funkce a přidává do specifikace již implementovaná rozšíření pro prohlížeče. Ačkoli byla několik měsíců kandidátským doporučením, 15. června 2005 byla vrácena na pracovní návrh k dalšímu přezkoumání.
CSS úrovně 3 se v současné době vyvíjí. Konsorcium W3C vede zprávu o pokroku v oblasti CSS3.
Tyto experimenty jsou obvykle kompatibilní pouze s prohlížeči, které jsou do značné míry v souladu se standardy.