CSS – vlastnosti textu text-align (vodorovné zarovnání)

Prezentace na téma: "CSS – vlastnosti textu text-align (vodorovné zarovnání)"— 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) body { font-size: 12px; } .nadpis { text-align: center; font: 1.4em sans-serif; } .text { text-align: justify; }

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) div { text-indent: 2%; } .abc { text-indent: 1.5em; }

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 p { line-height: 300%; } .vradek { line-height: 15em; } div { line-height: 4.86; }

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; } .text { color: rgb(75,120,204); } h4 { color: rgb(10%,75%,20%); } p { color: #ffffff; }

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
<ol> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol> XHTML – nečíslované seznamy <ul> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ul>

18 XHTML – definiční seznamy
<dl> <dt>WTO</dt> <dd>World Tourism Organisation</dd> <dt>EU</dt> <dd>European Union</dd> </dl>