Leading the Web to Its Full Potential... W3C Lukáš Masopust 2012.

Prezentace na téma: "Leading the Web to Its Full Potential... W3C Lukáš Masopust 2012."— Transkript prezentace:

1 Leading the Web to Its Full Potential... W3C Lukáš Masopust 2012

2 Vývoj CSS I. 1990 Tim Berners-Lee – první návrh oddělení formátovaní a struktury 1995 Hakon Wium Lie - Cascading HTML Style Sheets. 1996 – CSS level 1 – definuje styl dokumentu a vizuální podobu 1998 – CSS level 2 – styly pro další média: tiskový výstup, hlas…

3 Vývoj CSS II. 1999 – nejrozšířenější prohlížeče podporují CSS1 2004 – CSS2: oprava chyb a nová definice výšky a šířky 2011 – CSS2 Revision 1 - dokončeno 2002 – počátky CSS3 2011 – Media Queries, color module,…

4 Důvody vzniku I.Kvalitnější zobrazovací technologie klady větší nároky na estetičnost HTML dokumentu II.Oddělení formátování od struktury III.Zkrácení doby načítání IV.Zjednodušení realizace grafické stránky HTML dokumentu V.Nutnost určení různých stylů pro různá média

5 Podpora v prohlížečích CSS2 není ještě zcela implementována všemi prohlížeči Každý prohlížeč obsahuje nějaké chyby v implementaci Prohlížeče zavádí vlastní vlastnosti, jejiž použití vytváří nevalidní kód Aktualizace prohlížečů – mnoho verzí s různými schopnostmi

6 Syntaxe a sémantika Dědičnost stylových vlastností od rodičovského prvku body {font-size:11px;} p {color:#00C} body {font-size:11px;} p {color:#00C} p a {color:#C00} Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček...

7 Začlenění do HTML dokumentu 1. 2. Stylová pravidla 3.<link rel=“stylesheet“ href =“url stylového předpisu“ type=“text/css“ title=“pojmenování“ media=“cílové médium“> Pozn: Značky a se vkládají do hlavičky HTML stránky

8 Deklarace stylů Přímá deklarace style=“deklarace 1 ;deklarace 2 ;deklarace 3 “ Pomocí Selektorů selektor 1, selektor 2 { deklarace1;deklarace2 } kde: deklarace - je dvojice vlastnost: hodnota selektor - určuje prvky, na které se mají stylové vlastnosti použít

9 Typy selektorů I. Jednoduchý selektor A {…} /* platí pro všechny značky A*/ A [href] {…} /* jen s parametrem href */ A [href =“ hodnota“] {…} /* = rovná se (přesně) */ A [class ~=“ hodnota“] {…} /* ~= vyskytuje se v seznamu mezerou oddělených hodnot*/ A [lang |= ““] {…} /* začíná v seznamu pomlčkou oddělených hodnost */

10 Typy selektorů II. Řetězec jednotlivých selektorů div table tbody tr td p a [href]:hover {color:#C00} Kombinované selektory A B mezera: následník (B je obsažen v A) A>B větší než: potomek (B je potomkem svého rodiče A) A+B plus: nejbližší sourozenec (A a B jsou obsaženy ve stejném prvku právě v tomto pořadí (tj. mají stejného rodiče a A je bezprostřední předchůdce B)) Pozn: mezera, >, + se nazývají kontextové kombinátory

11 Třídy a indentifikátory Div#menu {width:100%} /* lze psát i #menu */ Div#menu ul {margin:0;padding:0} Div#menu li {display:block}.podmenu {background-color:#C00} /* lze psát i li.podmenu */

12 Pseudotřídy (pseudo-classes ) Aplikují se na neexistující prvky a jen při určité nastalé události, která je dána typem pseudotřídy. x: link - každý prvek X který je odkazem jehož cíl ještě nebyl navštíven x: visited - každý prvek X který je odkazem jehož cíl již byl navštíven x: lang ( c ) - každý prvek X který má přirozený jazyk c (způsob určení přirozeného jazyka c specifikuje značkový jazyk dokumentu) x: first-child - každý prvek X který je prvním potomkem nějakého jiného prvku (prvním potomkem svého rodiče) x: hover - každý prvek X který přes nějž právě přechází kurzor x: active - každý prvek X který byl právě vybrán x: focus - každý prvek X který má právě focus

13 Pseudoprvky (Pseudo-elements) Aplikují se na neexistující prvky a jen při určité nastalé události, která je dána typem pseudoprvku. p: first-line – určení stylu 1. řádky v odstavci p: first-letter – určení stylu 1. písmene v odstavci x: before – přidá text před prvek X x: after – přidá text za prvek X Pozn: : before a :after se nejčastěji používají v kombinaci s funkcí content. Zatím nejsou zcela podporovány všemi prohlížeči.

14 Média klíčové slovocharakteristika médiaklíčové slovocharakteristika média allvšechna zařízeníscreen po čítačové obrazovky (primárně barevné obrazovky) speech (aural*) hlasov é (řečové) syntetizéry handheld mal á přenosná zařízení (typicky s malou, často monochromatickou obrazovkou a nižší rychlostí přenosu dat) braille braillova dotekov á zařízení (zařízení umožňující hmatové vnímání braillova písma pro nevidomé) tv za řízení typu televize (nízké rozlišení, omezená možnost posouvání obsahu, možnost zvukového výstupu) embossed tisk árny pro nevidomé (stránkové braillovy tiskárny) projection projektory (nap říklad světelné projektory) print str ánkované materiály a dokumenty zobrazované v módu náhledu pro tisk (typicky tiskárny) tty za řízení s omezenými zobrazovacími možnostmi (typicky textové terminály)

15 Typy hodnot a jednotek I. Číslo celé – 0, 1, +10, -132, -1 reálné – 0, -1.2464, 4.12 Procento celé číslo – +120%, -10% Barva #hex – #FFFFFF, #FFF rgb() – rgb(255,255,255), rgb(100%, 0%,0%)

16 Typy hodnot a jednotek II. Velikost Absolutní jednotky – mm milimetry – cm centimetry – in palce – pt point (typografický bod 1pt = 1/72 in) – pc pica (1 pc = 12 pt) Relativní jednotky – em stupeň aktuálního písma – ex střední výška aktuálního písma – px pixel (obrazový bod) Pozn: 4pt = 3px při rozlišení 1024 x 768 px

17 Typy hodnot a jednotek III. URI url(uri) body {background: url(pozadi.jpg)} Úhel deg stupeň 90deg grad grad -100grad rad radián 2.34rad Doba milisekundy 20ms sekundy 2s Frekvence Hz Hertz 10hz kHz kiloHertz 4.2khz

18 CSS3 Grid Layout Průhledné barvy, složená pozadí a kulaté okraje Media Queries – Změna stylu podle rozlišení. – Změn přístupu k verzi pro tisk Grafické filtry – Statické a dynamické Pozadí, sloupcové rozložení stránky…

19 PŘEDNÁŠKA JE PŘENOS INFORMACÍ Z POZNÁMEK PŘEDNÁŠEJÍCÍHO DO POZNÁMEK STUDENTŮ, ANIŽ BY PROŠLY JEHO ČI JEJICH MYSLÍ. Názor generací studentů