CSS. Internetové publikování

Transkript

1 CSS Internetové publikování 1

2 Problémy Spousta zbytečného kódu Omezená podpora minoritních platforem, počítačů Přemíra grafiky dlouhá doba načítání Závislost na rozlišení Obtížná údržba dokumentů Drobné změny v designu je třeba opravovat na mnoha místech najednou

3 Špatný příklad formátování Proč je uvedený způsob špatný? Pokyny pro formátování jsou promíchány s informací Kód je velmi špatně udržovatelný TIP zkuste si změnit barvu zvýraznění na červenou

4 Lepší příklad formátování Proč je uvedený způsob lepší než předchozí? Pokyny pro formátování jsou oddělené od informace Kód je dobře udržovatelný Změnou stylu se změní formátování všech instancí

5 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru

6 Styl v hlavičce HTML Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css">  </style> </head>

7 Struktura pravidla v CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } Selektor Nejjednodušší selektor je jméno objektu (např. elementu, kterého se definice týká) Vlastnost Jméno nastavitelné vlastnosti (> 90 v CSS 2.1) Hodnota Hodnota na kterou se má daná vlastnost nastavit Typ hodnoty je dán podle typu vlastnosti

8 Hodnoty vlastností v CSS Délkové míry URL Řetězec řetězec řetězec Klíčové slovo Barva

9 Jednotky délky v CSS Relativní Jednotka em ex px Význam Odpovídá velikosti písma v aktuálním elementu (pokud se používá pro nastavení velikosti písma, odpovídá velikosti písma mateřského elementu) Odpovídá výšce písmene x pixel jeden bod definovaný relativně vzhledem k rozlišení zařízení (bod na obrazovce)

10 Jednotky délky v CSS Absolutní Jednotka in cm mm pt pc Význam Palec Centimetr Millimetr bod (1 pt = 1/72 inch) pica (1 pc = 12 point) Tyto hodnoty má význam používat, pouze je-li známo fyzické rozlišení zařízení

11 Jednotky délky v CSS Procenta Jednotka Význam % Určuje délku relativně vzhledem k jiné délce Každá vlastnost která může přijmout hodnotu v procentech definuje tuto referenční délku

12 URL url(text_url) Text URL může být uzavřen do uvozovek, takže je správně obojí background: url(" background: url(

13 Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif }

14 Barvy v CSS Způspb zápisu Vysvětlivky color_name Jméno barvy (red, green, blue, magenta,...) rgb(x,x,x) Složky palety RGB rgb(y%, y%, y%) Procentuální složky palety RGB 0-100% #rrggbb Hexadecimální číslo vyjadřující složky palety RGB 00-ff Více o barvách

15 Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family family-name Čárkami oddělený seznam písem v sestupném pořadí priority Použije se první dostupné písmo Bezpečnější je vkládat názvy do uvozovek jsou to řetězce Např. font-family: "Franklin Gothic Book", "Arial"; Je-li na klientském počítači dostupný font Franklin Gothic Book použije se, jinak se použije Arial

