En streik er definert som en linje gjennom teksten. Det brukes ofte til å vise irrelevant tekst, men vi kan også bruke den til dekorasjon. Tidlige versjoner av HTML brukte element for å lage en tekst streik. HTML5 støtter imidlertid ikke elementet. Mer spesifikt, i CSS, “tekstdekorasjon”Eiendomsverdien er satt som“gjennomføring”For samme formål.

Denne artikkelen vil guide deg om CSS Strikethrough og de andre tekstdekorasjonsegenskapene. Så la oss starte!

Hva er tekstdekorasjon CSS-egenskaper?

Det er mange "tekstdekorasjon”Eiendomsverdier brukt i CSS. Noen av dem er listet opp nedenfor:

• gjennomføring
• understrek
• Overlinje
• ingen

La oss gå over dem en etter en!

Tekstdekorasjon: Linje-gjennom

“gjennomføring”Tekstdekorasjonsegenskap brukes til å legge til en horisontal linje gjennom teksten. Denne egenskapen er også kjent som krysset tekst.

Eksempel 1: Hvordan bruke CSS Strikethough?

Først vil vi legge til en navngitt “container”Inne i kroppselementet i HTML -filen. Inkluder da

Tag for å legge til litt tekst.

Html

Tekstdekorasjon: Strikethrough

I CSS-delen, tilordne verdien av tekstdekorasjonsegenskapen som “gjennomføring”.

CSS

Tekstdekorasjon: Linje-gjennom;

Det kan sees at den gjennomgående egenskapen blir brukt på den ekstra teksten:

For å gjøre denne dekorasjonen mer interessant, la oss bruke litt animasjon på den.

Eksempel 2: Hvordan bruke animasjon på streik med CSS?

Legg til et DIV -element inne i kroppselementet i HTML -filen. Inne i diven, legg en overskrift

Tag med litt tekst.

Html

Velkommen til Linuxhint!

Deretter bruker du stiler på HTML -elementene.

CSS

HTML -elementene er stylet med CSS -egenskaper. For å angi tekstjusteringen i sentrum, er DIV-elementet utstyrt med eiendomsteksten med verdisenteret:

div
tekst-align: sentrum;

Style Line Div

.linje
Font-Family: Sans-Serif;
Fontstørrelse: 60px;
Farge: #00154F;
Posisjon: relativ;
Display: Inline-block;
Markør: peker;

CSS -egenskapene som brukes på Line Div blir forklart nedenfor:

• “Font-familie”Eiendom setter fontfamilien til teksten som“sans serif”.
• “skriftstørrelse”Eiendom med verdi”60px”Setter størrelsen på skriften til 60px.
• “farge”Eiendom brukes til å spesifisere fargen på teksten.
• “posisjon”Med verdi”slektning”Justerer linjediven i forhold til sin nåværende posisjon.
• “vise”Eiendom som en“Inline-block”Vil tillate innstillingslinjebredde og begrense innholdet til å vises i neste linje.
• “markør”Med verdien”peker”Angir at når musen svever over teksten, vises en pekende håndmarkør.

Style Line Div etter velgeren

Den undergitte koden vil style Line Div etter at den er valgt. “::etter”Er kjent som ettervelgeren:

.linje :: etter
innhold: ";
Display: Block;
Bredde: 0;
Høyde: 20px;
Bakgrunnsfarge: #F4AF1B;
Posisjon: Absolutt;
Bunn: 10%;
z -indeks: -1;
Overgang: Bredde 1s;

Etter at linjen er valgt, vil de nevnte egenskapene bli brukt som forklart:

• “innhold”Eiendom brukes til å sette inn det spesifiserte innholdet i elementet. Hvis verdien ikke er noen, er innholdet etter valget satt i henhold til den nevnte pseudokoden.
• “vise”Som en blokk tar den tilgjengelige skjermbredden og setter blokken til å starte på en ny linje.
• “bredde”Eiendom brukes til å sette elementets bredde.
• “høyde”Eiendom brukes til å sette elementets høyde.
• “bakgrunnsfarge”Eiendom brukes til å sette bakgrunnsfargen på elementet.
• “posisjon”Som absolutt viser at linjen div vil posisjonere i forhold til dens overordnede Div etter utvalget.
• “bunn”Eiendom gir 10% plass i bunnen av linjen.
• “Z-indeks”Definerer rekkefølgen på overlappende elementer.
• “overgang”Eiendom setter bevegelsen av elementet der breddeverdien representerer overgangen som må brukes på breddeegenskapen til et element, og 1S er dens varighet.

Style Line Div etter svevet

Sett bredden på linjebeholderen som 100% når musen svever på den:

.Linje: Hopp :: etter
Bredde: 100%;

Som et resultat vil det å sveve over den ekstra teksten legge til en animert streik:

Tekstdekorasjon: Understrek

“understrek”Eiendomsverdi for tekstdekorasjon vil plassere en linje under teksten. Denne egenskapen brukes hovedsakelig for å gjøre den nødvendige teksten fremtredende.

CSS

Tekstdekorasjon: Understrek;

Produksjon

Tekstdekorasjon: Overlinje

Den overlinje dekorasjonen refererer til at teksten har en horisontal linje over den. Det er også kjent som en overbar. Mer spesifikt, for å lage en tekst overlinje, tilordne “tekstdekorasjon”Eiendom en verdi”Overlinje”.

CSS

Tekstdekorasjon: Overlinje;

Ved å tilordne verdien overlinje, kan det observeres at en stolpe vises over teksten:

Tekstdekorasjon: Ingen

Hvis du ikke trenger noen tekstdekorasjon, kan du tilordne verdien "ingen" til "tekstdekorasjon”Eiendom.

CSS

Tekstdekorasjon: Ingen;

Produksjon

Så langt har vi diskutert tekstdekorasjonsegenskapene, gjennomstrekningen, understreket, overlinje og ingen med eksempler. Neste del vil diskutere attributtverdiene for tekstdekorasjon. Så la oss gå!

Tekstdekorasjonsattributtverdier

Du kan også bruke ADD -andre attributtverdier:

• Tekstdekorasjonslinje: Den definerer linjetypen som understreking, gjennomføring, overlinje og mer.
• tekst-dekorasjonsfarge: Den definerer linjefargen.
• Tekstdekorasjonsstil: Den spesifiserer stilen på linjen, enten bølget, prikket, stiplet osv.
• Tekstdekorasjon-tykkelse: Den definerer bredden på linjen.

Se på eksemplet nedenfor, som viser tekstdekorasjon med flere verdier omtalt ovenfor.

Eksempel

For det første, legg til en stiplet linje over teksten med 10px bredde og den spesifiserte fargen:

Tekstdekorasjon: Overlinje prikket 10px #00154F;

Deretter understreker en bølget med ønsket bredde og farge:

Tekstdekorasjon: Understrek bølget 9px RGB (249, 253, 2);

Ovennevnte CSS-kodelinjer vil vise følgende resultater:

Vi har gitt informasjonen relatert til CSS Strikethrough, og andre tekstdekorasjonsegenskaper.

Konklusjon

Tekstdekorasjonsegenskapene til CSS setter utseendet til forskjellige dekorative linjer på den ekstra teksten. Mer spesifikt legger Strikhrough til en linje gjennom teksten som kan brukes ved å angi verdien av tekstdekorasjon som "gjennomføring”. Dette innlegget diskuterte CSS Strikethrough, andre tekstdekorasjonsegenskaper og attributtverdier.