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

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

Pomocí CSS 3 vlastnosti text-decoration-color nastavujeme barvu podtrhnutí. Vlastnost se dědí. Tuto vlastnost podporuje pouze webový prohlížeč Mozilla Firefox!

Hodnoty

  • barva - Výchozí barva je barva textu. Barvu můžeme nastavit slovně či využít k tomu hexadecimální notaci nebo funkci rgb(). Více k barvě naleznete u vlastnosti color.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na barvu textu).
  • 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í stylu čáry vlastnost text-decoration-style.

Ukázka

Vytvořme si odstavec krátkého textu s plným, červeným podtržením. K obarvení podtržení využijeme vlastnosti text-decoration-color.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                p
                {
                        text-decoration: underline;
                        -moz-text-decoration-color: red;    /* Mozilla Firefox */
                        text-decoration-color: red;
                }
                </style>
                <title>text-decoration-color</title>
        </head>
        <body>
                <p>Text s červeným podtržením.</p>
        </body>
</html>

Výsledek:

Vlastnost text-decoration-color 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

Avatar
shaman
Člen
Avatar
shaman:

Hm, ked to tu tak opisujes, bolo by dobre aj dodat ze tato vlastnost nie je schvalena, ani nie je standardom CSS3 a preto je normalne ze ju prehliadace neakceptuju. Cely tento balik vlastnosti sa vola CSS Text Decoration Module Level 3. Jeho draft, alebo po slovensky "Navrh" si mozes najst tu: http://www.w3.org/…ds/techs/css#…
To co ti funguje je vlastnost -moz-text-decoration-color ktoru si vyvinula Mozila a nie vlastnost text-decoration-color ktoru ty opisujes. Predpokladam ze -webkit verzia bude tiez coskoro dostupna. Ale kedze sa bavime o navrhu na css vlastnost a neni jasne ci a kedy sa schvali, povazujem taketo clanky za zbytocne.

Odpovědět  +2 5.8.2015 14:14
try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }
Avatar
Odpovídá na shaman
Neaktivní uživatel:

Samozrejme s tebou súhlasím ale neboj dostaneš kopu minusiek, zopár múdrych preslovov ako sa tu rýpeš do niekoho, kto tvrdo pracuje a píše tieto manuály a ako veľmi dôležité a kvalitné sú tieto "manuály". :)

Odpovědět  -1 5.8.2015 20:30
Neaktivní uživatelský účet
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na shaman
Marek Z.:

Souhlasím, ale na druhou stranu není špatné vědět, že něco takové existuje a zřejmě bude v ostatních prohlížečích. Já třeba vůbec toto neznal/nevěděl a pokud se tento návrh schválí tak bude tato síť připravená.. :D

Odpovědět  +4 5.8.2015 21:04
Chybami se člověk učí, běžte se učit jinam!
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.

Zobrazeno 3 zpráv z 3.