kaskÁdovÉ styly 3
DESCRIPTION
KASKÁDOVÉ STYLY 3. 3. DÉLKOVÉ JEDNOTKY. DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY MUSÍ BÝT PŘIPOJENA IHNED ZA ČÍSLEM (TEDY BEZ MEZERY). - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/1.jpg)
KASKÁDOVÉ STYLY 3
![Page 2: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/2.jpg)
2
3. DÉLKOVÉ JEDNOTKY
DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY MUSÍ BÝT PŘIPOJENA IHNED ZA ČÍSLEM (TEDY BEZ MEZERY). PROCENTA SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA, ZA KTERÝMI IHNED NÁSLEDUJE ZNAK %. HODNOTY ZADANÉ JAKO PROCENTO SE RELATIVNĚ VZTAHUJÍ K NĚJAKÉ JINÉ HODNOTĚ, OD KTERÉ SE ODVODÍ ABSOLUTNÍ VELIKOST. POKUD POUŽÍVÁME PROCENTA, MUSÍME SI VŽDY UVĚDOMIT, OD KTERÉ HODNOTY SE BUDE ABSOLUTNÍ VELIKOST ODVÍJET. VĚTŠINOU SE JEDNÁ O ŠÍŘKU ELEMENTU.
![Page 3: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/3.jpg)
3
S OHLEDEM NA ČITELNOST STRÁNEK SE SPÍŠE DOPORUČUJE POUŽÍVAT RELATIVNÍCH ROZMĚRŮ. VĚTŠINA PROHLÍŽEČŮ DOVOLUJE UŽIVATELI NASTAVIT SI VLASTNÍ VELIKOST TEXTU (V IE: ZOBRAZIT - VELIKOST TEXTU). POKUD JSOU OVŠEM NA STRÁNCE NASTAVENY ABSOLUTNÍ ROZMĚRY PRO TEXT, UŽIVATEL JE ODKÁZÁN NA VELIKOST TEXTU DEFINOVANOU AUTOREM.
jednotka popis
em Výška aktuálního písma. Odpovídá šířce písmena 'M'
ex Výška písmene 'x'
px Pixely - 1 pixel = 1 bod obrazovky
![Page 4: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/4.jpg)
4
jednotka popis
in Palce - 1 in = 2,54 cm = 72 pt
cm Centimetry
mm Milimetry - 10 mm = 1 cm
pt Body (pity) - 1 pt = 1/72 in = 1/12 pc
pc Body (pica) - 1 pc = 12 pt
![Page 5: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/5.jpg)
5
![Page 6: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/6.jpg)
6
4. BARVY
Při specifikování barev máme několik možností. Tou první je použití jména barvy nebo příslušného HEXa kódu. Další možností je zapsat barvu přímo v RGB pomocí červené, zelené a modré složky barvy.
#rgb zkrácený zápis např. #f00 je červená
#rrggbb úplný zápis např. #ffff00 je žlutá
rgb(r, g, b) r, g, b jsou od 0 do 255
rgb(r%, g%, b%) r, g, b jsou od 0 do 100 (%)
![Page 7: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/7.jpg)
7
5. DRUHY ELEMENTŮ
Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. h1 a p). Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádná zalomení řádek (např. strong). Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. img a object).
![Page 8: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/8.jpg)
8
6. RODINY PÍSEM
Při zadávání písma je nutné myslet na to, že ne všichni čtenáři budou mít příslušné písmo na svém počítači nainstalováno (např. s ohledem na platformu). Proto se na závěr definice použitých písem používá zápis rodiny písem, do kterých použitý font patří. Pokud tedy prohlížeč definované písmo neumí zobrazit (není nainstalováno), sáhne si po standardním písmu, jež spadá do definované rodiny.V následující tabulce jsou některé rodiny písem, které lze použít při definici fontu.
serif patková písma (např. Times New Roman)
sans-serif bezpatková písma (např. Arial)
coursive kurzíva
fantasy ozdobná písma
monospace neproporcionální písma (např. Courier New)
![Page 9: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/9.jpg)
9
7. VLASTNOSTI CSS - PÍSMO
font - family
p {font-family: serif}
p {font-family: Times, serif}
p {font-family: cursive}
p {font-family: fantasy}
p {font-family: monospace}
p {‘Times New Roman’}
Vlastnost font-family nastavuje druh písma. Možné je i použití více definic, pro případ, že některé písmo nebude k dispozici:
style="font-family: Verdana, Arial, Helvetica"
![Page 10: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/10.jpg)
10
font - style
p {font-style: italic}
p {font-style: oblique}
p {font-style: normal}
Normální, kurzíva, skloněný font-style: normal | italic | oblique
![Page 11: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/11.jpg)
11
font - variant
p {font-variant: small-caps}
p {font-style: normal}
Text kapitálkami tj. Velká písmena o velikosti malýchfont-variant: normal | small-caps
![Page 12: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/12.jpg)
12
Nastaví tučnost textu
font-weight: normal | bold | bolder | lighter | 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight
![Page 13: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/13.jpg)
13
font-size
![Page 14: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/14.jpg)
14
Umožňuje nastavit vše předchozí v jediné vlastnosti
font: tloušťka velikost písmo stylstyle="font: bold 10px Verdana italic"
Hodnoty musejí dodržovat své pořádí a vždy musí být obsažena hodnota pro tloušťku (jinak budou některé vlastnosti ignorovány)
font
![Page 15: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/15.jpg)
15
8. VLASTNOSTI CSS - BARVY
Nastavuje barvu textu.
Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO), nebo pomocí názvů (black)
style="color: red"
color
![Page 16: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/16.jpg)
16
Nastavuje barvu pozadístyle="background-color: white"
Základem dobrého webu je nastavení barvy pozadí i v případě, že má být bílá (implicitní nastavení).
Někteří návštěvníci mají implicitní barvu pozadí změněnou.
Černý text na černém pozadí... není dobře vidět.
background-color
![Page 17: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/17.jpg)
17
Obrázek jako pozadí prvku
background-image: url(cesta k obrázku)
style="background-image: url('images/pozadi.gif')"
background-image
![Page 18: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/18.jpg)
18
Opakování obrázku na pozadí donekonečna, jen jednou, podle osy x a y
repeat | no-repeat | repeat-x | repeat-y
style="background-image: url(images/js.gif); background-repeat: repeat-y"
Pozadí se bude opakovat jen vertikálně (osa y). Když byste chtěli zobrazit pozadí jen jednou, použijte hodnotu no-repeat
background-repeat
![Page 19: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/19.jpg)
19
Pozadí, které se neposune při rolování stránky.
background-attachment: scroll | fixed Hodnota fixed obrázek fixuje, připichuje na stránku.
Obrázek se při rolování neposunuje
background-attachment
![Page 20: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/20.jpg)
20
Pozice pozadí
background-positon:top| center| bottom| left center| right| 10px| 10%| 10ptstyle=" background-image: url(images/pozadi.gif); background-repeat: no-repeat;
background-position: right 0px; top 50px"
background-position
![Page 21: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/21.jpg)
21
Nastaví pozici horního rohu objektu na pozici 0;0 pomocí parametrů letf a top nastavíme pozici
od levého a horního okrajeposition:absolute;
left: xxx; top: xxxstyle="position: absolute; left: 603px; top: 400px" Takový prvek bude vzdálen 400px od horního okraje stránky a 603px od levého.
position:absolute
8. VLASTNOSTI CSS - POZICE
![Page 22: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/22.jpg)
22
Často se využívá u obrázků jsou-li odkazem, po najetí kurzoru se posunou dolů
position: relative; top: xxx; left: xxx<style>A:hover{position: relative; top: 2px}</style>
position:relative
![Page 23: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/23.jpg)
23
Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývalyz-index: hodnota<span style="position: absolute;z-index: 1; color: red"> ------
</span> <span style="color: blue; border: 1px solid gray;background-color:black">
<strong>ahoj</strong> </span>
0000000000000 ahoj
z-index
![Page 24: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/24.jpg)
24
8. VLASTNOSTI BAREV
![Page 25: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/25.jpg)
25
9. VLASTNOSTI TEXTU
![Page 26: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/26.jpg)
26
10. VLASTNOSTI BOXŮ 1
![Page 27: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/27.jpg)
27
10. VLASTNOSTI BOXŮ 2
![Page 28: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/28.jpg)
28
10. VLASTNOSTI BOXŮ 3
![Page 29: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/29.jpg)
29
11. KLASIFIKAČNÍ VLASTNOSTI
![Page 30: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/30.jpg)
30
11. ŘÍZENÍ POZICE
![Page 31: KASKÁDOVÉ STYLY 3](https://reader033.vdocuments.site/reader033/viewer/2022051316/56814541550346895db20ce1/html5/thumbnails/31.jpg)
End of Lecture
Good Night.