Post on 01-Jan-2016
description
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)
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ů