text-decoration-thicknessHotel v CSS določa debelino kap dekoracijo linije, ki se uporablja v besedilu, v elementu. Za text-decoration-linepotrebe vrednosti, da bi bodisi underline, line-throughali overlineodraža debeline nepremičnine.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaksa
auto | from-font | | Vrednote
auto: (Privzeto) Omogoča brskalniku, da določi ustrezno debelino črte za okrasitev besedila.from-font: Če ima prva razpoložljiva pisava meritve, ki določajo želeno debelino, uporabi to debelino; v nasprotnem primeru se obnaša kot samodejna vrednost.: Vsaka veljavna dolžina z enoto določa debelino okrasnih vrstic besedila kot fiksno dolžino. To nadomesti vse podatke v pisavi in privzeti nastavitvi brskalnika.percentage: Določi debelino dekorativnih vrstic besedila kot odstotek 1em v pisavi elementa.initial: Privzeta nastavitev lastnosti, ki je samodejna.inherit: Sprejme vrednost debeline dekoracije starša.unset: Odstrani trenutno debelino elementa.
Demo
Spremenite vrednost text-decoration-thicknessv naslednji predstavitvi, da vidite, kako lastnost vpliva na besedilno dekoracijo elementa:
Za potomce je stalnica
Po nastavitvi dekoracije elementa jo bodo imeli tudi vsi njegovi otroci. Zdaj pa si predstavljamo, da želimo spremeniti debelino dekoracije za enega od otrok:
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 ne deluje, ker debeline dekoracije, ki jo določajo elementi prednikov, ni mogoče preglasiti. Da bi to delovalo, je treba določiti posebnost dekoracije za sam element:
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! */ )Odstotek in kaskada
Za to lastnost bo dolžina podedovana kot fiksna vrednost in se ne bo spreminjala s pisavo. Po drugi strani pa bo odstotek podedoval kot relativno vrednost, zato bo lestvico spreminjal v pisavi, kot jo podeduje.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Naslednja predstavitev prikazuje primerjavo med uporabo vrednosti em in odstotki v primeru dedovanja in, kot vidite, je na levi strani (v kateri uporabljamo em) podedovana vrednost fiksne dolžine. To pomeni, da se s spremembo pisave ne spreminja. Na desni strani pa besedilo podeduje relativno vrednost (v tem primeru 20%); zato se debelina spreminja s spremembo pisave.
Medtem ko se trenutni delovni osnutek specifikacije sklicuje na odstotne vrednosti za text-decoration-thickness, je dejanska podpora trenutno omejena na Firefox.
Uporaba z text-decoration
Trenutni delovni osnutek specifikacije modula za okrasitev besedila CSS 4. stopnje vključuje text-decoration-thicknesskot vrednost v text-decorationstenografski lastnosti.
.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; )Čeprav text-decorationje dobro podprt, je podpora za vključitev text-decoration-thicknesstrenutno omejena na Firefox.
Podpora brskalnika
| Značilnost | IE | Rob | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Nepremičnina | Ne | Ne | 70 | Ne | 12.1 | Ne |
| Odstotki | Ne | Ne | 76 | Ne | Ne | Ne |
| Stenografija | Ne | Ne | 70 | Ne | Ne | Ne |
| Značilnost | Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Nepremičnina | Ne | Ne | Ne | 12.2 | Ne |
| Odstotki | Ne | Ne | Ne | Ne | Ne |
| Stenografija | Ne | Ne | Ne | Ne | Ne |
Opombe
- Nekdaj se je klicala lastnost
text-decoration-width, vendar je bila posodobljena v delovnem osnutku specifikacije modula za okrasitev besedila CSS 4. stopnje za leto 2019. - Brskalnik mora uporabljati najmanj 1 slikovno piko naprave.