16 Vlastnosti písma Vlastnost Popis Hodnoty font-family seznam preferovaných rodin řezů písma family-name generic-family generic-family Generické rodiny písem jsou vždy dostupné (i když nemusí vypadat vždy stejně Možnosti 'serif' (např. Times) 'sans-serif' (např. Helvetica) 'cursive' (např. Zapf-Chancery) 'fantasy' (např. Western) 'monospace' (např. Courier) Výčet by měl vždy končit písmem z generické rodiny font-family: "Franklin Gothic Book", "Arial", sans-serif;

17 Vlastnosti písma Vlastnost Popis Hodnoty font-style styl písma normal italic oblique font-variant varianta písma normal small-caps font-weight síla tahu písma normal bold bolder lighter

18 Vlastnosti písma Vlastnost Popis Hodnoty font-size velikost písma xx-small x-small small medium large x-large xx-large smaller larger délková jednotka % Velikosti xx-small xx-large jsou absolutní Smaller / larger indikují o jednotku menší / větší písmo oproti rodičovskému elementu Podobně se chovají %

19 Vlastnosti pozadí a barev Vlastnost Popis Hodnoty color Barva textu barva background-attachment nastavuje, zda mají obrázky na pozadí rolovat se zbytkem stránky scroll fixed background-color barva pozadí elementu barva transparent background-image obrázek na pozadí url none background-position poloha obrázku na pozadí top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat opakování obrázku na pozadí repeat repeat-x

20 Vlastnosti textu Vlastnost Popis Hodnoty letter-spacing Mezery mezi písmeny normal length text-align Zarovnání left right center justify text-decoration Ozdoba písma none underline overline line-through blink text-indent Odsazení 1. řádky length % text-transform Transformace velikosti písma none capitalize uppercase lowercase white-space Interpretace mezer a ostatních "bílých" znaků normal pre nowrap word-spacing Velikost mezer mezi slovy normal

21 Formátovací model margin (vnější okraj) border (rámeček) padding (vnitřní okraj) Obsah elementu

22 Vlastnosti okrajů Vlastnost Popis Hodnoty margin Zkratka pro nastavení všech okrajů margin-top margin-right margin-bottom margin-left margin-bottom Spodní okraj auto length % margin-left Levý okraj auto length % margin-right Pravý okraj auto length % margin-top Horní okraj auto length % Podobně pro vnitřní okraje se margin nahradí padding Např. padding-left

23 Vlastnosti ohraničení Vlastnost Popis Hodnoty border-color Barva ohraničení color border-style Styl ohraničení none hidden dotted dashed solid double groove ridge inset outset border-width Tloušťka ohraničení thin medium thick length Možno též nastavovat vlastnosti každého ze 4 ohraničení zvlášť Názvy vlastností mají vložené top-, -bottom-, -left-, -right- Např. border-left-width

24 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace stylu pro každý element zvlášť Definice stylu v hlavičce dokumentu Připojení stylu z externího souboru

25 Styl v hlavičce HTML Definice stylu pro jediný HTML soubor Vlastní definice se uzavírá do komentářů, aby se zamezilo intrepretaci ve starších prohlížečích <head> <style type="text/css">  </style> </head>

26 Styl v externím souboru Umožňuje využití jedné definice stylu mnoha HTML dokumenty <head>... <link href="jméno_souboru_se_stylem.css" type="text/css" rel="stylesheet">... </head>

27 Styl u každého elementu Atribut style Odporuje filozofii CSS, používat vyjímečně... <p style="definice stylu">tento jediný odstavec bude formátován podle definice.</p>...

28 Opakování - struktura definice CSS selektor { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } Selektor Doposud jsme znali pouze typový selektor odpovídá názvu elementu platí pro všechny elementy daného typu

29 Seskupování selektorů Selektory se stejnými deklaracemi je možné sloučit, takže následující zápis h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } je ekvivalentní zápisu: h1, h2, h3 { font-family: sans-serif } POZOR neplést z dalšími typy selektorů při seskupování je oddělovačem vždy čárka

30 Další selektory Univerzální selektor * - týká se každého elementu v dokumentu Např: * {color: blue} Všechny elementy budou mít nastaveno modré písmo

31 Další selektory - třída Třída = podskupina elementů V HTML definována atributem class Např. <p class="modry">modry text</p> Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota }.modry { color: blue; }

32 Příslušnost k více třídám Jednotlivé třídy odděleny mezerami Např. <p class="modry inverzni">modry text</p> Definice v CSS pro třídu: p.modry {color: blue;} p.inverzni {background-color: blue;} Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow;}

33 Další selektory id elementu id = identifikátor jednoho konkrétního elementu na stránce V HTML definován atributem id Např. <p id="1odstavec">modry text</p> Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostn: hodnota } #1odstavec { color: blue; }

34 Pseudotřídy Odkazy a:link dosud nenavštívený odkaz a:visited navštívený odkaz a:hover na odkaz se ukazuje myší a:active link je aktivní (vybrán klávesou TAB) :first-child Element, který je prvním potomkem jiného elementu

35 Dědění vlastností <head> <style type="text/css"> p { color: red } </style> </head> <body> <p>červený <em>text<em></p> </body> I slovo 'text' v příkladě se zobrazí červeně, protože tuto vlastnost zdědil od svého rodičovského elementu

