CSS3: Arbeide med tekstdekorasjonsegenskaper

Dette segmentet av CSS3-serien vil gjennomgå flere av stylingegenskapene for tekstdekorasjon. Tekstdekorasjonsspesifikasjonen er inkludert i CSS Text Level 3-spesifikasjonen, og inkluderer egenskaper for linjer, farge, stil, stenografi, linjekontinuitet, understrekingsposisjon og vekt. Dette segmentet vil dekke flere, men ikke alle tekstdekorasjonsstiler som er tilgjengelige for bruk i de fleste moderne nettlesere i dag, og noen som bare er tilgjengelige i Mozilla Firefox.

Text-decoration

W3C-spesifikasjonene for tekstdekorasjon gir flere måter å bruke stiler på tekst, inkludert følgende:

  • Linjedekorasjon: Understrekning, Overlinje og gjennomslag
  • Farge
  • Stil
  • Shorthand eiendom
  • Linjekontinuitet
  • Understreke posisjon
  • Legg vekt på Merk stil, farge, korthet, posisjon og hopp
  • Egenskaper for tekstskygge

Mozilla Firefox er den eneste nettleseren som tilbyr støtte for de nye CSS3- tekstdekorasjonsegenskapene når du bruker -moz- prefikset før noen stylingdeklarasjoner.

Linjedekorasjon

Linjedekorasjoner spesifiserer hvilke linjestiler hvis noen er lagt til elementet og syntaks uttrykkes i formen sammen med følgende verdivalg som beskrevet i spesifikasjonen og presentert nedenfor:

Syntakseksempel:

p {tekstdekorasjonslinje: understrek;}

Tilgjengelige verdier og deres beskrivelser:

Verdi

Beskrivelse

Ingen (standardverdi) Verken produserer eller hemmer tekstdekorasjon.
understreking Hver tekstlinje er understreket.
No-understreking Hemmer forplantet understrek.
Skift-understreking Hemmer forplantet understrek og produserer en understrek.
overlinje Hver tekstlinje har en linje over seg (dvs. på motsatt side fra en understrek).
No-overlinje Hemmer formerte overlinjer.
Skift-overlinje Hemmer formerte overlinjer og produserer en overlinje.
Line-gjennom Hver tekstlinje har en linje gjennom midten.
No-line-gjennom Hemmer forplantet gjennomføring.
Skift-line-gjennom Hemmer forplantet gjennomføring og produserer en gjennomføring.
Fjern alle Hemmer alle formerte tekstdekorasjoner.

I henhold til linjedekorasjonsspesifikasjonen brukes understrekinger, overskridelser og gjennomgående linjer bare på tekst (inkludert hvitt mellomrom, bokstavavstand og ordavstand), mens marginer, grenser og polstring hoppes over. Elementer som ikke inneholder tekst, for eksempel bilder, er heller ikke dekorert. Og når den er spesifisert på eller forplantet til en inline-boks, påvirker slik dekorasjon alle boksene som er generert av det elementet, og blir videreformidlet til eventuelle innstrømningsblokknivåbokser som deler inline-elementet. Når de er spesifisert på eller forplantet til en blokkcontainer som etablerer en inline formateringskontekst, blir dekorasjonene forplantet til et anonymt inline-element som omslutter alle in-flow inline-nivå barn i blokkcontaineren. For alle andre elementer blir dekorasjonene forplantet til alle innflytende barn.

Eksemplet nedenfor demonstrerer bruken av tekstdekorasjon med følgende stiler:

 p { 
 skriftstørrelse: 16px; 
 font-familie: Arial, Helvetica, sans-serif; 
 font-stil: normal; 
 margin-left: 100px; 
 bredde: 500px; 
 grense: solid # 666666; 
 polstring: 5px; 
 } 
 artikkel { 
 tekstdekorasjon: understreking; farge: # 0066FF; 
 } 
 em { 
 viser: blokk; 
 } 
 span.green_text { 
 color: # 336600; 
 } 

Og dette HTML-dokumentutdraget:

 Artikkelelementet blir forplantet til et anonymt inlineelement som omgir spanelementet og får teksten til å bli blå sammen med den blå understrekingen fra den anonyme linjen under den. 

 Fargen blir hentet fra artikkelelementet. Em-blokken er også understreket som i en strømningsblokk som understrekingen er propagert til. Den siste tekstlinjen er grønn, men understrekingen under den er fremdeles den blå understrekingen fra det anonyme inlineelementet. 

 Tekstfargen er grønn! 

 Figur A viser resultatet av tekstdekorasjonsunderstrekningseksemplet som vist i både Chrome 14.0 og Firefox 7.01: 

Figur A

Spesifikasjonen fortsetter med å si at relativt plassering av en etterkommer flytter all tekstdekorasjoner som påvirker den sammen med etterkommerens tekst; det påvirker ikke beregningen av dekorasjonens startposisjon på den linjen. Egenskapen 'synlighet', filtre og andre grafiske transformasjoner påvirker også tekstdekorasjoner som en del av teksten de er tegnet på, selv om dekorasjonene ble spesifisert på et forfedreelement.

Her er et eksempel på styling av tekst-dekorasjonslinjeegenskaper med overlinjeverdien og bruker moz-prefikset:

 .text_decoration_overline { 
 -moz-text-dekorasjon-line: overline; 
 } 
Figur B viser resultatet som vist i Firefox 7.01:

Figur B

Text-decoration-farge

I henhold til spesifikasjonen spesifiserer egenskapen for tekstdekorasjon-farge fargen på tekstdekorasjon (understrekinger, overlinjer og gjennomstrømninger) satt på elementet med tekstdekorasjonslinje, og eventuell beregnet fargeverdi brukes. Et eksempel på egenskapen tekstdekorasjonsfarge som er i bruk vises nedenfor.

Text-decoration-stil

Egenskapen for tekstdekorasjonsstil spesifiserer stilen til linjen (e) tegnet for tekstdekorasjon spesifisert på elementet. Verdier har samme betydning som for grensestil-egenskapene. Verdiene som er tilgjengelige for tekstdekorasjon-stilen er: solid, dobbel, stiplet, stiplet og bølgete.

Følgende CSS3-erklæring:

 .snazzy { 
 -moz-text-dekorasjon-linje: understreking; 
 -moz-text-dekorasjon-stil: dobbelt; 
 -moz-text-dekorasjon-farge: grønn; 
 } 
Figur C viser resultatet som vist i Firefox 7.01:

Figur C

Fremtidige segmenter på CSS3 vil dekke mer om tekstdekorasjon, transformerende og overgangseffekter og andre stylingegenskaper.

Også:
  • Arbeide med CSS3 Layout Module for flere kolonner
  • Arbeider med CSS3 bakgrunnsbilder
  • CSS3: Hvordan implementere boksen-skyggeegenskapen
  • CSS3: Lag flere skygger skaper lette sider
  • CSS3: Nye muligheter med tekstskygge og 3D-tekst
  • CSS3: Nye egenskaper for tekstoverflyt og tekstinnpakning

© Copyright 2020 | mobilegn.com