Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

CSS – vlastnosti textu #text-align (vodorovné zarovnání) #text-indent (odsazení první řádky) #letter-spacing (mezera mezi znaky) #word-spacing (mezera.

Podobné prezentace


Prezentace na téma: "CSS – vlastnosti textu #text-align (vodorovné zarovnání) #text-indent (odsazení první řádky) #letter-spacing (mezera mezi znaky) #word-spacing (mezera."— Transkript prezentace:

1 CSS – vlastnosti textu #text-align (vodorovné zarovnání) #text-indent (odsazení první řádky) #letter-spacing (mezera mezi znaky) #word-spacing (mezera mezi slovy) #text-decoration (dekorace textu) #line-height (výška řádku) #text-transform (transformace znaků)

2 CSS – text-align #výchozí hodnotou je left (zarovnání doleva), alternativami jsou hodnoty right (doprava), center (doprostřed) a justify (do bloku).nadpis { text-align: center; font: 1.4em sans-serif; }.text { text-align: justify; } body { font-size: 12px; }

3 CSS – text-indent #odsazení prvního řádku lze nastavit buď v procentech (vzhledem k šířce bloku) nebo v jednotkách (např. px nebo em).abc { text-indent: 1.5em; } div { text-indent: 2%; }

4 CSS – letter-spacing #výchozí hodnotou je normal, alternativní hodnoty se zadávají v jednotkách #využití především v nadpisech jako určitá forma zdůraznění h2 { letter-spacing: 0.7em; }

5 CSS – word-spacing #výchozí hodnotou je normal, alternativní hodnoty se zadávají v jednotkách #možné problémy při kombinaci se zarovnáním do bloku, kde už vznikají mezery automaticky p { word-spacing: 1.1em; }

6 CSS – text-decoration #výchozí hodnotou je none, alternativní hodnoty jsou underline (podtržení), overline (linka nad textem), line-through (přeškrtnutí), blink (blikající text) #prvek a (hypertextový odkaz) má na rozdíl od standardního textu jako výchozí hodnotu underline #standardní text na webu by podle standardů tvorby webu neměl být podtržený, hypertextový odkaz naopak ano.preskrtnuti { text-decoration: line-through; }

7 CSS – line-height #výška řádku má výchozí hodnotu normal, alternativní hodnoty lze udávat v procentech, jednotkách nebo číslem.vradek { line-height: 15em; } div { line-height: 4.86; } p { line-height: 300%; }

8 CSS – text-transform #výška řádku má výchozí hodnotu none, alternativní hodnoty jsou capitalize (převede první znak každého slova na velký), uppercase (převede všechny znaky na velké), lowercase (převede všechny znaky na malé) div { text-transform: capitalize; }.velke { text-transform: uppercase; }

9 CSS – barvy a pozadí prvků #color (barva popředí – písma) #background-color (barva pozadí) #background-image (obrázek na pozadí) #background-repeat (opakování obrázku) #background (sdružená vlastnost pozadí)

10 CSS – color (1) #barvy lze v CSS zapisovat několika různými způsoby #1) barvy dané klíčovými slovy (16 barev) – black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua #2) hexadecimální zápis (obecný tvar #rrggbb), např. #b1f836 #3) zkrácený hexadecimální zápis (obecný tvar #rgb) – můžeme použít, pokud jsou v základním zápise vždy 2 stejné číslice za sebou, např. #ff6633  #f63

11 CSS – color (2) #4) dekadický rgb zápis – hodnoty od 0 do 255, např. rgb(120,30,250) #5) procentní rgb zápis – např. rgb(50%, 5%, 100%) #PSPad – levý ALT+C (nabídka barev) body { color: black; } p { color: #ffffff; }.text { color: rgb(75,120,204); } h4 { color: rgb(10%,75%,20%); }

12 CSS – background-color #zápis stejný jako u color body { background-color: black; } p { background-color: rgb(115,67,211); }

13 CSS – background-image #obrázek na pozadí pokud možno využívejte s citem, v opačném případě vede k nečitelnému textu #formáty povolené pro web – GIF, JPG, PNG (nikoli BMP apod.).obrpoz { background-image: url(photo/obrazek.jpg); }

14 CSS – background-repeat #opakování obrázku na ploše pozadí – hodnoty repeat (pokrytí celé plochy), repeat-x (vodorovné opakování), repeat-y (svislé opakování), no-repeat (jediná kopie, tj. bez opakování).obrpoz { background-repeat: no-repeat; }

15 CSS – background #sdružená vlastnost umožňuje nastavit více dílčích vlastností do jedné #můžeme ji použít, i když zadáváme pouze barvu pozadí.div { background: url(picture.jpg) no-repeat; }.div { background: #ffffff; }

16 XHTML – seznamy #3 typy – číslované, nečíslované, definiční #je možno je dále stylovat v CSS #využití definičních seznamů – např. slovníček zkratek apod.

17 XHTML – číslované seznamy položka 1 položka 2 položka 3 XHTML – nečíslované seznamy položka 1 položka 2 položka 3

18 XHTML – definiční seznamy WTO World Tourism Organisation EU European Union


Stáhnout ppt "CSS – vlastnosti textu #text-align (vodorovné zarovnání) #text-indent (odsazení první řádky) #letter-spacing (mezera mezi znaky) #word-spacing (mezera."

Podobné prezentace


Reklamy Google