CSS – Kaskádové styly Labsky@vse.cz IZI 228
Pravidlo CSS selektor {deklarace} h1 {text-align: center; color: blue} h2, h3 {margin: 10px; font-style: italic; border: 1px} p a { text-decoration: none; font-weight: bold; font-family: helvetica; } vybere 1 nebo více elementů z dokumentu určí jejich formátovací vlastnosti kontextový selektor pro <a> uvnitř <p>
Pravidlo CSS – selektory třída p.novinka {letter-spacing: 0.3em; background-color: green; } .novinka {background-image: url(new.png); } generická třída <p class=“novinka”>Erant in quadam civitate rex et regina.</p> <h1 id=“zahlavi”>Regina</h1> #zahlavi {font-weight: bolder; } styl pro jedinečný výskyt elementu ve stránce
Pravidlo CSS – selektory pseudotřída (vybírá pouze určité výskyty elementu) pseudoelement (vybírá jen části elementu) a:link {color: red} a:visited {color: blue} a:active {color: lime} a:hover {color: cyan} p {font-size: 12pt} p:firstletter {font-size: 200%; float: left} p:firstline {font-variant: small-caps}
Dědičnost Hodnoty některých vlastností se dědí na obsažené elementy: p.novinka {color: blue} <p class=“novinka”>Hiantibus Filium Diu ac <em>Pressule</em> Iamque proximas civitates et attiguas regiones fama pervaserat deam.</p> Dědičné CSS vlastnosti: většina vlastností písma (font-*), barva, horiz. zarovnání textu (text-align), odsazení první řádky odstavce (text-indent), způsob práce s mezerami (white-space) Nedědičné: vlastnosti pozadí (background-*), velikost elementu a okrajů, ohraničení (padding-*, border-*, margin-*) plovoucí vlastnosti (float, clear) podtržení resp. přeškrtnutí textu (text-decoration), vertikální zarovnání textu (vertical-align)
Připojení CSS k dokumentu <link rel="stylesheet" type="text/css" href="http://server/styl.css"> I. Odkazem z <head> dokumentu na sdílený styl: styl.css @import url(http://server/basic.css); h1, h2, h3, p { text-align: left; } /* specialni nadpis */ h1.zeleny { color: #00FF00; <style type="text/css"> <!-- h1, h2, h3, p { text-align: left } h1.zeleny { color: #00FF00 } --> </style> II. V <head> pro 1 dokument: <p style=“text-align:center; color:blue"> … </p> III. Přímo pro výskyt elementu:
Aplikace v kaskádě Autor může uplatnit více stylů, uživatel může teoreticky aplikovat své styly, na element se může vztahovat více pravidel i v rámci 1 stylu Přednost mají: specifičtější pravidla h1 em {color: red} vs. em {color: green;} později uvedená pravidla v pořadí: style atribut, class atribut, pravidla v elementech <style> a <link> dle pořadí uvedení elementů, implicitní hodnota dle prohlížeče. (pravidla v importujícím stylu mají přednost před importovanými)
Typy vlastností CSS Písmo (font-*) Barvy a pozadí (color, background-*) Text (text-*, …) Box (margin-*, padding-*, border-*, …) Řízení pozice Klasifikační vlastnosti
Vlastnosti písma (všechny se dědí) font-family: "new century schoolbook", times, serif generická rodina písma jako poslední alternativa, podporovány jsou: (serif, sans-serif, cursive, fantasy, monospace) jméno (jména) fontů font-style: normal | italic | oblique italika sešikmený font-variant: normal | small-caps font-weight: normal | bold | bolder | lighter | 100 | 200 | … | 900 400 700 font-size: <absolutní velikost> | <rel. velikost> | <jednotky> | <procenta> xx-small | x-small | small | medium | large | x-large | xx-large smaller | larger Procenta a jednotky em a ex se zde vztahují k velikosti textu nadřazeného elementu
Vlastnosti barev a pozadí (dědí se jen color) Vlastnosti barev a pozadí červenou zadáte jedním z 5 způsobů: color: <barva> em { color: red } em { color: #f00 } em { color: #ff0000 } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } background-color: <barva> | transparent background-image: <url> | none table { background-image: url(globus.png) } background-repeat: repeat | repeat-x | repeat-y | no-repeat background-attachment: scroll | fixed background-position: 0% 0% B center center right bottom left top … 50% 50% 100% 100% 50% 2cm 5cm 50px pomocí procent a délek nebo slov
Vlastnosti textu (nedědí se text-decoration, vertical-align) word-spacing: normal | <jednotky> letter-spacing: normal | <jednotky> text-decoration: none | underline || overline || line-through || blink I vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <procenta> vertikální pozice inline elementu vzhledem k rodiči text-transform: none | capitalize | uppercase | lowercase B text-align: left | right | center | justify B text-indent: <jednotky> | <procenta> line-height: normal | <jednotky> | <procenta> | <číslo>
Vlastnosti boxů (nedědí se) implicitně 0 nadřazeného blokového elementu padding: <jednotky> | <procenta> | auto (padding-top -right -bottom -left) margin: <jednotky> | <procenta> | auto (margin-top -right -bottom -left) border-width: <jednotky> | thin | medium | thick {1,4} border-color: <barva> {1,4} border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4} implicitně totožné s color border-(top|right|bottom|left)-width, border-(top|right|bottom|left) height width
Plovoucí elementy (nedědí se) B width: <jednotky> | <procenta> | auto B height: <jednotky> | <procenta> | auto float: none | left | right plavat po levé resp. pravé straně nadřazeného elementu, text bude obtékat (pro inline elementy ruší jejich inline charakter – už nejsou součástí řádku). clear: none | left | right | both počkat na skončení plovoucích elementů vlevo, vpravo, resp. po obou stranách? Puellae supplicatur et in humanis vultibus deae tantae numina placantur, et in matutino progressu virginis et victimis et epulis veneris absentis nomen propitiatur, iamque per plateas et commeantem populi frequenter floribus sertis et solutis adprecantur. Haec honorum Puellae supplicatur et in humanis vultibus deae tantae numina placantur, et in matutino progressu virginis et victimis et epulis veneris absentis nomen propitiatur, iamque per plateas et commeantem populi frequenter floribus sertis solutis adprecantur. float: right clear: both
Řízení pozice (nedědí se) position: static | relative | absolute | fixed | inherit jako absolutní poziční systém, ale element se nehýbe při scrollování klasický box v normální pozici pozice určí absolutní pozici elementu vzhledem k jeho nadřazenému blokovému elementu, na normální pozici nezabírá žádné místo pozice (top, right, bottom, left) určí jen posunutí elementu vzhledem k jeho normální pozici, na normální pozici je stále zabráno místo P top: auto | <jednotky> | <procenta> | inherit P left: určují umístění levého horního rohu obsahu elementu (viz box model) alternativně umístění pravého dolního rohu P right, bottom
Klasifikační vlastnosti (dědí se visibility, white-space a list-style-*) Klasifikační vlastnosti display: block | list-item | inline | none img { display: none} visibility: inherit | visible| hidden P z-index: auto | <číslo> pokud je obsah moc veliký, má přetéci mimo vyhrazenou plochu, být oříznut, nebo scrollovat? P overflow: none | clip | scroll zalomení řádku se neděje automaticky dle šířky okna, ale jen explicitně pomocí <br> elementu B white-space: normal | pre | nowrap chování jako u <pre> (preformatted) elementu několik mezer, tabů, newlinů se smrskne vždy do 1 mezery L list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none L list-style-position: outside | inside L list-style-image: <url> | none L list-style-position: <type> || <position> || <image>
Jednotky délky pro CSS Relativní Absolutní px, em, ex cm, mm, in (2.54 cm), pt (1/72 in), pc (12 pt)
Shrnutí Pravidlo = selektor {vlastnost: hodnota; …} Dědičnost, kaskádovitá aplikace CSS vlastnosti neodpovídají potenciálně podobným formátovacím vlastnostem v HTML (text-align a align, background a background) – konflikty Nepoužívat formátování v HTML pokud lze aplikovat CSS Zejména klasifikační a poziční vlastnosti CSS se vyplatí používat střídmě Ze skriptovacích jazyků můžete hodnoty CSS vlastností dynamicky měnit (dynamické HTML, příště)
Odkazy Stránky demonstrující užitečnost a sílu CSS – inspirace www.csszengarden.com Proč používat styly? http://www.w3schools.com/html/html_whyusehtml4.asp Příklady – formátování textu, layout s plovoucím menu: http://nb.vse.cz/~labsky (sekce CSS) Web Developer plugin do Mozilla Firefox (vygooglete...) Layout stránky, sloupce, galerie s plovoucími obrázky, layout formulářů http://www.alistapart.com/stories/practicalcss/ Sofistikované CSS layouty http://www.alistapart.com/topics/css W3C CSS1 a CSS2 standard http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2
Mapy Příklad použití Yahoo map API: http://lerdorf.com/map Opera XHTML+Voice (X+V): http://my.opera.com/community/dev/voice/ Projekt: multimodální (hlas+GUI) ovládání map [2]