Teksto dekoravimas - CSS-gudrybės

Anonim

text-decorationNuosavybė prideda pabrėžti, overline, linijos-through, ar linijų iki pažymėto teksto derinys.

h3 ( text-decoration: underline; )

Vertybės

  • none: nubrėžta linija ir pašalinta esama puošmena.
  • underline: nubrėžia 1 taško ilgio liniją visame tekste jos pradinėje linijoje.
  • line-through: nubrėžia 1 taško ilgio liniją visame tekste ties „viduriniu“ tašku.
  • overline: nubrėžia 1 taško ilgio liniją visame tekste tiesiai virš jo viršutinio taško.
  • inherit: paveldi tėvo puošmeną.

blinkVertė yra W3C spec, bet ji yra pasmerkta ir neveiks bet dabartinę naršyklę. Kai jis suveikė, tekstas atrodė „mirksintis“, greitai perjungdamas jį nuo 0% iki 100% neskaidrumo.

Demonstracija

Žr. „Pen CSS-Tricks“: „CSS-Tricks“ (@ css-tricks) teksto dekoravimas „CodePen“.

Naudojimo pastabos

Galite derinti underline, overlinear line-throughreikšmes Tarpais atskirtų sąrašo pridėti keli apdailos eilutes:

p ( text-decoration: overline underline line-through; )

Pagal numatytuosius nustatymus eilutė ar eilutės paveldi teksto spalvą, nustatytą pagal jos colorypatybę. Tai galite pakeisti naršyklėse, palaikančiose text-decoration-colornuosavybę arba trijų verčių trumpinio ypatybę.

text-decoration kaip sutrumpinta nuosavybė

text-decorationgali būti naudojamas kartu su text-decoration-styleir text-decoration-colorkaip stenografija:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Šiuo metu tik „Firefox“ palaiko tai netaisytą. „Safari“ palaiko jį -webkitpriešdėliu. „Chrome“ taip pat reikalingas -webkitpriešdėlis ir eksperimentinės žiniatinklio platformos funkcijos, įgalintos „Chrome“ vėliavose.

Susijęs

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Daugiau informacijos

  • teksto dekoravimas kaip trumpinio savybė W3C spec CSS teksto dekoravimo modulyje, 3 lygio CR
  • teksto dekoravimas MDN

Naršyklės palaikymas

Visos naršyklės palaiko CSS2.1 „longhand“ ypatybę text-decoration. Stenografijos ypatybė ir sub-ypatybės text-decoration-color, text-decoration-lineir text-decoration-styleyra palaikomi iš anksto nenurodyti „Firefox“ ir su -webkitpriešdėliu „Safari“. „Chrome“ taip pat atpažins šias vertes su -webkitįgalintu priešdėlio ir eksperimentinių žiniatinklio platformų vėliava.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
91 87 Ne 88 TP

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 81 14,0–14,4 *

* text-decorationvisiškai palaikoma, sub-ypatybės palaikomos su -webkitpriešdėliu.
† papildomoms ypatybėms papildomai reikia įgalinti eksperimentines žiniatinklio platformos funkcijas.
Only text-decorationtik CSS2.1 ; antrinės ypatybės nepalaikomos.