text-decoration-thicknessNehnuteľnosť v CSS nastavuje hrúbku ťahu výzdoby linky, ktorá je použitá na text v elemente. Tieto text-decoration-linepotreby hodnota, ktorá sa buď underline, line-throughalebo overlinetak, aby odrážali hrúbky vlastnosť.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntax
auto | from-font | | Hodnoty
auto: (Predvolené) Umožňuje prehliadaču určiť príslušnú hrúbku riadku dekorácie textu.from-font: Ak má prvé dostupné písmo metriky určujúce preferovanú hrúbku, použije túto hrúbku; inak sa správa ako automatická hodnota.: Akákoľvek platná dĺžka s jednotkou určuje hrúbku riadkov dekorácie textu ako pevnú dĺžku. Toto nahradí všetky informácie vo fonte a predvolenom nastavení prehliadača.percentage: Určuje hrúbku riadkov dekorácie textu ako percento 1EM vo fonte prvku.initial: Predvolené nastavenie vlastnosti, ktorá je automatická.inherit: Prijme hodnotu hrúbky dekorácie rodiča.unset: Odstráni aktuálnu hrúbku z prvku.
Ukážka
text-decoration-thicknessV nasledujúcej ukážke zmeňte hodnotu, aby ste videli, ako vlastnosť ovplyvňuje textovú výzdobu prvku:
Pre potomkov je konštantná
Po nastavení dekorácie prvku bude mať túto dekoráciu aj všetky jeho deti. Teraz si predstavte, že chceme zmeniť hrúbku dekorácie jedného z detí:
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, pretože hrúbku dekorácie určenú prvkami predkov nie je možné prepísať. Aby to fungovalo, je potrebné nastaviť špecifickosť dekorácie pre samotný prvok:
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! */ )Percento a kaskáda
Pre túto vlastnosť bude dĺžka dediť ako pevná hodnota a nebude sa meniť s veľkosťou písma. Na druhej strane bude percento dediť ako relatívna hodnota, a preto bude zmenšované so zmenami písma, ktoré dedí.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Nasledujúca ukážka zobrazuje porovnanie medzi použitím em a percentuálnych hodnôt v prípade dedičstva a ako vidíte, na ľavej strane (v ktorej používame em) je zdedená hodnota pevnou dĺžkou. To znamená, že sa nezmení so zmenou písma. Na pravej strane však text dedí relatívnu hodnotu (v tomto prípade 20%); preto sa hrúbka mení so zmenou písma.
Zatiaľ čo súčasný pracovný koncept špecifikácie odkazuje na percentuálne hodnoty text-decoration-thickness, skutočná podpora je v súčasnosti obmedzená na Firefox.
Používanie s text-decoration
Aktuálny pracovný koncept špecifikácie modulu textovej dekorácie CSS úrovne 4 obsahuje text-decoration-thicknessako hodnotu vlastnosť text-decorationskratky.
.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; )Aj keď text-decorationje dobre podporovaná, podpora na zahrnutie text-decoration-thicknessje momentálne obmedzená na Firefox.
Podpora prehliadača
| Funkcia | IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Nehnuteľnosť | Nie | Nie | 70 | Nie | 12.1 | Nie |
| Percentá | Nie | Nie | 76 | Nie | Nie | Nie |
| Skratka | Nie | Nie | 70 | Nie | Nie | Nie |
| Funkcia | Android Chrome | Android Firefox | Prehliadač Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Nehnuteľnosť | Nie | Nie | Nie | 12.2 | Nie |
| Percentá | Nie | Nie | Nie | Nie | Nie |
| Skratka | Nie | Nie | Nie | Nie | Nie |
Poznámky
- Vlastnosť sa predtým volala
text-decoration-width, ale bola aktualizovaná v pracovnom koncepte špecifikácie modulu textovej dekorácie CSS úrovne 4 v roku 2019. - Prehliadač musí používať minimálnu hrúbku 1 pixel zariadenia.