text-decoration-thicknessИмовина у ЦСС поставља дебљину хода од декорације линију која се користи у тексту у елементу. Тхе text-decoration-lineпотребе вредност бити било underline, line-throughили overlineда одражава дебљине имовину.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Синтакса
auto | from-font | | Вредности
auto: (Подразумевано) Омогућава прегледачу да одреди одговарајућу дебљину за линију за украшавање текста.from-font: Ако први доступни фонт има метрику која одређује жељену дебљину, користи ту дебљину; у супротном се понаша као ауто вредност.: Свака важећа дужина са јединицом одређује дебљину линија за украшавање текста као фиксну дужину. Ово замењује све информације у фонту и подразумеване поставке прегледача.percentage: Одређује дебљину линија за украшавање текста као проценат од 1ем у фонту елемента.initial: Подразумевано подешавање својства које је аутоматско.inherit: Усваја вредност дебљине украса родитеља.unset: Уклања тренутну дебљину елемента.
Демо
Промените вредност text-decoration-thicknessу следећој демонстрацији да бисте видели како својство утиче на декорацију текста елемента:
Сталан је за потомке
Након постављања украса за елемент, сва његова деца ће имати и тај украс. Сада замислите да желимо да променимо дебљину украса за неко од деце:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Ово не функционише јер се дебљина украса коју одређују елементи предака не може надјачати. Да би ово функционисало, потребно је поставити специфичност украса за сам елемент:
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! */ )Проценат и каскада
За ово својство, дужина ће се наследити као фиксна вредност и неће се скалирати фонтом. С друге стране, проценат ће наследити као релативну вредност и, према томе, скалирати са променама у фонту како наслеђује.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Следећа демонстрација показује поређење између употребе ем и процентуалних вредности у случају наследства и, као што видите, на левој страни (у којој користимо ем) наследјена вредност је фиксне дужине. То значи да се не мења с променом фонта. На десној страни, међутим, текст наслеђује релативну вредност (у овом случају 20%); стога се дебљина скалира са променом фонта.
Иако се тренутни радни нацрт спецификације позива на процентуалне вредности за text-decoration-thickness, стварна подршка је тренутно ограничена на Фирефок.
Коришћење са text-decoration
Тренутни радни нацрт спецификације ЦСС модула за украшавање текста нивоа 4 укључује text-decoration-thicknessкао вредност у text-decorationсвојству стенографије.
.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; )Иако text-decorationје добро подржан, подршка за укључивање text-decoration-thicknessтренутно је ограничена на Фирефок.
Подршка прегледача
| одлика | ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|---|
| Својство | Не | Не | 70 | Не | 12.1 | Не |
| Проценти | Не | Не | 76 | Не | Не | Не |
| Стенографија | Не | Не | 70 | Не | Не | Не |
| одлика | Андроид Цхроме | Андроид Фирефок | Андроид претраживач | иОС Сафари | опера мини |
|---|---|---|---|---|---|
| Својство | Не | Не | Не | 12.2 | Не |
| Проценти | Не | Не | Не | Не | Не |
| Стенографија | Не | Не | Не | Не | Не |
Напомене
- Својство се некад звало
text-decoration-width, али је ажурирано у радном нацрту ЦСС модула за декорацију текста нивоа 4 нивоа за 2019. - Прегледник мора да користи минималну дебљину од 1 пиксел уређаја.