Ukras teksta - CSS-trikovi

Anonim

text-decorationNekretnina dodaje podcrtano, linija zaglavlja, line-through ili kombinaciju linija na odabranom tekstu.

h3 ( text-decoration: underline; )

Vrijednosti

  • none: ne povlači se crta i uklanja se postojeći ukras.
  • underline: crta crtu od 1 piksela preko teksta na osnovnoj liniji.
  • line-through: crta crtu od 1 piksela po tekstu na njegovoj "srednjoj" točki.
  • overline: crta crtu od 1 piksela po tekstu, točno iznad njegove "gornje" točke.
  • inherit: nasljeđuje ukras roditelja.

blinkVrijednost je u W3C spec, ali je zastario i neće raditi u trenutnom pregledniku. Kad je uspio, činilo se da tekst "trepće" brzim prebacivanjem između 0% i 100% neprozirnosti.

Demo

Pogledajte CSS-trikovi olovke: Dekoracija teksta od CSS-trikova (@ css-trikovi) na CodePenu.

Napomene o korištenju

Možete kombinirati underline, overlineili line-throughvrijednosti u popisu prostor odvojen dodati više ukras linije:

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

Redak ili redovi prema zadanim postavkama nasljeđuju boju teksta kako je postavljeno njegovim colorsvojstvom. To možete promijeniti u preglednicima koji podržavaju text-decoration-colorsvojstvo ili stenografsko svojstvo s tri vrijednosti.

text-decoration kao stenografsko svojstvo

text-decorationmože se koristiti u kombinaciji sa text-decoration-stylei text-decoration-colorkao stenografsko svojstvo:

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

Trenutno samo Firefox podržava ovaj neprefiks. Safari ga podržava s -webkitprefiksom. Chrome također treba -webkitprefiks i eksperimentalne značajke web platforme omogućene u Chromeovim zastavicama.

Povezano

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

Više informacija

  • dekoracija teksta kao stenografsko svojstvo u modulu W3C specifikacije CSS Modul za ukrašavanje teksta Razina 3 CR
  • dekoracija teksta na MDN

Podrška preglednika

Svi preglednici podržavaju svojstvo "dugoročno" CSS2.1 text-decoration. Stenografsko svojstvo i pod-svojstva text-decoration-color, text-decoration-linei text-decoration-stylepodržani su bez prefiksa u Firefoxu i s -webkitprefiksom u Safariju. Chrome će također prepoznati te vrijednosti s -webkitomogućenim prefiksom i eksperimentalnom web platformom.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
91 87 Ne 88 TP

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

* text-decorationpotpuno podržano, pod-svojstva podržana s -webkitprefiksom.
† pod-svojstva dodatno zahtijevaju omogućeno obilježje eksperimentalnih značajki web platforme.
‡ text-decorationsamo CSS2.1 ; pod-svojstva nisu podržana.