Овај блог покрива следеће области садржаја:
- Како да примените декорацију текста помоћу Таилвинд Ховер, Фоцус и Ацтиве Статес?
- Примена декорације текста са „лебдећим“ стањем.
- Примена декорације текста са стањем „фокуса“.
- Примена декорације текста са „активним“ стањем.
Како да примените декорацију текста помоћу Таилвинд Ховер, Фоцус и Ацтиве Статес?
Текст се може украсити преко „ текст-декорација ' имовина. Ово својство се може применити са различитим стањима модификатора као што је „ лебдети ', ' фокус ' и ' активан ” да у складу с тим украсите текст након радње корисника.
Пример 1: Примена декорације текста са „лебдећим“ стањем
Овај пример примењује „ текст-декорација ” својство тако да није подвучено подразумевано, али постаје подвучено при преласку миша:
< хтмл >
< глава >
< мета цхарсет = 'утф-8' >
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1' >
< скрипта срц = '6Ф06Д28Ф9027ДФ871279Ц633ЕЦ9АД74482ДБ1519' >< / скрипта >< / глава >
< тело >
< тектареа класа = 'без подвлачења ховер: подцртавање' > Ово је Таилвинд ЦСС < / тектареа >
< / тело >
< / хтмл >
У складу са овим редовима кода, наведите ЦДН путању унутар „ <хеад> ” за коришћење Таилвинд функционалности. Сада примените комбиновани „ текст-декорација “ својство заједно са “ лебдети ” стање тако да након преласка елемента постаје подвучено.
Излаз
Као што се види, „ <тектареа> ” елемент је подвучен након успешног преласка миша.
Пример 2: Примена декорације текста са стањем „фокуса“.
Следећи блок кода украшава текст тако што укључује „ фокус ' држава. Ово подвлачи текст (подразумевано није подвучен) након што се елемент фокусира преко „ Таб ” кључ:
< хтмл >
< глава >
< мета цхарсет = 'утф-8' >
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1' >
< скрипта срц = '6Ф06Д28Ф9027ДФ871279Ц633ЕЦ9АД74482ДБ1519' >< / скрипта >< / глава >
< тело >
< тектареа класа = 'фокус без подвлачења: подвлачење' >Ово је Таилвинд ЦСС< / тектареа >
< / тело >
< / хтмл >
према овом коду:
- Слично томе, укључите ЦДН путању и укључите „ <тектареа> ” елемент.
- Након тога, користите „ текст-декорација ” својство које чини да текст подразумевано није подвучен.
- Повезани „ фокус ” онда подвлачи текст након што се елемент фокусира.
Излаз
Овај исход означава да се садржани текст у елементу подвлачи након притиска на „ Таб ” кључ, тј. фокусирање елемента.
Пример 3: Примена декорације текста са „активним“ стањем
У овом примеру, текст може бити украшен тако да „ лине-тхроугх ” својство се примењује на њега на елемент који је активан:
< хтмл >
< глава >
< мета цхарсет = 'утф-8' >
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1' >
< скрипта срц = '6Ф06Д28Ф9027ДФ871279Ц633ЕЦ9АД74482ДБ1519' >< / скрипта >< / глава >
< тело >
< тектареа класа = 'без подвлачења активно: линија-кроз' >Ово је Таилвинд ЦСС< / тектареа >
< / тело >
< / хтмл >
У овом исечку кода примените доле наведене кораке:
- Присетите се разматраних методологија за укључивање ЦДН путање и „ <тектареа> ” елемент.
- Сада примените декорацију текста ' без подвлачења ” подразумевано својство и доделите „ активан ” стање са “ лине-тхроугх ”.
- Ово резултира редовима кроз садржани текст на елементу који је активан.
Излаз
Из овог излаза може се потврдити да је текст правилно украшен у складу са примењеним стањем.
Закључак
Текст се може украсити преко „ текст-декорација ' имовина. Ово својство се може применити са „ лебдети ', ' фокус ' и ' активан ” модификатор наводи да украси текст при преласку миша, када је елемент фокусиран, односно елемент који је активан.