A felhasználókat vonzó webhelyek gyakran több stílusmódszert igényelnek, amelyeket időről időre hozzá kell csatolni. Ilyen helyzetekben a szövegdíszítés stílusát többféleképpen is meg lehet valósítani különböző értékek alapján, a követelményeknek megfelelően, hogy a webhely kiemelkedjen.
Ez a blog a következő tartalmi területeket fedi le:
Hogyan állítsuk be a szövegdekorációs stílust a Tailwind CSS-ben?
A szövegstílus beállítható és díszíthető a „ szöveg-dísz-stílus ” tulajdonság különböző stílusértékekkel hozzárendelve.
Szöveg dekorációs stílus tulajdonságai
| Osztály | Tulajdonságok |
| dekoráció-szilárd | szöveg-dekorációs stílus: tömör; |
| dekoráció-kettős | szöveg-dekorációs-stílus: dupla; |
| dekoráció-hullámos | szöveg-dísz-stílus: hullámos; |
| díszítés-szaggatott | text-decoration-style: szaggatott; |
| dekoráció-pontozott | text-decoration-style: pontozott; |
Példa: A szövegdekorációs stílus beállítása a Tailwind CSS-ben
Ez a példa a fent tárgyalt ' szöveg-dísz-stílus ” tulajdonság a bekezdés szövegének stílusához szükséges összes értékkel:
DOCTYPE html >< html >
< fej >
< meta karakterkészlet = 'utf-8' >
< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >
< forgatókönyv src = 'https://cdn.tailwindcss.com' > forgatókönyv >
fej >
< test >
< div >
< p osztály = 'aláhúzás dekoráció-szilárd...' > Ez a Linuxhint webhely p >
< p osztály = 'aláhúzott díszítés-dupla...' > Ez a Linuxhint webhely p >
< p osztály = 'aláhúzott dekoráció-hullámos...' > Ez a Linuxhint webhely p >
< p osztály = 'aláhúzott díszítés-szaggatott...' > Ez a Linuxhint webhely p >
< p osztály = 'aláhúzás díszítéssel-pontozott...' > Ez a Linuxhint webhely p >
div >
test >
html >
A kód alapján hajtsa végre a következő lépéseket:
-
- Tartalmazza a megadott ' CDN 'útvonal a '
” címkét a Tailwind funkciók alkalmazásához. - Most hozzon létre négy bekezdést a ' ' címke, amely tartalmazza a ' szöveg-dekoráció ” tulajdonság minden esetben más értékkel van hozzárendelve a megbeszéltek szerint.
- Ennek eredményeként a szöveget tömör, dupla, hullámos, szaggatott és pontozott vonalakkal húzza alá.
- Tartalmazza a megadott ' CDN 'útvonal a '
Kimenet
Ebből az eredményből kiderül, hogy a szöveget ennek megfelelően díszítették.
Következtetés
A szövegstílus beállítható és díszíthető a „ szöveg-dísz-stílus ” tulajdonság különböző stílusértékekkel hozzárendelve. Ezek az értékek a következők: tömör, dupla, hullámos, szaggatott és pontozott. Ez a blog a szövegdekorációs stílus beállításáról szólt a Tailwind CSS használatával.