Kako nastaviti slog dekoracije besedila v Tailwind CSS

Za uporabnike privlačna spletna mesta pogosto zahtevajo občasno dodajanje več stilskih metodologij. V takšnih situacijah se lahko oblikovanje besedilne dekoracije izvede na več načinov na podlagi različnih vrednosti v skladu z zahtevami, da spletno mesto izstopa.

Ta blog bo pokrival naslednja vsebinska področja:

Kako nastaviti slog dekoracije besedila v Tailwind CSS?

Slog besedila lahko nastavite in okrasite s pomočjo » text-decoration-style ” lastnost, dodeljena z različnimi slogovnimi vrednostmi.

Lastnosti sloga dekoracije besedila

Razred	Lastnosti
okras-trdna	text-decoration-style: solid;
okras-dvojno	text-decoration-style: dvojno;
okras-valovit	text-decoration-style: valovit;
okras-črtano	text-decoration-style: črtkano;
okras-pikčasto	text-decoration-style: pikčasto;

Primer: nastavitev sloga dekoracije besedila v Tailwind CSS

Ta primer uporablja zgoraj obravnavani ' text-decoration-style ” z vsemi vrednostmi za oblikovanje besedila odstavka:

DOCTYPE html >
< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< scenarij src = 'https://cdn.tailwindcss.com' > scenarij >
glavo >
< telo >
< div >
< str razred = 'podčrtaj okras-trdno ...' > To je spletno mesto Linuxhint str >
< str razred = 'podčrtani okras-dvojno ...' > To je spletno mesto Linuxhint str >
< str razred = 'podčrtani okras-valovit ...' > To je spletno mesto Linuxhint str >
< str razred = 'podčrtaj dekoracijo-črtkano ...' > To je spletno mesto Linuxhint str >
< str razred = 'podčrtani okras-pikčasto ...' > To je spletno mesto Linuxhint str >
div >
telo >
html >

Na podlagi te kode uporabite naslednje korake:

- Vključite dano ' CDN ' pot znotraj ' ” za uporabo funkcij Tailwind.
- Zdaj ustvarite štiri odstavke z uporabo '
  ', ki vsebuje ' besedilo-okras ” lastnini, ki je v vsakem primeru dodeljena drugačna vrednost, kot je razloženo.
- To posledično podčrta besedilo s polnimi, dvojnimi, valovitimi, črtkanimi in pikčastimi črtami.

Izhod

Iz tega izida je potrjeno, da je bilo besedilo ustrezno okrašeno.

Zaključek

Slog besedila lahko nastavite in okrasite s pomočjo » text-decoration-style ” lastnost, dodeljena z različnimi slogovnimi vrednostmi. Te vrednosti vključujejo polno, dvojno, valovito, črtkano in pikčasto. Ta blog je bil posvečen nastavitvi sloga dekoracije besedila z uporabo Tailwind CSS.

Kako nastaviti slog dekoracije besedila v Tailwind CSS