Привлекателните за потребителите уебсайтове често изискват добавяне на множество методологии за стилизиране от време на време. В такива ситуации стилизирането на текстовата декорация може да се извърши по множество начини въз основа на различни стойности според изискванията, за да се открои сайтът.
Този блог ще обхваща следните области на съдържание:
Как да задам стила на декорация на текст в Tailwind CSS?
Стилът на текста може да бъде зададен и украсен с помощта на „ text-decoration-style ” свойство, разпределено с различни стилови стойности.
Свойства на стила на декорация на текст
| Клас | Имоти |
| декорация-солидна | text-decoration-style: плътен; |
| декорация-двойна | text-decoration-style: двойно; |
| украса-вълнисти | text-decoration-style: вълнообразен; |
| украса-щрихована | text-decoration-style: пунктиран; |
| украса-на точки | text-decoration-style: пунктиран; |
Пример: Задаване на стила на декорация на текст в Tailwind CSS
Този пример използва обсъдения по-горе „ text-decoration-style ” свойство с всички стойности за стилизиране на текста на абзаца:
DOCTYPE html >< html >
< глава >
< мета набор от знаци = 'utf-8' >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1' >
< сценарий src = 'https://cdn.tailwindcss.com' > сценарий >
глава >
< тяло >
< див >
< стр клас = 'подчертаване на декорация-твърдо ...' > Това е уебсайт на Linuxhint стр >
< стр клас = 'подчертаване на декорация-двойно ...' > Това е уебсайт на Linuxhint стр >
< стр клас = 'подчертаване на декорация-вълнообразно ...' > Това е уебсайт на Linuxhint стр >
< стр клас = 'подчертаване на декорация-прекъснато ...' > Това е уебсайт на Linuxhint стр >
< стр клас = 'подчертаване на декорация-пунктиран ...' > Това е уебсайт на Linuxhint стр >
див >
тяло >
html >
Въз основа на този код приложете следните стъпки:
-
- Включете даденото „ CDN ' път в рамките на ' <глава> ”, за да приложите функционалностите на Tailwind.
- Сега създайте четири абзаца, като използвате „ ” етикет, съдържащ „ текст-украса ” свойство, присвоено с различна стойност във всеки случай, както беше обсъдено.
- Това в резултат подчертава текста с плътни, двойни, вълнообразни, прекъснати и пунктирани линии.
Изход
От този резултат се потвърждава, че текстът е декориран по съответния начин.
Заключение
Стилът на текста може да бъде зададен и украсен с помощта на „ text-decoration-style ” свойство, разпределено с различни стилови стойности. Тези стойности включват плътни, двойни, вълнообразни, прекъснати и пунктирани. Този блог беше изцяло за настройка на стила на декориране на текст с помощта на Tailwind CSS.