logo

Hvordan understreke tekst i CSS?

CSS-tekstdekorasjonsegenskap: -

Understreking kan brukes til å fremheve viktig tekst. U-elementet og CSS-tekstdekorasjonsegenskapen er de to mest brukte teknikkene for å understreke tekst på nettsider.

Begge er enkle å bruke, men U-elementet gir betydningen semantisk verdi. En annen kan vises på forespørsel, noe som gjør det enkelt å endre understrekingstilstanden ved ganske enkelt å legge til CSS-klasser i teksten.

Hvorvidt understreking er nyttig for å uttrykke mening eller tilgjengelighet er et spørsmål om debatt. Understrekinger er en naturlig tilnærming for å tilby større brukeropplevelsesverdi når farger alene ikke er nok til å uttrykke mening.

Tekst-dekorasjonsattributtet tilbyr en alternativ måte å understreke tekst på. Den hyperlenkede teksten kan også brukes til å erstatte understreker med overlinjer.

En overlinje er det motsatte av understreking. En linje legges til øverst i teksten.

Vi kan bruke alle understrekings- og overlinjeverdier for samme klassedefinisjon. Tekst-dekor-egenskapen styrer hvordan teksten presenteres på flere måter. Når tekstdekor er satt til å understreke, er teksten inne i komponenten understreket.

Tekstdekorasjon CSS-egenskaper er fantastiske for tekst, men de kan begrenses når det gjelder design og er ikke aktuelt for innholdstyper som ikke er tekst. Understrekinger kan også lages med CSS-grenseattributter.

bikubearkitektur

Tekst-dekorasjonsattributtet er den mest grunnleggende måten å understreke tekst på. Den viktigste ulempen med tekstdekorasjon er at den ikke kan konfigureres.

Tekstdekorasjonsegenskapen bruker understreking, overstreking, gjennomstreking eller en kombinasjon av linjer for å fremheve valgt tekst.

Innholdet er understreket ved hjelp av attributtet text-decoration-line. Overline, understreking og strek gjennom er de tre alternativene for dette attributtet. I CSS brukes attributtet understreking for å fremheve teksten. Understrekingen er tegnet under den innebygde teksten med denne verdien.

På tvers av etterkommertekstelementer tegnes tekstdekorasjoner. Det innebærer at når et element definerer en tekstdekor, kan dekorasjonen ikke fjernes av et underordnet element.

html listeboks

Det er ingen strek, og eventuelle eksisterende dekorasjoner slettes.

Understrek: en 1px-linje tegnes over tekstens grunnlinje.

Gjennomføring: ved tekstens 'midtste' punkt, setter inn en 1px linje over den.

Overlinje: legger til en 1px-linje rett over tekstens 'øverste' punkt over teksten.

Arve: arver foreldrenes dekorasjon.

Tekstdekorasjon spesifiseres gjennom tekstdekorasjonsegenskapen, som er en forkortelse for:

konvertere streng til heltall
  • tekst-dekorasjonslinje (påkrevd)
  • tekst-dekor-farge
  • tekst-dekor-stil
  • tekst-dekor-tykkelse

overline, underline, underline-overline, line-through kommer under tekst-dekorasjonslinje.

Solid, prikkete, stiplede, bølgete, doble kommer under tekst-dekorasjonsstil.

Farge i desimalverdi, heksadesimalverdi eller arv kommer under tekst-dekorasjon-farge.

Border-bottom-egenskapen er et alternativ til tekstdekorasjon. Vi kan også bruke kant-bunn for å gi polstring.

Syntaks: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

La oss nå se etter et eksempel og forstå bruken av tekstdekorasjonsegenskap.

Tekstdekorasjon: understreking

Eksempel: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

Produksjon:

Hvordan understreke tekst i CSS?