12. CSS - vlastnosti textu

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_12

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastnosti textu

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro nastavení textu.

Klíčová slova: text-align, line-height, text-decoration, text-indent, text-transform, letter-spacing.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení textu.

Ověřeno: 28. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

12.1 CSS - vlastnosti textu (studijní text)

Vlastnosti textu

text-align

  • nastaví vodorovné zarovnání všech blokových prvků
  • hodnotou může být:
    • left (zarovnání k levému okraji)
    • center (zarovnání na střed)
    • right (zarovnání k pravému okraji)
    • justify (zarovnání do bloku)
selektor {text-align: center}

line-height

  • nastaví výšku řádku neboli řádkování
  • hodnotou může být:
    • desetinným číslem (pozor používá se desetinná tečka),
    • procento (150% odpovídá 1,5 řádkování),
    • délka (px, pt)
selektor {line-height: 1.5}
selektor {line-height: 150%}
selektor {line-height: 12pt}
selektor {line-height: 16px}

text-decoration

  • nastaví různé efekty pro písmo
  • hodnotou může být:
    • underline (podtržení)
    • overline ("nadtržení")
    • line-through (přeškrtnutí)
    • none (žádné)
  • upozornění: tato vlastnost se doporučuje používat jen u hypertextových odkazů (podle zásad správného webu nemá být text, který není hypertextovým odkazem, jakkoliv podtržený)
selektor {text-decoration: underline}

text-indent

  • nastaví odsazení prvního řádku v odstavci
  • hodnotou může být
    • délka (px, pt)
    • procento (podle nadřazeného prvku)
selektor {text-indent: 15px}

text-transform

  • nastaví různou velikost textu
  • hodnotou může být:
    • capitalize (první písmena slov budou velká)
    • uppercase (všechna písmena se zobrazí jako velká)
    • lowercase (všechna písmena se zobrazí jako malá)
    • none (žádné)
selektor {text-transform: uppercase}

text-shadow

  • nastaví stín textu
  • hodnoty se zapisují v přesném pořadí: posunX posun Y rozmázání barva
  • lze vynechat hodnotu rozmazání (stejné jako hodnota 0px)
    • délka (px, pt)
    • barva (slovně, hexa-kódem,...)
selektor {text-shadow: 5px 10px 3px #00FF00}
selektor {text-shadow: 3px 3px black}

letter-spacing

  • nastaví větší mezeru mezi písmeny
  • hodnotou může být:
    • délka (px, pt)
selektor {letter-spacing: 5pt}

Problematika zarovnání obrázků a odkazů

  • jelikož obrázky <IMG>, odkazy <A> a tabulky <TABLE> jsou chápány jako řádkové prvky, nefunguje přímo vodorovné zarovnání pomocí vlastnostini text-align,
  • řešením je "obalení" blokovým prvkem, nejčastěji pomocí oddílu <DIV>,
  • poté lze nastavit CSS vlastnosti pro vodorovné zarovnání "obalujícímu" HTML prvku.

12.2 CSS - vlastnosti textu (cvičení)

Úkol

  • Ve složce WWW si vytvořte složku CV12.
  • Ze složky CV11 si zkopírujte všechny soubory a složku IMG.
  • Soubor style.css upravte podle následujícího klíče:
    • přidejte komentář "CV12",
    • formát odstavců: řádkování 150 %, zarovnání do bloku,
    • formát nadpisů: všechna písma velká,
    • formát tabulky: zarovnání na střed.
  • Zkontrolujte na případné chyby a uložte.