Teksta noformēšana - CSS-triki

Anonim

text-decorationĪpašums piebilst pasvītrojumu overline, līniju cauri, vai no līnijām iezīmēto tekstu kombināciju.

h3 ( text-decoration: underline; )

Vērtības

  • none: netiek novilkta neviena līnija, un jebkura esošā dekorācija tiek noņemta.
  • underline: velk 1 pikseļu līniju visā tekstā tā bāzes līnijā.
  • line-through: zīmē 1 pikseļu līniju visā tekstā tā “vidējā” punktā.
  • overline: velk 1 pikseļu līniju visā tekstā tieši virs tā “augšējā” punkta.
  • inherit: manto vecāku apdari.

blinkVērtība ir W3C spec, bet tas ir novecojis un nestrādās nevienā pašreizējā pārlūkprogrammā. Kad tas darbojās, tas lika tekstam “mirgot”, ātri pārslēdzot to no 0% līdz 100% necaurredzamības.

Demonstrācija

Skatiet pildspalvu CSS-triki: teksta dekorēšana ar CSS-trikiem (@ css-tricks) vietnē CodePen.

Lietošanas piezīmes

Jūs varat apvienot underline, overlinevai line-throughvērtības ar atstarpi atdalīts saraksta, lai pievienotu vairākas apdares rindas:

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

Pēc noklusējuma līnija vai līnijas pārņem teksta krāsu, kā noteikts tās colorīpašumā. To var mainīt pārlūkprogrammās, kas atbalsta text-decoration-colorīpašumu vai trīs vērtību stenogrāfijas rekvizītu.

text-decoration kā stenogrāfijas īpašums

text-decorationvar izmantot kopā ar text-decoration-styleun text-decoration-colorkā stenogrāfijas īpašību:

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

Pašlaik tikai Firefox atbalsta šo neizlaboto. Safari to atbalsta ar -webkitprefiksu. Pārlūkam Chrome ir nepieciešams arī -webkitChrome karodziņos iespējots prefikss un eksperimentālās tīmekļa platformas funkcijas.

Saistīts

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

Vairāk informācijas

  • teksta noformēšana kā stenogrāfijas īpašība W3C spec CSS teksta apdares moduļa CR 3. līmenī
  • teksta dekorēšana MDN

Pārlūka atbalsts

Visas pārlūkprogrammas atbalsta CSS2.1 rekvizītu “longhand” text-decoration. Stenogrāfija īpašumu un apakšgrupas īpašības text-decoration-color, text-decoration-lineun text-decoration-styletiek atbalstītas unprefixed Firefox, un ar -webkitprefiksu Safari. Chrome arī atpazīs šīs vērtības ar -webkitiespējotu prefiksu un eksperimentālo tīmekļa platformu karodziņu.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
91 87 Nē 88 TP

Mobilais / planšetdators

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

* text-decorationpilnībā atbalstīts, apakšīpašības atbalstītas ar -webkitprefiksu.
† apakšīpašībām papildus ir jāaktivizē eksperimentālās tīmekļa platformas funkcijas.
Only text-decorationtikai CSS2.1 ; apakšīpašumi netiek atbalstīti.