1 / 19

CSS – Kaskádové styly

CSS – Kaskádové styly. Leading the Web to Its Full 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

kyra-wilson
Download Presentation

CSS – Kaskádové styly

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS – Kaskádové styly 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 • Kvalitnější zobrazovací technologie klady větší nároky na estetičnost HTML dokumentu • Oddělení formátování od struktury • Zkrácení doby načítání • Zjednodušení realizace grafické stránky HTML dokumentu • 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;} Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček... body {font-size:11px;} p {color:#00C} Šla Nanynka do zelí, natrhala lupení. Přišel za ní Jeníček... 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 • <prvek style=“Stylový předpis“> • <style type=“text/css“ media=“Cílové médium“> Stylová pravidla</style> • <linkrel=“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

  8. 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

  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>Bvětší než: potomek (B je potomkem svého rodiče A) A+Bplus: 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 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 */

  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: :beforea :afterse nejčastěji používají v kombinaci s funkcí content . Zatím nejsou zcela podporovány všemi prohlížeči.

  14. Média

  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 • gradgrad -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. To je vše přátelé… 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ů

More Related