Leading the Web to Its Full Leading the Web to Its Full Potential...Potential...

W3C

Lukáš Masopust 2012

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…

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,…

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 strukturyIII. Zkrácení doby načítání IV. Zjednodušení realizace grafické stránky

HTML dokumentuV. Nutnost určení různých stylů pro různá

média

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

Syntaxe a sémantika

• Dědičnost stylových vlastností od rodičovského prvku

body {font-size:11px;}body {font-size:11px;}

body {font-size:11px;}p {color:#00C}body {font-size:11px;}p {color:#00C}

body {font-size:11px;}p {color:#00C}p a {color:#C00}

body {font-size:11px;}p {color:#00C}p a {color:#C00}

Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček...

Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček...

Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček...

Začlenění do HTML dokumentu1. <prvek style=“Stylový předpis“>2. <style type=“text/css“ media=“Cílové

médium“> Stylová pravidla</style>3. <link rel=“stylesheet“

href=“url stylového předpisu“

type=“text/css“ title=“pojmenování“

media=“cílové médium“>

Pozn: Značky <style> a <link> se vkládají do hlavičky HTML stránky

Deklarace stylůPřímá deklarace

style=“deklarace1;deklarace2;deklarace3“

Pomocí Selektorů

selektor1, selektor2 {deklarace1;deklarace2}kde:

deklarace - je dvojice vlastnost: hodnota

selektor - určuje prvky, na které se mají stylové vlastnosti použít

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 */

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

Třídy a indentifikátory<div id=“menu“><ul>

<li class=“podmenu“><ul>

<li></li><li></li>

</ul></li>

<li></li><li class=“podmenu“>

<ul><li></li><li></li>

</ul></li>

</li></ul></div>

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 */

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 */

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

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.

Médiaklíčové slovo charakteristika média klíčové

slovocharakteristika média

all vš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)

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

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

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 2sFrekvence• Hz Hertz 10hz• kHz kiloHertz 4.2khz

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…

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ů