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 <html> <head> <title>stránka se styly</title> <link rel="stylesheet" type="text/css" href="soubor.css"> <style type="text/css"> @import url(soubor.css) </style> <style type="text/css"> styl psaný v jazyce CSS </style> </head> <body> <p style="color:blue">první odstavec na stránce bude zobrazen modře </body> </html>
Více CSS na jedné stránce <style type="text/css media="screen,projection"> @import "/monitor.css"; </style> <style type="text/css" media="print"> @import url(/print.css); </style>
Nebo <link rel="stylesheet" type="text/css" href="monitor.css media="screen,projection" /> <link rel="stylesheet" type="text/css" href="tisk.css" media="print" />
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 <h1 class = modre >modry text</h1>
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 <h1 id= modre >modry text</h1>
Selektor následníka ID lze použít na stránce pouze jednou! v CSS a img {border:1px} v HTML <a href=.. ><img src= http://.. alt=.. /></a>
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; } <div> <p>toto je první odstavec příslušného oddílu div. Měl by být napsán žlutým písmem.</p> <p>další odstavec by už měl být napsán modře.</p> </div> <div> <h1>nadpis odstavce</h1> <p>pozor! Tento odstavec bude napsán modře, neboť prvním dítětem oddílu div je tentokrát nadpis h1!!!</p> </div>
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 tyrkysová Black černá Blue modrá Fuchsia růžová Gray šedá Green zelená Lime světlozelená Maroon hněda? Navy tmavomodrá Olive olivově zelená Purple purpurová Red červená Silver střibrná (světle šedá) Teal šedozelená White bílá Yellow ž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