Návrh a tvorba WWW Přednáška 3 CSS 3

HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia Realtime / Communication CSS3 File / Hardware Access Nuts & Bolts Semantics & Markup Multimedia

Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu a formátování dokumentů napsaných značkovacím jazykem. Nejčastěji se CSS používá pro grafickou prezentaci HTML stránek. Další použití lze nalézt např. u XML. Podpora nových CSS vlastností je v prohlížečích diskutabilní. U některých vlastností je i rozdíl v samotné implementaci (stejná vlastnost se v různých prohlížečích chová odlišně).

selektor {vlastnost: hodnota_vlastnosti} Syntaxe CSS Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části, selektor (název elementu, pro který má toto pravidlo platit) a deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. selektor {vlastnost: hodnota_vlastnosti} Příklad: html: css: výsledek: Můj první styl. <div>Můj první styl.</div> div {color: red; text-decoration: underline}

Použití CSS v HTML Přímý styl Stylopis v hlavičce HTML Externí soubor Styl zaveden přímo ke konkrétnímu tagu prostřednictvím atributu style. Stylopis v hlavičce HTML Styly uvedeny jako obsah tagu style v hlavičce HTML. Externí soubor Nevizuální připojení externího souboru se stylopisem. <div style=“color:red”>text …</div> <style> div {color: red;}</style> <link href=“styly.css” type=“text/css” rel=“stylesheet”>

Délkové jednotky Absolutní jednotky milimetr (1mm = 3.78px) - mm centimetr (1cm = 37.8px) - cm palec (1in = 96px) - in typografický bod - pt cicero – pc Relativní jednotky - mění svou velikost v závislosti na aktuální velikosti písma Šířka velkého písmene M - em Výška malého písmene x – ex Procenta – značíme %, počítají se z velikosti nadřazeného elementu Pixly – značíme px, základní jednotka Délková jednotka se píše hned za číslo, desetinná místa se oddělují tečkou.

Barvy v CSS Název barvy RGB zápis Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow RGB zápis Procentuálně Desítkově Šestnáctkově Paletu barev si můžete vytvořit například pomocí aplikace http://colorschemedesigner.com/ nebo http://kuler.adobe.com/. Body {color:blue} body {color:rgb(100%,0%,100%)} body {color:rgb(255,0,0)} body {color:#FF0000}

Třída, Identifikátor Třída Identifikátor *.barva {color:red} v CSS vytváříme třídu selektor.trida v HTML přiřazujeme vlastnosti CSS přes třídu pomocí atributu class Identifikátor v CSS vytváříme identifikátor selektor#trida v HTML přiřazujeme vlastnosti CSS přes identifikátor pomocí atributu id *.barva {color:red} <div class=“barva”></div> *#barva {color:red} <div id=“barva”></div>

Práce se selektory vzor význam * univerzální selektor (lze vynechat) E selektor elementu E E.myclass selektor přes třídu E#myid selektor přes identifikátor

Pokročilá práce se selektory vzor význam E F Selektor následníka – všechny elementy F, které jsou uvnitř elementu E E>F Selektor přímého následovníka – všechny elementy F, které jsou přímím následovníkem E E~F Selektor následných sourozenců – všechny elementy F, které jsou následnými sourozenci elementu E E+F Selektor následného sourozence – elementy F, který je následným (prvním) sourozencem elementu E

