text-decoration-thicknessCSS nuosavybė nustato insultas storio apdailos linija, kuri yra naudojama teksto elemento. Į text-decoration-linevertė turi būti arba underline, line-througharba overlineatspindėti storis turtą.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaksė
auto | from-font | | Vertybės
auto: (Numatytasis) leidžia naršyklei nurodyti tinkamą teksto dekoravimo eilutės storį.from-font: Jei pirmas turimas šriftas turi metriką, nurodančią pageidaujamą storį, jis naudoja tą storį; kitaip jis elgiasi kaip automatinė vertė.: Bet koks galiojantis ilgis su vienetu nurodo teksto dekoravimo linijų storį kaip fiksuotą ilgį. Tai pakeičia bet kokią šrifto informaciją ir numatytąją naršyklės informaciją.percentage: Nurodo teksto dekoravimo eilučių storį procentais nuo 1em elemento šrifte.initial: Numatytasis ypatybės nustatymas, kuris yra automatinis.inherit: Priima tėvų apdailos storio vertę.unset: Pašalina dabartinį storį iš elemento.
Demonstracija
Pakeiskite šio text-decoration-thicknessdemonstracinio elemento vertę, kad sužinotumėte, kaip ypatybė veikia elemento teksto apdailą:
Palikuonims jis yra pastovus
Nustačius elemento dekoraciją, visi jo vaikai taip pat turės tą dekoraciją. Dabar įsivaizduokite, kad norime pakeisti vieno iš vaikų puošybos storį:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Tai neveikia, nes negalima panaikinti protėvių elementų nurodyto apdailos storio. Kad tai veiktų, reikia nustatyti paties elemento apdailos specifiką:
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! */ )Procentai ir kaskada
Šios ypatybės ilgis paveldės kaip fiksuotą vertę ir nebus keičiamas šriftu. Kita vertus, procentas paveldės kaip santykinę vertę, todėl, atsižvelgiant į paveldimą šriftą, jis bus keičiamas.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Toliau pateiktoje demonstracijoje parodytas palyginimas tarp em ir procentinių verčių naudojimo paveldėjimo atveju, o, kaip matote, kairėje pusėje (kurioje mes naudojame em) paveldima vertė yra fiksuoto ilgio. Tai reiškia, kad jis nesikeičia keičiant šriftą. Dešinėje pusėje tekstas paveldi santykinę vertę (šiuo atveju 20%); todėl storis keičiasi keičiantis šriftui.
Nors dabartiniame darbo specifikacijos projekte nurodomos procentinės vertės text-decoration-thickness, faktinė parama šiuo metu teikiama tik „Firefox“.
Naudojant su text-decoration
Dabartiniame CSS teksto apdailos modulio 4 lygio specifikacijos darbiniame projekte text-decoration-thicknessyra vertė kaip text-decorationstenografo ypatybė.
.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; )Nors text-decorationtai gerai palaikoma, įtraukimo palaikymas text-decoration-thicknessšiuo metu yra ribojamas „Firefox“.
Naršyklės palaikymas
| Funkcija | T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|---|
| Nuosavybė | Ne | Ne | 70 | Ne | 12.1 | Ne |
| Procentai | Ne | Ne | 76 | Ne | Ne | Ne |
| Stenografija | Ne | Ne | 70 | Ne | Ne | Ne |
| Funkcija | „Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mini“ |
|---|---|---|---|---|---|
| Nuosavybė | Ne | Ne | Ne | 12.2 | Ne |
| Procentai | Ne | Ne | Ne | Ne | Ne |
| Stenografija | Ne | Ne | Ne | Ne | Ne |
Pastabos
- Turtas anksčiau buvo vadinamas
text-decoration-width, tačiau buvo atnaujintas 2019 m. CSS teksto dekoravimo modulio 4 lygio specifikacijos darbo projekte. - Naršyklė turi naudoti mažiausiai 1 įrenginio pikselių storį.