text-decoration-thicknessProprietatea în CSS stabilește grosimea accident vascular cerebral a liniei de decor , care este utilizat pe text într - un element. De text-decoration-linenevoile de valoare să fie underline, line-throughsau overlinepentru a reflecta proprietatea grosime.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaxă
auto | from-font | | Valori
auto: (Implicit) Permite browserului să specifice o grosime adecvată pentru linia de decorare a textului.from-font: Dacă primul font disponibil are valori care specifică o grosime preferată, acesta folosește acea grosime; altfel se comportă ca valoarea automată.: Orice lungime validă cu o unitate specifică grosimea liniilor de decorare a textului ca lungime fixă. Aceasta înlocuiește orice informație din font și implicit din browser.percentage: Specifică grosimea liniilor de decorare a textului ca procent de 1em în fontul elementului.initial: Setarea implicită a proprietății care este automată.inherit: Adoptă valoarea grosimii de decor a părintelui.unset: Elimină grosimea curentă din element.
Demo
Schimbați valoarea din text-decoration-thicknessurmătoarea demonstrație pentru a vedea cum afectează proprietatea decorarea textului elementului:
Este constantă pentru descendenți
După setarea unui decor pentru un element, toți copiii acestuia vor avea și el acel decor. Acum imaginați-vă că vrem să schimbăm grosimea decorului pentru unul dintre copii:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Acest lucru nu funcționează deoarece grosimea decorului specificată de elementele strămoșilor nu poate fi anulată. Pentru ca acest lucru să funcționeze, trebuie setată o specificitate de decorare pentru elementul însuși:
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! */ )Procentajul și cascada
Pentru această proprietate, o lungime va moșteni ca valoare fixă și nu se va scala cu fontul. Pe de altă parte, un procent va moșteni ca valoare relativă și, prin urmare, va scala cu modificări ale fontului pe măsură ce moștenește.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Următoarea demonstrație arată comparația dintre utilizarea valorilor em și procentuale în cazul moștenirii și, după cum puteți vedea, în partea stângă (în care le folosim) valoarea moștenită este o lungime fixă. Asta înseamnă că nu se extinde odată cu modificarea fontului. În partea dreaptă, însă, textul moștenește o valoare relativă (în acest caz 20%); prin urmare, grosimea se modifică odată cu modificarea fontului.
În timp ce schița de lucru actuală a specificației face referire la valorile procentuale pentru text-decoration-thickness, asistența reală este limitată în prezent la Firefox.
Folosind cu text-decoration
Schița de lucru actuală a specificației de nivel 4 a modulului de decorare a textului CSS include text-decoration-thicknessca valoare în text-decorationproprietatea stenogramă.
.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; )Deși text-decorationeste bine acceptat, suportul pentru includerea text-decoration-thicknesseste limitat în prezent la Firefox.
Suport pentru browser
| Caracteristică | IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|---|
| Proprietate | Nu | Nu | 70 | Nu | 12.1 | Nu |
| Procente | Nu | Nu | 76 | Nu | Nu | Nu |
| Stenografie | Nu | Nu | 70 | Nu | Nu | Nu |
| Caracteristică | Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera mini |
|---|---|---|---|---|---|
| Proprietate | Nu | Nu | Nu | 12.2 | Nu |
| Procente | Nu | Nu | Nu | Nu | Nu |
| Stenografie | Nu | Nu | Nu | Nu | Nu |
Note
- Proprietatea obișnuia să fie apelată
text-decoration-width, dar a fost actualizată în schița de lucru din 2019 a specificației de nivel 4 a modulului de decorare a textului CSS. - Browserul trebuie să utilizeze o grosime minimă de 1 pixel de dispozitiv.