Selektory skrz atributy vzor význam E[foo] element E s atributem “foo” E[foo=“bar”] element E s atributem “foo” jehož hodnota se rovná “bar” E[foo~=“bar”] element E s atributem “foo” jehož jedna z hodnota se rovná “bar” E[foo^=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar” E[foo$=“bar”] element E s atributem “foo” jehož hodnota končí řetězcem “bar” E[foo*=“bar”] element E s atributem “foo” jehož hodnota obsahuje subřetězec “bar” E[foo|=“bar”] element E s atributem “foo” jehož hodnota začíná řetězcem “bar”, po které následuje pomlčka

Pseudotřídy vzor význam E:link ještě nenavštívený odkaz E:visited již navštívený odkaz E:active aktivovaný odkaz E:hover zaměřený odkaz (myší) E:focus zaměřený odkaz (tab) E:lang(en) element E v jazykové mutaci en E:empty element, který nemá potomky E:first-child první potomek elementu E E:last-child poslední potomek elementu E

Pseudoelementy vzor význam E::first-line první řádka elementu E::first-letter První písmeno elementu

Písmo

Blok

Pozadí

Hranice

Box

Pozicování

Plovoucí elementy Vykreslení elementů je dáno výchozím zobrazovacím schématem. To odpovídá normálnímu toku dokumentu (řádkové elementy – vedle sebe, blokové elementy – pod sebe). Elementy lze mimo tento způsob umístit libovolně v dokumentu a to buď jako plovoucí elementy či jako elementy s definovanou distancí. V takovém případě jsou vyjmuty z normálního toku dokumentu a jsou zobrazovány ve zvláštní vrstvě. Plovoucí elementy jsou takové, které jsou vyjmuty z normálního toku dokumentu a jsou zarovnány doleva nebo doprava a zbytek obsahu dokumentu ho obtéká. Pro plovoucí elementy používáme vlastnost float. Ukončení obtékání elementu řídíme pomocí vlastnosti clear.

Pozicování elementů Pozicování elementů v CSS provádíme prostřednictvím vlastnosti position. Tato vlastnost může nabývat hodnot: static (statické, odpovídá normálnímu toku dokumentu), relative (relativní, umístění vztažené k bodu, kde by se element vyskytoval v běžném toku dokumentu), absolute (absolutní, umístění vztažené k nadřazenému elementu) nebo fixed (fixní, neměnné umístění na stránce). Pro vlastní umístění elementu při daném typu pozicování používáme vlastnosti: top (vzdálenost od horní hrany), right (vzdálenost od pravé hrany), bottom (vzdálenost od spodní hrany), nebo left (vzdálenost od levé hrany). Povoleny jsou i záporné hodnoty.

Pozicování elementů v CSS

Z-index Způsob vykreslování překrývajících se prvků můžeme ovlivnit prostřednictvím vlastnosti z-index. Hodnota vlastnosti je pořadí „vrstvy“. Čím je číslo větší, tím blíže je k pozorovateli. #ten {position: absolute; left: 100px; top: 100px;z-index: 1;} #jack {position: absolute; left: 115px; top: 115px; z-index: 2;} …

Overflow, Clip Chování obsahu elementu, který se do daného elementu nevejde, můžeme řídit pomocí vlastnosti overflow. Vlastnost může nabývat hodnot: visible (co se nevejde tak přeteče), auto (v případě přetečení se nezobrazí obsah, ale přidájí se rolovací lišty), scroll (vždy zobrazí rolovací lišty), hidden (co se nevejde se nezobrazí). Prostřednictvím vlastnosti clip lze dosáhnout ořezání elementu. Hodnota vlastnosti potom určuje vzdálenosti od horní hrany, k pravé hraně, ke spodní hraně, od levé hrany. div {width: 100px; height: 50px; overflow: hidden} div {clip: rect (30px 165px 100px 30px)}

@ pravidla @charset @import @media @page @font-face definice znakové sady stylesheetu @import import stylu ze zadaného stylesheetu @media svazuje styly s konkrétním typem výstupu @page pravidlo pro stránková média @font-face umožňuje import vlastních fontů @charset "iso-8859-1" @import url("styl.css"); @media print {/* stylové vlastnosti pro tisk */} @page :first {margin-top: 10cm} @font-face {font-family: "Scarborough Light"; src: url("http://www.font.site/s/scarbo-lt");}

Validace stylů Validátor http://http://jigsaw.w3.org/css-validator/

Literatura CSS: The Missing Manua, David Sawyer McFarland, Pogue Press, August 21, 2009, ISBN: 0596802447 CSS Web Site Design Hands on Training, Eric Meyer, Peachpit Press, November 19, 2006, ISBN: 978-0321293916 HTML5 and CSS3: Develop with Tomorrow's Standards Today, Brian P. Hogan, Pragmatic Bookshelf, January 14, 2011, ISBN: 978-1934356685