KASKÁDOVÉ STYLY 3. 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.

Prezentace na téma: "KASKÁDOVÉ STYLY 3. 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."— Transkript prezentace:

1 KASKÁDOVÉ STYLY 3

2 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.

3 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. jednotkapopis emVýška aktuálního písma. Odpovídá šířce písmena 'M' exVýška písmene 'x' pxPixely - 1 pixel = 1 bod obrazovky

4 4 jednotkapopis inPalce - 1 in = 2,54 cm = 72 pt cmCentimetry mmMilimetry - 10 mm = 1 cm ptBody (pity) - 1 pt = 1/72 in = 1/12 pc pcBody (pica) - 1 pc = 12 pt

5 5

6 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 (%)

7 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).

8 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)

9 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"

10 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

11 11 font - variant p {font-variant: small-caps} p {font-style: normal} Text kapitálkami tj. Velká písmena o velikosti malých font-variant: normal | small-caps

12 12 Nastaví tučnost textu font-weight: normal | bold | bolder | lighter | 100, 200, 300, 400, 500, 600, 700, 800, 900 font-weight

13 13 font-size

14 14 Umožňuje nastavit vše předchozí v jediné vlastnosti font: tloušťka velikost písmo styl style="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

15 15 8. VLASTNOSTI CSS - BARVY Nastavuje barvu textu. Nastavit barvu můžete pomocí hexadecimálního tvaru (#OOOOO),hexadecimálního nebo pomocí názvů (black) style="color: red" color

16 16 Nastavuje barvu pozadíbarvu 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

17 17 Obrázek jako pozadí prvku background-image: url(cesta k obrázku) style="background-image: url('images/pozadi.gif')" background-image

18 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

19 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

20 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

21 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 okraje position: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

22 22 Často se využívá u obrázků jsou-li odkazem, po najetí kurzoru se posunou dolů position: relative; top: xxx; left: xxx A:hover{position: relative; top: 2px} position:relative

23 23 Velká vychytávka, pomocí z-index můžete nastavit, aby se objekty překrývaly z-index: hodnota ------ ahoj 0000000000000 ahoj z-index

24 24 8. VLASTNOSTI BAREV

25 25 9. VLASTNOSTI TEXTU

26 26 10. VLASTNOSTI BOXŮ 1

27 27 10. VLASTNOSTI BOXŮ 2

28 28 10. VLASTNOSTI BOXŮ 3

29 29 11. KLASIFIKAČNÍ VLASTNOSTI

30 30 11. ŘÍZENÍ POZICE

31 End of Lecture Good Night.