|
||
Jsou definovány vlastností letter-spacing.
Tato vlastnost ovlivňuje velikost mezer mezi jednotlivými znaky textu. Výchozí hodnotou pro tuto vlastnost je normal. Hodnota normal je specifická pro každý typ písma. Hodnota, kterou přiřadíme této vlastnosti, je přičtena k výchozí hodnotě. Např. zapíšeme-li definici {letter-spacing: 15px}, budou mezery mezi písmeny daného prvku o 15px větší, než obvykle. Přiřazovaná hodnota může být i záporná. Přiřadíme-li hodnotu 0.25em, zvětší se mezery o čtvrtinu velikosti písma daného prvku. Je-li tedy např. velikost písma v odstavci 12pt, pak budou mezery mezi písmeny v odstavci o 3pt větší. Pro vlastnost letter-spacing nelze použít rozměry zadávané v %.
Výsledek těchto zápisů si můžete prohlédnout v ukázce 
.
Jsou definovány vlastností word-spacing.
Tato vlastnost ovlivňuje velikost mezer mezi jednotlivými slovy v textu. Jinak pro ni platí totéž, co pro vlastnost letter-spacing.
Příklad použití můžete vidět v ukázce .
Je definována vlastností text-decoration.
Tato vlastnost umožňuje zobrazit následující dekorace textu:
podtržení - hodnota underline,
nadtržení - hodnota overline,
přeškrtnutí - hodnota line-through.
Její hodnotou mohou být výše zmíněná klíčová slova. Výchozí hodnotou je none, která nezobrazuje žádné dekorace. Každému prvku lze přiřadit jednu nebo více hodnot současně. Např. h2 { text-decoration: underline overline } zobrazí u nadpisů h2 zároveň podtržení i nadtržení.
Vlastnost text-decoration není dědičná. Tento fakt může způsobit zdánlivě "špatnou" barvu podtržení u vnořených prvků. Máme například zvýraznění strong uvnitř nadpisu h1 a chceme mít celý nadpis podtržený a zvýrazněnou část nadpisu červenou barvou. Definujeme tedy pravidla h1 { text-decoration: underline } a strong { color: red } Prvek strong sice podtržení nezdědí, bude však podtržen stejně jako všechen text uvnitř prvku h1. Proto se barva jeho podtržení bude shodovat s nadpisem a nebude tedy červená. Podrobněji je dědičnost popsána v kapitole Kaskáda a dědičnost.
Oba příklady si lze prohlédnout v ukázce 
.
Pozn.: červeného podtržení bychom dosáhli přidáním definice podtržení selektoru strong. strong { color: red; text-decoration: underline }
Je definována vlastností text-transform.
Umí zobrazit písmena transformovaného textu jako:
VŠECHNA VELKÁ - hodnota uppercase,
všechna malá - hodnota lowercase,
Všechna Počáteční Velká - hodnota capitalize.
Výchozí hodnota none neprovádí žádnou transformaci.
Vzhled a funkci těchto transformací můžete vidět a upravit v ukázce 
.
Je definováno vlastností text-align.
Zarovnává text uvnitř blokového prvku:
vlevo - hodnota left,
vpravo - hodnota right,
na střed - hodnota center,
do bloku - hodnota justify.
Výchozí hodnota je definována prohlížečem. Obykle bývá left.
Blokovým prvkem se rozumí například odstavec p nebo nadpis h1. Jak zarovnat celý tento blokový prvek (i se zarovnaným textem) se dozvíme ve studijním článku Vlastnosti rámů.
Zatím se můžeme podívat na příklad zarovnání textu v ukázce 
.
Odstraníte-li pravidlo p { text-align: justify } a spustíte znovu náhled, můžete porovnat vzhled textu odstavce před a po aplikaci zarovnání do bloku.
Je definováno vlastností text-indent.
Tato vlastnost nastaví odsazení první řádky textu (např. v odstavci) na zadanou hodnotu. Hodnoty lze zadávat absolutní i relativní. Zadáme-li hodnotu v procentech, odsazení se nastaví dle šířky formátovaného prvku.
Toto demonstruje ukázka .
První odstavec má nastaveno odsazení pomocí absolutní hodnoty 30pt. Druhý má pak odsazení nastaveno na 5% své šířky. Na první pohled vypadají odsazení stejně velká. Změníme-li však šířku okna, ve kterém se zobrazují, bude se měnit i odsazení druhého odstavce.
Je definována vlastností line-height.
Pomocí této vlastnosti se nastavuje řádkování prvku. Výchozí hodnotou je normal, jejíž interpretace je závislá na použitém prohlížeči. Výšku řádků lze zadávat pomocí relativních i absolutních jednotek. Budeme-li mít například velikost písma nastavenou na 12pt a výšku řádek na 22pt, pak se nad i pod textem zobrazí mezera o velikosti 5pt. Relativní jednotky vycházejí z velikosti písma formátovaného prvku. Nastavíme-li prvku hodnotu { line-height: 150% }, budeme mít mezi řádkami mezery velké 50% z velikosti písma (25% nad textem a 25% pod textem). Je-li tedy výška řádek nastavena na 1em, či 100%, nebude mezi text řádek vložena žádná mezera. Hodnotu je možné zadat i bez jednotek. Takto zadaná hodnota se považuje za násobek velikosti písma (stejně jako jednotka em). Z toho vyplývá, že hodnoty 150%, 1.5em i 1.5 definují stejnou výšku řádek.
Můžete si to ověřit v ukázce 
.
Výše zmíněné příklady jsou použity k formátování odstavců v této ukázce.
Je definováno vlastností vertical-align.
Zarovnává text v rámci řádky.
Text je možné zarovnat na:
základní čáru textu - hodnota baseline (výchozí hodnota),
střed řádky - hodnota middle,
horní hranu řádky - hodnota top,
dolní hranu řádky - hodnota bottom,
horní účaří textu - hodnota text-top,
dolní účaří textu - hodnota text-bottom,
úroveň horního indexu - hodnota super,
úroveň dolního indexu - hodnota sub,
úroveň specifikovanou rozměrem v absolutních či relativních jednotkách.
V případě rozměrů lze zadávat kladné i záporné hodnoty. Překročíme-li zadaným rozměrem výšku řádky, pak se tato řádka svou výškou přizpůsobí. Rozměry zadané v procentech se vztahují k přednastavené výšce řádky formátovaného prvku. Hodnotě baseline odpovídá 0%, 0pt, 0px, ...
Praktické rozdíly mezi jednotlivými hodnotami můžete porovnat v ukázce 
.
Zarovnání je zde ukázáno na prvcích span umístěných v nadpisech h1. Aby bylo lépe vidět, kde se prvky v řádkách nachází, je pozadí nadpisů obarveno žlutě a prvků span modře.