NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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 - Text a písmo - CSS vlastnosti

 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity