text-decoration-thicknessNekretnina u CSS postavlja debljinu poteza ukras linija koja se koristi u tekstu u elementu. Na text-decoration-linepotrebe vrijednost biti bilo underline, line-throughili overlineda bi odražavala debljinu imovine.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaksa
auto | from-font | | Vrijednosti
auto: (Zadano) Omogućuje pregledniku da odredi odgovarajuću debljinu retka za ukrašavanje teksta.from-font: Ako prvi dostupni font ima mjerne podatke koji određuju željenu debljinu, koristi tu debljinu; inače se ponaša kao automatska vrijednost.: Svaka valjana duljina s jedinicom određuje debljinu linija ukrasa teksta kao fiksnu duljinu. Ovo zamjenjuje sve podatke u fontu i zadane postavke preglednika.percentage: Određuje debljinu linija ukrasa teksta kao postotak od 1em u fontu elementa.initial: Zadana postavka svojstva koja je automatski.inherit: Prihvaća vrijednost debljine ukrasa roditelja.unset: Uklanja trenutnu debljinu elementa.
Demo
Promijenite vrijednost text-decoration-thicknessu sljedećem pokazu kako biste vidjeli kako svojstvo utječe na ukrašavanje teksta elementa:
Stalan je za potomke
Nakon postavljanja ukrasa za element, sva će djeca imati i taj ukras. Sad zamislite da želimo promijeniti debljinu ukrasa za jedno od djece:
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 funkcionira jer se debljina ukrasa određena elementima predaka ne može nadjačati. Da bi to uspjelo, treba postaviti specifičnost ukrasa 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! */ )Postotak i kaskada
Za ovo svojstvo duljina će se naslijediti kao fiksna vrijednost i neće se skalirati fontom. S druge strane, postotak će naslijediti kao relativnu vrijednost i, prema tome, skalirati s promjenama u fontu kako nasljeđuje.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Sljedeća demonstracija prikazuje usporedbu korištenja vrijednosti em i postotka u slučaju nasljeđivanja i, kao što vidite, na lijevoj strani (u kojoj se koristimo em) naslijeđena vrijednost je fiksne duljine. To znači da se ne mijenja s promjenom fonta. S desne strane, međutim, tekst nasljeđuje relativnu vrijednost (u ovom slučaju 20%); stoga se debljina skalira s promjenom fonta.
Iako se trenutni radni nacrt specifikacije poziva na postotne vrijednosti za text-decoration-thickness, stvarna podrška trenutno je ograničena na Firefox.
Korištenje s text-decoration
Trenutni radni nacrt specifikacije CSS modula za ukrašavanje teksta razine 4 uključuje text-decoration-thicknesskao vrijednost u text-decorationstenografskom svojstvu.
.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; )Iako text-decorationje dobro podržan, podrška za uključivanje text-decoration-thicknesstrenutno je ograničena na Firefox.
Podrška preglednika
| Značajka | IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|---|
| Vlasništvo | Ne | Ne | 70 | Ne | 12.1 | Ne |
| Postoci | Ne | Ne | 76 | Ne | Ne | Ne |
| Stenografija | Ne | Ne | 70 | Ne | Ne | Ne |
| Značajka | Android Chrome | Android Firefox | Android preglednik | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Vlasništvo | Ne | Ne | Ne | 12.2 | Ne |
| Postoci | Ne | Ne | Ne | Ne | Ne |
| Stenografija | Ne | Ne | Ne | Ne | Ne |
Bilješke
- Svojstvo se nekad zvalo
text-decoration-width, ali je ažurirano u radnom nacrtu CSS modula za uređenje teksta za razinu 4 specifikacije za 2019. - Preglednik mora koristiti minimalnu debljinu od 1 piksela uređaja.