text-decoration-line - Český CSS 3 manuál

HTML a CSS Manuál Text a písmo text-decoration-line - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti text-decoration-line nastavujeme textu čáru (např. podtržení) v HTML. Vlastnost se dědí. Tuto vlastnost podporuje pouze webový prohlížeč Mozilla Firefox!

Hodnoty

  • none (výchozí) - Normální text.
  • underline - Podtrhnutí textu.
  • overline - Čára nad textem.
  • line-through - Přeškrtnutý text.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ke změnění barvy čáry můžeme využít vlastnosti text-decoration-color a ke změnění stylu čáry vlastnost text-decoration-style.

Ukázka

Pro ukázku si vytvoříme tři odstavce s krátkým textem a jedinečným ID. Jeden z nich bude mít nad sebou čáru, další bude přeškrtnutý a poslední bude podtržený. Všechny odstavce budou využívat vlastnosti text-decoration-line.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                #nad
                {
                        -moz-text-decoration-line: overline;        /* Mozilla Firefox */
                        text-decoration-line: overline;
                }
                #pres
                {
                        -moz-text-decoration-line: line-through;    /* Mozilla Firefox */
                        text-decoration-line: line-through;
                }
                #pod
                {
                        -moz-text-decoration-line: underline;       /* Mozilla Firefox */
                        text-decoration-line: underline;
                }
                </style>
                <title>text-decoration-line</title>
        </head>
        <body>
                <p id="nad">Tento text má čáru nad sebou.</p>
                <p id="pres">Tento text je přeškrtnutý.</p>
                <p id="pod">Tento text je podtrhnut.</p>
        </body>
</html>

Výsledek:

Vlastnost text-decoration-line v CSS 3

Poznámka

Jelikož tato vlastnost je podporována pouze webovým prohlížečem Mozilla Firefox, v ostatních prohlížečích nebude text nijak upraven. Naštěstí místo této vlastnosti můžeme využít atribut text-decoration, který nabízí podobnou funkcionalitu, ovšem bez možnosti obarvení a úpravy.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Text a písmo - CSS vlastnosti

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!