text-decoration-thicknessNemovitost v CSS nastavuje tloušťku tahu výzdoby linky, která je použita na text v elementu. Tyto text-decoration-linepotřeby hodnota, která se buď underline, line-throughnebo overlinetak, aby odrážely tloušťky vlastnost.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntax
auto | from-font | | Hodnoty
auto: (Výchozí) Umožňuje prohlížeči určit vhodnou tloušťku pro textovou ozdobnou čáru.from-font: Pokud má první dostupné písmo metriky určující preferovanou tloušťku, použije tuto tloušťku; jinak se chová jako automatická hodnota.: Jakákoli platná délka s jednotkou určuje tloušťku textových ozdobných čar jako pevnou délku. Tím se nahradí veškeré informace v písmu a ve výchozím nastavení prohlížeče.percentage: Určuje tloušťku textových dekoračních řádků jako procento 1em v písmu prvku.initial: Výchozí nastavení vlastnosti, která je automatická.inherit: Přijme hodnotu tloušťky dekorace nadřazeného objektu.unset: Odstraní aktuální tloušťku z prvku.
Ukázka
Změňte hodnotu text-decoration-thicknessv následující ukázce, abyste viděli, jak vlastnost ovlivňuje textovou výzdobu prvku:
U potomků je konstantní
Po nastavení dekorace pro prvek budou mít tuto dekoraci také všechny jeho děti. Nyní si představte, že chceme změnit tloušťku dekorace jednoho z dětí:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )To nefunguje, protože tloušťku dekorace určenou prvky předků nelze přepsat. Aby to fungovalo, je třeba nastavit specifičnost dekorace pro samotný prvek:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Procento a kaskáda
U této vlastnosti bude délka zděděna jako pevná hodnota a nebude se měnit podle velikosti písma. Na druhou stranu procento zdědí jako relativní hodnotu, a proto se při dědění změní měřítko se změnami písma.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Následující ukázka ukazuje srovnání mezi použitím em a procentuálních hodnot v případě dědičnosti a, jak vidíte, na levé straně (ve které používáme em) je zděděná hodnota pevná délka. To znamená, že se nezmění se změnou písma. Na pravé straně však text zdědí relativní hodnotu (v tomto případě 20%); proto se tloušťka mění se změnou písma.
Zatímco aktuální pracovní koncept specifikace odkazuje na procentní hodnoty text-decoration-thickness, skutečná podpora je aktuálně omezena na Firefox.
Používání s text-decoration
Aktuální pracovní koncept specifikace CSS Textový dekorační modul úrovně 4 obsahuje text-decoration-thicknessjako hodnotu ve vlastnosti text-decorationzkratky.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )I když text-decorationje dobře podporována, podpora pro zahrnutí text-decoration-thicknessje aktuálně omezena na Firefox.
Podpora prohlížeče
| Vlastnosti | TJ | Okraj | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Vlastnictví | Ne | Ne | 70 | Ne | 12.1 | Ne |
| Procenta | Ne | Ne | 76 | Ne | Ne | Ne |
| Těsnopis | Ne | Ne | 70 | Ne | Ne | Ne |
| Vlastnosti | Android Chrome | Android Firefox | Prohlížeč Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Vlastnictví | Ne | Ne | Ne | 12.2 | Ne |
| Procenta | Ne | Ne | Ne | Ne | Ne |
| Těsnopis | Ne | Ne | Ne | Ne | Ne |
Poznámky
- Vlastnost se dříve volala
text-decoration-width, ale byla aktualizována v pracovním konceptu specifikace specifikace CSS Text Decoration Module úrovně 4 v roce 2019. - Prohlížeč musí používat minimální tloušťku 1 pixel zařízení.