De brukertiltalende nettstedene krever ofte at flere stylingmetoder legges til fra tid til annen. I slike situasjoner kan stylingen av tekstdekorasjonen utføres på flere måter basert på ulike verdier i henhold til kravene for å få nettstedet til å skille seg ut.
Denne bloggen vil dekke følgende innholdsområder:
Hvordan stille inn tekstdekorasjonsstilen i Tailwind CSS?
Tekststilen kan settes og dekoreres ved hjelp av ' tekst-dekor-stil ” eiendom tildelt med ulike stilverdier.
Egenskaper for tekstdekorasjonsstil
| Klasse | Egenskaper |
| dekorasjonssolid | tekst-dekor-stil: solid; |
| dekorasjon-dobbel | tekst-dekor-stil: dobbel; |
| dekorasjon-bølget | tekst-dekor-stil: bølget; |
| dekorert stiplet | tekst-dekor-stil: stiplet; |
| dekorasjonsprikket | tekst-dekor-stil: prikkete; |
Eksempel: Innstilling av tekstdekorasjonsstil i Tailwind CSS
Dette eksemplet bruker den ovenfor diskuterte ' tekst-dekor-stil '-egenskap med alle verdiene for å style avsnittsteksten:
DOCTYPE html >< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< manus src = 'https://cdn.tailwindcss.com' > manus >
hode >
< kropp >
< div >
< s klasse = 'understrek dekorasjon-solid ...' > Dette er Linuxhint-nettstedet s >
< s klasse = 'understrek dekorasjon-dobbel ...' > Dette er Linuxhint-nettstedet s >
< s klasse = 'understrek dekorasjon-bølget ...' > Dette er Linuxhint-nettstedet s >
< s klasse = 'understreket dekorasjon-stiplet ...' > Dette er Linuxhint-nettstedet s >
< s klasse = 'understreke dekorasjonsprikker ...' > Dette er Linuxhint-nettstedet s >
div >
kropp >
html >
Basert på denne koden, bruk følgende trinn:
-
- Ta med den gitte ' CDN ' banen innenfor '
”-taggen for å bruke Tailwind-funksjonene. - Lag nå fire avsnitt ved å bruke ' '-taggen som inneholder ' tekst-dekorasjon ” eiendom tildelt en annen verdi i hvert tilfelle, som diskutert.
- Dette understreker teksten med solide, doble, bølgete, stiplede og stiplede linjer.
- Ta med den gitte ' CDN ' banen innenfor '
Produksjon
Fra dette resultatet bekreftes det at teksten har blitt dekorert tilsvarende.
Konklusjon
Tekststilen kan settes og dekoreres ved hjelp av ' tekst-dekor-stil ” eiendom tildelt med ulike stilverdier. Disse verdiene inkluderer solid, dobbel, bølget, stiplet og stiplet. Denne bloggen handlet om å sette tekstdekorasjonsstilen ved hjelp av Tailwind CSS.