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

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

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

Hodnoty

  • solid (výchozí) - Plná čára.
  • double - Dvojitá čára.
  • dotted - Tečkovaná čára.
  • dashed - Čárkovaná čára.
  • wavy - Vlnovka.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na solid).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ke změnění umístění čáry (např. podtržení či přeškrtnutí textu) můžeme využít vlastnosti text-decoration-line a ke změnění barvy čáry vlastnost text-decoration-color.

Ukázka

Vyzkoušíme si to v praxi. Vytvořme si jeden odstavec s krátkým textem, který bude mít nad sebou vlnovku. K nastavení čáry nad textem využijeme vlastnosti text-decoration a ke změnění stylu čáry vlastnost text-decoration-style s hodnotou wavy.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                p
                {
                        text-decoration: overline;
                        -moz-text-decoration-style: wavy;   /* Mozilla Firefox */
                        text-decoration-style: wavy;
                }
                </style>
                <title>text-decoration-style</title>
        </head>
        <body>
                <p>Text s vlnovkou nad sebou.</p>
        </body>
</html>

Výsledek:

Vlastnost text-decoration-style v CSS 3

 

  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í!