1 CSS – Kaskádové styly. 2 Pravidlo CSS selektor {deklarace} h1 {text-align: center; color: blue} h2, h3 {margin: 10px; font-style: italic; border: 1px}

Prezentace na téma: "1 CSS – Kaskádové styly. 2 Pravidlo CSS selektor {deklarace} h1 {text-align: center; color: blue} h2, h3 {margin: 10px; font-style: italic; border: 1px}"— Transkript prezentace:

1 1 CSS – Kaskádové styly

2 2 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 dokumentuurčí jejich formátovací vlastnosti kontextový selektor pro uvnitř

3 3 Pravidlo CSS – selektory p.novinka {letter-spacing: 0.3em ; background-color: green; }.novinka {background-image: url(new.png); } generická třída třída Erant in quadam civitate rex et regina. Regina #zahlavi {font-weight: bolder; } styl pro jedinečný výskyt elementu ve stránce

4 4 Pravidlo CSS – selektory pseudotřída (vybírá pouze určité výskyty elementu) a:link { color: red} a:visited { color: blue} a:active { color: lime} a:hover { color: cyan} pseudoelement (vybírá jen části elementu) p {font-size: 12pt} p:firstletter { font-size: 200%; float: left} p:firstline { font-variant: small-caps}

5 5 Dědičnost Hodnoty některých vlastností se dědí na obsažené elementy: p.novinka {color: blue} Hiantibus Filium Diu ac Pressule Iamque proximas civitates et attiguas regiones fama pervaserat deam. 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)

6 6 Připojení CSS k dokumentu <!-- h1, h2, h3, p { text-align: left } h1.zeleny { color: #00FF00 } --> II. V pro 1 dokument: I. Odkazem z dokumentu na sdílený styl: … III. Přímo pro výskyt elementu: styl.css @import url(http://server/basic.css); h1, h2, h3, p { text-align: left; } /* specialni nadpis */ h1.zeleny { color: #00FF00; }

7 7 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 a dle pořadí uvedení elementů, implicitní hodnota dle prohlížeče. (pravidla v importujícím stylu mají přednost před importovanými)

8 8 Typy vlastností CSS Písmo (font-*) Barvy a pozadí (color, background-*) Text (text-*, …) Box (margin-*, padding-*, border-*, …) Řízení pozice Klasifikační vlastnosti

9 9 Vlastnosti písma 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ů (všechny se dědí) font-style: normal | italic | oblique italikasešikmený font-variant: normal | small-caps font-weight: normal | bold | bolder | lighter | 100 | 200 | … | 900 400 700 font-size: | | | 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

10 10 Vlastnosti barev a pozadí color: em { color: red } em { color: #f00 } em { color: #ff0000 } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } červenou zadáte jedním z 5 způsobů: background-color: | transparent (dědí se jen color) center right bottom left top … 50% 100% 50% 2cm 5cm 50px pomocí procent a délek nebo pomocí slov background-image: | 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

11 11 Vlastnosti textu (nedědí se text-decoration, vertical-align) word-spacing: normal | letter-spacing: normal | text-decoration: none | underline || overline || line-through || blink vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | text-transform: none | capitalize | uppercase | lowercase text-align: left | right | center | justify text-indent: | line-height: normal | | | I B B vertikální pozice inline elementu vzhledem k rodiči

12 12 Vlastnosti boxů margin: | | auto (margin-top -right -bottom -left) implicitně 0 nadřazeného blokového elementu padding: | | auto (padding-top -right -bottom -left) border-width: | thin | medium | thick {1,4} border-color: {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) (nedědí se) width height

13 13 Plovoucí elementy width: | | autoB height: | | autoB (nedědí se) 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

14 14 Řízení pozice (nedědí se) position: static | relative | absolute | fixed | inherit top: auto | | | inheritP right, bottom klasický box v normální pozici určují umístění levého horního rohu obsahu elementu (viz box model) 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 pozice určí absolutní pozici elementu vzhledem k jeho nadřazenému blokovému elementu, na normální pozici nezabírá žádné místo jako absolutní poziční systém, ale element se nehýbe při scrollování P P left: alternativně umístění pravého dolního rohu

15 15 Klasifikační vlastnosti display: block | list-item | inline | none img { display: none} white-space: normal | pre | nowrap několik mezer, tabů, newlinů se smrskne vždy do 1 mezery chování jako u (preformatted) elementu zalomení řádku se neděje automaticky dle šířky okna, ale jen explicitně pomocí elementu list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none list-style-image: | none list-style-position: outside | inside list-style-position: || || visibility: inherit | visible| hidden z-index: auto | overflow: none | clip | scroll pokud je obsah moc veliký, má přetéci mimo vyhrazenou plochu, být oříznut, nebo scrollovat? B P P (dědí se visibility, white-space a list-style-*) L L L L

16 16 Jednotky délky pro CSS Relativní –px, –em, ex Absolutní –cm, mm, –in (2.54 cm), pt (1/72 in), pc (12 pt)

17 17 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