Å understreke et dokument eller en tekst er alltid ansett som enkelt. Men hvis vi vurderer saken for nettsteder, er det enkelt ennå? De fleste av oss vil si ja, men å lage en horisontal linje, inkludert noen tilpassede design, gjør denne enkle oppgaven slitsom. La reisen med tekstdekorasjon ved hjelp av CSS starte på følgende måte:
- Hva er tekstdekorasjon?
- Typer tekstdekorasjoner i CSS
- Tekstdekorasjon ved bruk av CSS: kode
- Tekstdekorasjon Hopp over
Hva er tekstdekorasjon?
Det setter utseendet til de dekorative linjene på tekst. Det er en stenografisk eiendom for:
- tekst-dekorasjon-linje
- tekst-dekor-farge
- tekst-dekorasjon-stil
Det er spesifisert som en eller flere romadskilte verdier som representerer langhånds text-dekorasjonsegenskaper.
Syntaks:
tekstdekorasjon: || ||
Hvor,
tekst-dekorasjon-linje: Den brukes til å angi hvilken type dekorasjon som brukes somunderstrek, overstrekk og gjennomføring.
type konvertering i c ++
tekst-dekorasjon-farge:Den brukes til å stille inn fargen på dekorasjonen.
tekst-dekorasjon-stil: Den brukes til å stille stilen på linjen somsolid, bølget, prikket, stiplet, dobbelt
Typer tekstdekorasjoner i CSS
- Overlinje:
#decoration {text-decoration: overline} 
- Gjennomgang:
#decoration {text-decoration: line-through}- Understreke:
#decoration {text-decoration: underline}- Kombinasjon:
#decoration {text-decoration: understrek linje-overline}Produksjon:
Tekstdekorasjon ved bruk av CSS: kode
Kode:
CSS-kode:
#overline {text-decoration: wavy overline lime} # underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline doted red} #bølget {text-decoration: line-through wavy}Produksjon:
Tekstdekorasjon Hopp over
En egenskap kjent som tekst-dekorasjon-hoppe kan også brukes der en tekst overstrekes, gjennomstrekes og understrekes. Det hjelper med å dekorere teksten. Den spesifiserer ganske enkelt hvordan overstrekk og understreking tegnes når de passerer over opp- og nedstigende.
#decoration {text-decoration-skip: ink}Verdier som kan brukes med tekstdekorasjonshopp er:
gjenstander : (standard) linje hopper over innebygde objekter, som bilder eller innebygde blokkeringselementer.
ingen : linje krysser alt.
mellomrom : dekorasjonslinjen hopper over mellomrom, ordskilletegn og eventuelle mellomrom satt med bokstavavstand eller ord mellomrom.
blekk : dekorasjonslinje hopper over tegn, nedstigninger eller stigninger.
kanter : dekorasjonslinje starter litt etter innholdets startkant og slutter litt før innholdets sluttkant.
boksdekorasjon : dekorasjonslinje hopper over arvelig margin, kantlinje og polstring.
Siden denne egenskapen ikke støttes av noen nettlesere, er det ingen demo, men her er et eksempel på bildet nedenfor om hvordan hver av verdiene kan se ut når tekst-dekorasjon-hopp er implementert.
Med dette kommer vi til slutten av denne tekstdekorasjonen ved hjelp av CSS-bloggen. Hvis du har spørsmål angående dette emnet, kan du legge igjen en kommentar nedenfor, så kommer vi tilbake til deg.
Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet til 'Tekstdekorasjon ved hjelp av CSS' -bloggen, så kommer vi tilbake til deg.