De brugertiltalende websteder kræver ofte, at flere stylingmetoder tilføjes fra tid til anden. I sådanne situationer kan stylingen af tekstdekoration udføres på flere måder baseret på forskellige værdier i henhold til kravene for at få webstedet til at skille sig ud.
Denne blog vil dække følgende indholdsområder:
Hvordan indstilles tekstdekorationsstilen i Tailwind CSS?
Tekststilen kan indstilles og dekoreres ved hjælp af ' tekst-dekoration-stil ” ejendom tildelt med forskellige stilværdier.
Egenskaber for tekstdekorationsstil
| Klasse | Ejendomme |
| dekorations-solid | tekst-dekorations-stil: solid; |
| dekoration-dobbelt | tekst-dekoration-stil: dobbelt; |
| dekoration-bølget | tekst-dekoration-stil: bølget; |
| dekoration-stiplet | tekst-dekoration-stil: stiplet; |
| dekorationsprikket | tekst-dekoration-stil: prikket; |
Eksempel: Indstilling af tekstdekorationsstilen i Tailwind CSS
Dette eksempel bruger det ovenfor diskuterede ' tekst-dekoration-stil egenskab med alle værdierne til at style afsnitsteksten:
DOCTYPE html >< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< manuskript src = 'https://cdn.tailwindcss.com' > manuskript >
hoved >
< legeme >
< div >
< s klasse = 'understreg dekoration-solid ...' > Dette er Linuxhint hjemmeside s >
< s klasse = 'understreg dekoration-dobbelt ...' > Dette er Linuxhint hjemmeside s >
< s klasse = 'understreget dekoration-bølget ...' > Dette er Linuxhint hjemmeside s >
< s klasse = 'understreget dekoration-stiplet ...' > Dette er Linuxhint hjemmeside s >
< s klasse = 'understreget dekorationsprikker...' > Dette er Linuxhint hjemmeside s >
div >
legeme >
html >
Baseret på denne kode skal du anvende følgende trin:
-
- Inkluder den givne ' CDN 'sti inden for '
” tag for at anvende Tailwind-funktionaliteterne. - Opret nu fire afsnit ved hjælp af ' ' tag indeholdende ' tekst-dekoration ” ejendom tildelt med en forskellig værdi i hvert tilfælde, som diskuteret.
- Dette understreger teksten med solide, dobbelte, bølgede, stiplede og stiplede linjer.
- Inkluder den givne ' CDN 'sti inden for '
Produktion
Fra dette resultat bekræftes det, at teksten er blevet dekoreret i overensstemmelse hermed.
Konklusion
Tekststilen kan indstilles og dekoreres ved hjælp af ' tekst-dekoration-stil ” ejendom tildelt med forskellige stilværdier. Disse værdier inkluderer solid, dobbelt, bølget, stiplet og stiplet. Denne blog handlede om at indstille tekst-dekorationsstilen ved hjælp af Tailwind CSS.