Uživatelsky přitažlivé webové stránky často vyžadují, aby bylo čas od času připojeno několik metod stylingu. V takových situacích lze styl výzdoby textu provést několika způsoby na základě různých hodnot podle požadavků, aby web vynikl.
Tento blog se bude týkat následujících oblastí obsahu:
Jak nastavit styl zdobení textu v Tailwind CSS?
Styl textu lze nastavit a ozdobit pomocí „ text-decoration-style ” vlastnost přiřazená různým hodnotám stylu.
Vlastnosti stylu dekorace textu
| Třída | Vlastnosti |
| dekorace-pevná | text-decoration-style: solid; |
| dekorace-dvojitá | text-decoration-style: double; |
| dekorace-vlnitá | text-decoration-style: vlnitý; |
| dekorace-čárkovaný | text-decoration-style: přerušovaná; |
| ozdoba tečkovaná | text-decoration-style: tečkovaný; |
Příklad: Nastavení stylu zdobení textu v Tailwind CSS
Tento příklad využívá výše diskutované „ text-decoration-style ” vlastnost se všemi hodnotami pro stylování textu odstavce:
DOCTYPE html >< html >
< hlava >
< meta znaková sada = 'utf-8' >
< meta název = 'výřez' obsah = 'width=device-width, initial-scale=1' >
< skript src = 'https://cdn.tailwindcss.com' > skript >
hlava >
< tělo >
< div >
< p třída = 'podtržení dekorace-pevné ...' > Toto je web Linuxhint p >
< p třída = 'podtržení dekorace-dvojité ...' > Toto je web Linuxhint p >
< p třída = 'podtržení dekorace-vlnité ...' > Toto je web Linuxhint p >
< p třída = 'podtržení dekorace-čárkovaná...' > Toto je web Linuxhint p >
< p třída = 'podtržené zdobení-tečkované...' > Toto je web Linuxhint p >
div >
tělo >
html >
Na základě tohoto kódu použijte následující kroky:
-
- Zahrňte dané „ CDN “cesta v rámci “
” pro použití funkcí Tailwind. - Nyní vytvořte čtyři odstavce pomocí „ ” tag obsahující “ text-dekorace ” vlastnost přiřazená v každém případě s jinou hodnotou, jak bylo uvedeno.
- To ve výsledku podtrhne text plnými, dvojitými, zvlněnými, přerušovanými a tečkovanými čarami.
- Zahrňte dané „ CDN “cesta v rámci “
Výstup
Z tohoto výsledku je ověřeno, že text byl odpovídajícím způsobem zdoben.
Závěr
Styl textu lze nastavit a ozdobit pomocí „ text-decoration-style ” vlastnost přiřazená různým hodnotám stylu. Tyto hodnoty zahrnují plné, dvojité, vlnité, přerušované a tečkované. Celý tento blog byl o nastavení stylu zdobení textu pomocí Tailwind CSS.