36 Priorita dědění vlastností - Kaskáda Definuje-li více selektorů stejnou vlastnost různě a týkajíli se stejného objektu má prioritu selektor s nejvyšší specifičností Specifičnost klesá v řadě 1. vlastnosti definované v atributu style="" 2. podle počtu ID atributů (#) 3. podle počtu jiných atributů (class) a pseudotříd 4. podle počtu názvů elementů

37 Vlastnosti seznamů Vlastnost Popis Hodnoty list-style-image nastaví zvolený obrázek jako odrážku seznamu none url list-style-position poloha odrážky inside outside list-style-type typ odrážky-číslování none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana

38 Výška a šířka elementu height: délková míra width: délková míra Uplatní se pouze na blokové elementy

39 Zarovnání Zarovnání textu v elementu text-align Zarovnání elementu na střed margin-left: auto; margin-right: auto; Zarovnání elementu doprava margin-left: auto; margin-right: 0px;

40 Vertikální zarovnání Týká se řádkového elementu Řeší vertikální zarovnání prvku Vertical-align: baseline middle sub super text-top text-bottom <procenta> <délka> top bottom

41 Vztahy mezi elementy Parent Rodič Child Dítě An element A is called the parent of element B if B is directly contained by A. Element A je rodičem elementu B, je-li element B přímo obsažen v elementu A An element A is called the child of element B if and only if B is the parent of A. Element A je dítětem elementu B, platí-li že B je rodičem A

42 Vztahy mezi elementy Descendant An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B. Následník, Potomek Element A je následníkem (potomkem) elementu B, platí-li buď (1) že A je dítětem B, nebo (2) že A je dítětem nějakého elementu C, který je následníkem B

43 Následnické (Descendant) selektory Selektor, který se vztahuje pouze na elementy, které jsou následníky jiného elementu K vyjádření následnictví se používá mezera Např: h1 em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy v elementu h1 a to i nepřímo <h1>typografie<em>na</em>internetu</h1> <h1><span>typografie<em>na</em>internetu</span></h1> <h2>typografie<em>na</em>internetu</h2>

44 Následnické (Descendant) selektory Selektor může specifikovat i vícestupňové následnictví a může zahrnovat univerzální selektor Např: div * p {color: blue;} Selektor se týká těch elementů <p>, které jsou vnuky a pozdějšímimi potomky elementu <div>

45 Child selektory Selektor, který se vztahuje pouze na elementy, které jsou dětmi jiného elementu K vyjádření následnictví se používá > Např: H1>em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy přímo v elementu h1 <h1>typografie<em>na</em>internetu</h1> <h1><span>typografie<em>na</em>internetu</span></h1> <h2>typografie<em>na</em>internetu</h2>

46 Adjacent sibling selektory Selektor, který se vztahuje pouze na elementy, které jsou společnými dětmi nějakého elementu s jiným elementem a s tímto elementem sousedí K vyjádření sourozenectví se používá znak + Např: p {text-indent: 2em;} h1+p {text-indent: 0em;}!!!Nefunguje v MSIE 6 V MSIE 7,8 pouze ve standardovém modu (správný doctype)

47 Atributové selektory Selektor, který se vztahuje pouze na elementy, které mají přiřazenu hodnotu danému atributu K vyjádření vztahu se používá [atribut] nebo [atribut=hodnota] Např: h1[title] {color: red;}!!!nefunguje v MSIE 6

48 Pseudoelementy :first-line Vztahuje se na první řádek nějakého elementu Např: p:first-line { font-variant: small-caps; } :first-letter Vztahuje se na první písmeno nějakého elementu

49 Tabulky U tabulek často využijete různé typy zarovnání Dva modely tvorby okrajů tabulky border-collapse: collapse separate border-spacing (pro separate) Pro okraje elementů tabulky lze použít standardní vlastnosti border margin padding

50 Obtékané elementy Element může být nastaven tak, že jej budou následující elementy obtékat vlastností float: left right none Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none left right both

51 Vizuální formátovací model Každý element vytvoří nula nebo více boxů obdélníků, které se podle daných pravidel skládají a tvoří vzhled dokumentu

52 Vybrané typy boxů Block Inline (viz příklad 1) Run-in Typ boxu, který bude vytvořen určuje vlastnost display: inline block list-item run-in

53 Typy boxů

54 Typy boxů v MSIE

55 Příklad použití inline boxu a { border: 1px red dashed; background-image: url(external.png); background-position: right; background-repeat: no-repeat; padding-right: 15px; }

56 Skrytí elementu display: none schová element a nevyhrazuje pro něj prostor visibility: hidden element normálně existuje, alokuje prostor, ale obsah není vidět

57 Width a šířka boxu Vlastnosti nastavení šířky a výšky elementu (width, height) se týkají pouze vlastního obsahu Šířka a výška boxu jsou dány připočtením 2* (margin + padding + border)

58 Outline (CSS 2.0) Např: p { outline:#00ff00 dotted 1px; } Kreslí ještě další linku okolo border

59 Pružný design Design stránky s proměnlivou šířkou, která se přizpůsobí šířce okna Problém 1: při příliš širokém okně jsou řádky velmi dlouhé a špatně se čtou Řešení: vlastnost max-width maximální šířka elementu Podobně i min-width min-height max-height MSIE jen ve standardovém módu

60 Obtékané elementy Element může být nastaven tak, že jej budou následující elementy obtékat vlastností float: left right none Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none left right both

61 CSS pozicování Absolutní nebo relativní nastavení pozice elementu Vlastnost position, nabývá hodnot static implicitní chování relative posun oproti standardnímu umístění absolute přesná specifikace pozice vzhledem k obsahujícímu bloku fixed specifikace vzhledem k oknu prohlížeče (IE jen ve std režimu!!!)

62 Určení pozice Vlastnosti top horní okraj left levý okraj bottom spodní okraj right pravý okraj Hodnota auto procenta% délka

63 Relativní určení pozice #outer { color: red } #inner { color: blue } #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

64 Absolutní určení pozice element { position: absolute; top: 0px; left: 0px;} Prvek se umístí přímo na souřadnice zadané nejčastěji jako [top, left] Počátek souřadnic je levý horní okraj nejbližšího nadřazeného elementu s position jinou než static

65 Vrstvení elementů Pozicované elementy se mohou překrývat Jejich vrstvení lze ovlivnit vlastností z-index: číslo

66 Pružné logo Šířka stránky se přizpůsobuje prohlížeči, ale logo zůstává fixní Řešení: logo implementujeme jako pozadí elementu <div> <img src="logo.gif" border="0" alt="" width="754" height="144" /> </div> <div class="hlavicka"> </div>.hlavicka { background-image : url(logo.gif); background-repeat : no-repeat; background-position : left; height : 144px; }

67 CSS rozlišení prohlížečů triky( hacks ) Využití nedostatků v podpoře CSS standardu <head> <style type="text/css"> #alpha {width: 170px; height: 113px; filter:progid:dximagetransform.microsoft. AlphaImageLoader(src='alpha.png', sizingmethod='scale')} body>#alpha { background-image: url(alpha.png); background-repeat: no-repeat; } </style> </head> <body bgcolor="#ffcccc"> <img id="alpha" alt="transparant PNG" width="170" height="113" src="prazdny.gif" /> </body>

68 CSS rozlišení prohlížečů Podmíněné komentáře HTML <link rel="stylesheet" href="styly.css" type="text/css" />

69 Média v CSS Aplikace různých stylů podle média <LINK REL="stylesheet" href="styly.css" type="text/css" media="screen"> <LINK REL="stylesheet" href="styly_tisk.css" type="text/css" media="print"> <STYLE type="text/css" media="screen">... styly pro obrazovku... </STYLE> <STYLE type="text/css" media="print">... styly pro tisk... </STYLE>

70 Média v CSS Aplikace různých stylů podle média <STYLE type="text/css screen { BODY { margin: 1em; background: red; color: white } print { BODY { margin: 1.5cm; background: tansparent; color: black } } </STYLE>

71 Typy médií all aural braille všechny typy médií; styly definované v sekci uvozené media="all" budou použity (pokud je to možné) na všech typech výstupních zařízení pro hlasové syntezátory (zvukový výstup). Viz samostatnou kapitolu věnovanou zvukovým CSS dále. pro braillovská taktilní výstupní zařízení (slepecký dotykový "displej") embossed pro braillovské tiskárny handheld print pro kapesní počítače (typicky displej s nízkým rozlišením, nízká přenosová rychlost) pro stránkový tisk a pro náhledu tisku na obrazovce. Viz samostatnou kapitolu věnovanou stylům pro tisk. projection screen tty tv pro výstup na promítací zařízení (projektory, tisk na průsvitný materiál atd.). Viz kapitolu věnovanou stylům pro tisk. pro výstup na barevnou obrazovku počítače pro zařízení používající síť znaků pevné šířky (neproporciální písmo) - dálnopisy, terminály atd. Ve stylech pro zařízení typu tty by se neměly používat pixelové jednotky [px]. pro televizní obrazovky (nízké rozlišení v barvě, omezené možnosti pohybu po stránce, možnost zvukového výstupu)

72 CSS3 prvek širší rodiny HTML5 technologií stále ve vývoji, moderní prohlížeče však částečně podporují vývojové vlastnosti s vendor prefixy -moz- (Mozilla, potažmo celé jádro Gecko) -webkit- (Safari, Google Chrome a další prohlížeče na jádře Webkit) -o- (Opera) -ms- (IE9) 72

73 Kulaté rohy border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 73

74 Gradient např. background-image: -moz-linear-gradient(top, #aa0000 0%, #ffffff 100%); široké možnosti lineárních gradientů do budoucna i radiální gradienty složitá syntaxe generátory 74

75 Stín textu text-shadow: 1px 1px 2px #FF0000; posun X posun Y velikost stínu (rozmytí) barva box-shadow: 5px 5px 10px #000; -webkit-box-shadow: 5px 5px 10px #000; -moz-box-shadow: 5px 5px 10px #000; 75

76 Pozadí Více pozadí u jednoho elementu background: url('left.jpg') top left no-repeat, url('right.jpg') top right no-repeat, url('middle.jpg') top center repeat-x; Velikost obrázku pozadí background:url(obrazek.png) bottom right no-repeat; -moz-background-size: 100px 100px; -o-background-size: 100px 100px; -webkit-background-size: 100px 100px; background-size: 100px 100px; 76

77 Barvy s alfa kanálem color: rgba(200, 54, 54, 0.5); color: hsla(200, 54, 54, 0.5); 77

78 Media queries Pokročilejší možnosti úpravy stylu podle schopností zobrazovacího zařízení třeba šířky <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> podrobnosti např. 78

79 CSS3 Atributové selektory E[att^= val ] Element E, jehož hodnota atributu začíná val. E[att$= val ] Element E, jehož hodnota atributu končí val. E[att*= val ] Element E, jehož hodnota atributu obsahuje val. 79

80 CSS3 Pseudotřídy E:root Vybere kořenový element daného dokumentu. V HTML to tedy vždy bude <html>. Jediný rozdíl: :root má větší specificitu než klasické html. Podporu nabízí všechny prohlížeče kromě IE. Do IE přináší podporu až IE9. E:empty Vybere prázdný element. Např. tedy prázdný <span></span>. Podporu znovu nabízí všechny prohlížeče kromě IE8-. E:target Vybere element, který cílíme v URI. Takže když odkazujeme konkrétní část dokumentu přes dokument.html#cast-dokumentu, tak ji můžeme uživateli zvýraznit. Podporu nabízí Mozilla, Webkit, IE9 a částečně i Opera (implementace má drobné chybky). 80

81 CSS3 Pseudotřídy E:enabled x E:disabled Vybere element formuláře, do kterého je povolené/zakázané zapisovat. Podporu nabízí znovu všechny prohlížeče kromě IE8-. E:checked Vybere checkbox, který je zaškrtnutý. Podpora je stejná jako u :enabled a :disabled. E::selection Když vybíráte text myší, tak se nějakým způsobem zvýrazňuje. Typicky podbarvuje nějakou barvou. Pomocí ::selection to můžeme ovlivnit. Podporu nabízí znovu všichni kromě IE8-, u Mozilly musíte použít -moz-::selection. E:not(s) Vybere element E, který neodpovídá jednoduchému selektoru s. Podporu nabízí všichni kromě IE8-. E:last-child, E:only-child CSS2 přinesla :first-child, který vybere prvního potomka daného elementu, CSS3 zavádí :last-child, který vybere posledního potomka. :only-child pak vybere jediného potomka daného elementu. Podpora je standardně všude kromě IE8-. 81

82 CSS3 Pseudotřídy E:first-of-type x E:last-of-type x E:only-of-type Vybere daný typ elementu, který splňuje řečenou podmínku. Tedy buď je první svého typu (např. první prvek seznamu), je poslední svého typu (poslední prvek seznamu) a nebo je jediný svého typu (seznam, který má jen jedno li). Podporují všechny prohlížeče, IE až od verze 9. E:nth-child(n) x E:nth-last-child(n) Element, který je n-tým potomkem svého rodiče. První pravidlo počítá od začátku, druhé od konce. Podpora v prohlížečích není ideální. Nabízí ji IE9, Firefox 3.5+, Safari. Opera má problémy s :nth-child(n). E:nth-of-type(n) x E:nth-last-of-type(n) Element, který je n-tým svého typu. První pravidlo počítá od začátku, druhé od konce. Podpora je stejná jako u :nth-child(n). S čím můžeme u předchozích selektorů kouzlit, je parametr n. Tam totiž můžeme dosadit matematickou operaci, dle které se pak spočítá, co to vlastně cílí. Například tedy pomocí p:nth-child(5n+1) mohu vybrat první odstavec na stránce a pak každý o pět dál (tedy první, šestý, jedenáctý, ). Kromě číselných operací tam také lze dosadit dvě klíčková slova odd a even, tedy lichý a sudý, což logicky bude vybírat každý lichý, či každý sudý element. E ~ F 82

83 CSS Frameworky Základ pro tvorbu návrhu Frameworky Blueprint YUI GS Pěkný článek o CSS Frameworcích 83