Этот блог охватывает следующие области контента:
- Как применить оформление текста с помощью наведения, фокуса и активных состояний попутного ветра?
- Применение оформления текста с помощью состояния «наведение».
- Применение оформления текста с состоянием «фокус».
- Применение оформления текста с «активным» состоянием.
Как применить оформление текста с помощью наведения, фокуса и активных состояний попутного ветра?
Текст можно украсить с помощью кнопки « текст-оформление ' свойство. Это свойство можно применять с различными состояниями модификатора, например « зависать ', ' фокус ' и ' активный », чтобы соответствующим образом украсить текст в зависимости от действия пользователя.
Пример 1: Применение оформления текста с помощью состояния «наведение»
В этом примере применяется « текст-оформление ” так, что оно не подчеркивается по умолчанию, но становится подчеркнутым при наведении курсора мыши:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >
< тело >
< текстовая область сорт '=' 'без подчеркивания при наведении: подчеркивание' > Это CSS Tailwind < / текстовая область >
< / тело >
< / HTML >
В соответствии с этими строками кода укажите путь CDN в разделе « <голова> ” для использования функций Tailwind. Теперь примените комбинированное « текст-оформление » имущество вместе с « зависать » заявите так, что при наведении на элемент он будет подчеркнут.
Выход
Как видно, « <текстовая область> ” элемент подчеркивается при успешном наведении курсора мыши.
Пример 2: Применение оформления текста с состоянием «фокус»
Следующий блок кода украшает текст, включая « фокус ' состояние. Это подчеркивает текст (не подчеркнутый по умолчанию) при фокусировке элемента с помощью « Вкладка ' ключ:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >
< тело >
< текстовая область сорт '=' 'без подчеркивания фокус: подчеркивание' >Это CSS Tailwind< / текстовая область >
< / тело >
< / HTML >
Согласно этому коду:
- Аналогичным образом включите путь CDN и добавьте « <текстовая область> элемент.
- После этого используйте « текст-оформление », которое по умолчанию делает текст не подчеркнутым.
- Связанное « фокус Затем состояние подчеркивает текст после того, как элемент становится фокусным.
Выход
Этот результат означает, что содержащийся в элементе текст подчеркивается при нажатии кнопки « Вкладка Ключ, т. е. фокусировка на элементе.
Пример 3: Применение оформления текста с «активным» состоянием
В этом примере текст можно оформить так, чтобы « Линия, проходящая через Свойство ” применяется к нему, когда элемент активен:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >
< тело >
< текстовая область сорт '=' «активно без подчеркивания: сквозное» >Это CSS Tailwind< / текстовая область >
< / тело >
< / HTML >
В этом фрагменте кода примените указанные ниже шаги:
- Вспомним обсуждавшиеся методологии включения пути CDN и « <текстовая область> элемент.
- Теперь примените оформление текста « без подчеркивания ” по умолчанию и выделите свойство “ активный ” состояние с “ Линия, проходящая через ».
- В результате это перечеркивает содержащийся текст, когда элемент становится активным.
Выход
Из этих выходных данных можно проверить, что текст оформлен соответствующим образом в соответствии с примененным состоянием.
Заключение
Текст можно украсить с помощью кнопки « текст-оформление ' свойство. Это свойство можно применить с помощью « зависать ', ' фокус ' и ' активный Модификатор » указывает на украшение текста при наведении курсора мыши, на элементе, находящемся в фокусе, или на активном элементе соответственно.