Text-decoration

CSS vlastnost text-decoration určuje podtržení textu a jiné "přikrášlení".

text-decoration
hodnoty přikrášlení textu
none žádné
underline podtržení
overline nadtržení
line-through přeškrtnutí
blink blikání - nikde nefunguje

Normálně není text nijak dekorován.

Odkazy mají výchozí dekoraci podtržení (a změnou text-decoration se dá udělat, aby podtrhané nebyly). Podtržený je i obsah tagu <ins> (což mi přijde nelogické). Na webu byste neměli podtrhávat nic, co není odkaz -- a naopak -- odkazy podtrhávejte.

Obsah tagů <s>, <strike> a <del> mají výchozí dekoraci přeškrtnutí. Pomocí text-decoration: none se jim dá přeškrtnutí zrušit. Naopak text-decoration: line-through; použijte u zrušených cen a zrušených textů (které z nějakého důvodu nechcete mazat).

Podpora

Velmi dobře podporovaná vlastnost, dobrá hlavně na podtrhávání.

Podpora vlastnosti text-decoration
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze IE neumí blinkat
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

Blikání nefunguje v žádném moderním prohlížeči (naštěstí).

Příklady

Jak udělat, aby odkazy nebyly podtržené:

<style>
a:link, a:visited {text-decoration: none}
</style>

Pokud se u odkazů vypíná podtrhávání, často se přidává pravidlo, aby při se při přejetí myší (stav :hover) podtrhly:

<style>
a:link, a:visited {text-decoration: none}
a:hover {text-decoration: underline}
</style>

Další příklady

Textové odkazy jako tlačítko

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.