Site-urile web atrăgătoare pentru utilizatori necesită adesea mai multe metodologii de stil care să fie atașate din când în când. În astfel de situații, stilul decorului textului poate fi realizat în mai multe moduri, pe baza unor valori diferite, conform cerințelor pentru a face site-ul să iasă în evidență.
Acest blog va acoperi următoarele domenii de conținut:
Cum să setați stilul de decorare a textului în Tailwind CSS?
Stilul textului poate fi setat și decorat cu ajutorul „ text-decor-stil ” proprietate alocată cu diferite valori de stil.
Proprietăți stil de decorare text
| Clasă | Proprietăți |
| decor-solid | text-decor-stil: solid; |
| decor-dublu | text-decor-stil: dublu; |
| decor-ondulat | text-decor-stil: ondulat; |
| decor-liniata | text-decor-stil: punctat; |
| decor-punctată | text-decor-stil: punctat; |
Exemplu: setarea stilului de decorare a textului în CSS Tailwind
Acest exemplu utilizează „ text-decor-stil ” proprietate cu toate valorile pentru stilul textului paragrafului:
DOCTYPE html >< html >
< cap >
< meta set de caractere = 'utf-8' >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >
< scenariu src = „https://cdn.tailwindcss.com” > scenariu >
cap >
< corp >
< div >
< p clasă = 'decor de subliniat-solid...' > Acesta este site-ul Linuxhint p >
< p clasă = „subliniere decor-dublu...” > Acesta este site-ul Linuxhint p >
< p clasă = 'decor de subliniere - ondulat...' > Acesta este site-ul Linuxhint p >
< p clasă = „subliniați decor-liniate...” > Acesta este site-ul Linuxhint p >
< p clasă = „subliniați decor punctat...” > Acesta este site-ul Linuxhint p >
div >
corp >
html >
Pe baza acestui cod, aplicați următorii pași:
-
- Includeți „ CDN ” calea în cadrul ”
” pentru a aplica funcționalitățile Tailwind. - Acum, creați patru paragrafe folosind „ „etichetă care conține „ text-decor ” proprietate atribuită cu o valoare diferită în fiecare caz, după cum sa discutat.
- Astfel, subliniază textul cu linii solide, duble, ondulate, întrerupte și punctate.
- Includeți „ CDN ” calea în cadrul ”
Ieșire
Din acest rezultat, se verifică că textul a fost decorat corespunzător.
Concluzie
Stilul textului poate fi setat și decorat cu ajutorul „ text-decor-stil ” proprietate alocată cu diferite valori de stil. Aceste valori includ solid, dublu, ondulat, punctat și punctat. Acest blog a fost totul despre setarea stilului de decorare a textului folosind Tailwind CSS.