Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

Kaskadové styly CSS • 1996 • Cascading Style Sheets (tabulky kaskádových stylů) • Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML

Význam CSS • • • • •

Šiřší formatovací možnosti Oddělení struktury a stylu Vyšší přístupnost dokumentu Dynamická práce se styly Formátování XML dokumentů

Verze CSS • CSS1 – barva textu, pozadí – Margin, padding, mezery mezi slovy, pismeny, radky, obrazky, odkazy

• CSS2 – Pozicovani fixni, absolutni relativni, stin

• CSS3

Vstupní zařízení media=“hodnota" • • • • • • • • • •

all - Všechny typy výstupních zařízení braille - Dotyková zařízení s Braillovým písmem embossed - Platický tisk na tiskárně Braillovým písmem handheld - Kapesní počítač, PDA print - Tisk na papír (a náhled tisku na monitoru) projection – Data projektorem promítaný obraz screen - Obrazovka počítače aural – čtecí zařízení tty - Znakový výstup neproporčním typem písma (dálnopis, terminal) tv - Televizní obrazovky apod.

Možnosti CSS • ACID1, ACID2 a ACID3 test Schopnosti prohlížečů správně vykreslit webové stránky

• vytvořené podle standardů http://www.acidtests.org/ • Lampa http://css-lampa.mraveniste.org/ • Tužky http://www.designdetector.com/tips/C

Připojení CSS do HTML <style type="text/css"> @import url(soubor.css) <style type="text/css"> styl psaný v jazyce CSS

první odstavec na stránce bude zobrazen modře

Více CSS na jedné stránce <style type="text/css” media="screen,projection"> @import "/monitor.css";

<style type="text/css" media="print"> @import url(/print.css);

Nebo



Terminologie • • • • • • • •

Stylový předpis – stylesheet Definice – satement Sada pravidel – rules At-pravidlo – at-rule Selektor – selektor Deklarace – declaration Vlastnost – property Hodnota - value

Klíčová slova • Bez hačků a čarek – anglický • Bez uvozovek Např. width: auto; border: none; Font-family: serif; background: red;

CSS syntaxe Styl se skládá ze dvou částí: selektor a deklarace /*Typove selektory:*/ P{ Color:white; Blackground-color:white } h1,h2,h3,h4 {

Selektor třídy (class) Možné použít v HTML opakovaně v CSS .modre {color:blue} nebo h1.modre {color:blue} v HTML

modry text

Selektor identifikátoru (ID) ID lze použít na stránce pouze jednou! v CSS #modre {color:blue} nebo h1.#modre {color:blue} v HTML

modry text

Selektor následníka ID lze použít na stránce pouze jednou! v CSS a img {border:1px} v HTML

Komentář /* komentář*/

Uspořadání selektorů

Pseudo třídy •

:link – vybere odkazy, které ještě nebyly navštívené

•

:visited – vybere již navštívené odkazy

•

:hover – vybere element, který je pod kurzorem myši

•

:active – vybere element, který je aktivovaný uživatelem

•

:focus – vybere element, který má fokus (přijímá vstup z klávesnice)

•

:lang(cs) – vybere elementy v určitém jazyce (v tomto případě v češtině)

Rodičovská pseudotřída ◦ CSS p {color: blue;} p:first -child {color: yellow; }



Relativní jednotky Relativní (relativně k jiné velikosti) • em – velikost přislušného písma • ex – střední výška příslušného písma • px – pixely obrazové body •

Absolutní jednotky • • • •

in palece (1 inch cca 2,54cm) cm – centimetry mm – milimetry pt – typografický body(point) 1pt cca 1/72 palce • Pc – pica; 1pc=12pt

procenta • Udavají poměr velikosti předchůdce, rodiče (%) např. p {font-size: 120%} p {line-height: 120%}

CSS: Jednotky velikostí

Zápis URL v CSS • url(http:\\www.xyz.cz/abc.gif) • url(“http:\\www.xyz.cz/abc.gif”) • url(‘http:\\www.xyz.cz/abc.gif’)

Barvy • • • • • • • • • • • • • • • •

Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow

tyrkysová černá modrá růžová šedá zelená světlozelená hněda tmavomodrá olivově zelená purpurová červená střibrná (světle šedá) šedozelená bílá žlutá

?

Systemové barvy • ActiveBorder - orámování aktivního okna • ActiveCaption – titulek aktivního okna • AppWorkspace – pozadáí hlavního okna aplikace • MenuText – text menu • Atd...

Zadávání barev • EM {color: #f00} /* #RGB */ • EM {color: #ff0000} /* #RRGGBB */ • EM {color: rgb(255,0,0)} /* #RGB */ • EM {color: rgb(100%,0%,0%)} /* #RGB */

Otázky • • • • •

Rozdíl mezi ID a CLASS? Výhody CSS Selektor a deklarace? Typové selektory Vstupní media