Text-decoration none использование примеры.

Text-decoration:none. Свойство Text-decoration со значением none, перечислим все возможные способы применения text-decoration:none.

Подробно о text-decoration none

1. Text-decoration:none в теге
2. Text-decoration:none в теге style
3. Text-decoration:none в файле css

Text-decoration:none в теге

Как вы знаете, для css возможны "3 способа css". Начнем с использования

text-decoration:none в теге.

Для этого нам понадобится:

Для этого нам потребуется тег с каким-то видом декорирования, например тег ссылки:

<a>Здесь текст</a>

Выведем прямо здесь эту ссылку:

Здесь текст

Внутрь помещаем attribute style с text-decoration:none

<a style="text-decoration:none">Здесь текст</a>
Результат:
Здесь текст


У нас получился результат отмены всех свойств text-decoration.

Свойство text-decoration none не работает добавляем "!important"

Если вдруг, свойство text-decoration none не работает добавляем !important :

<a style="text-decoration:none !important">Здесь текст</a>

Text-decoration:none в теге style

С attribute style разобрались в предыдущем пункте, теперь давайте используем тег style, чтобы также протестировать работу text-decoration:none

Нам опять понадобится какой-то тег для экспериментов, пусть это будет опять div

<div>Здесь текст</div>

В теге style, размещаем класс "text_decoration_none" со свойством text-decoration и значением none

<style>.text_decoration_none{text-decoration:none;}</style>

Этот же класс размещаем внутри тега div:

<a class="text_decoration_none">Здесь текст</a>
Соберем весь код вместе:

<style>.text_decoration_none{text-decoration:none;}</style>

<a class="text_decoration_none">Здесь текст</a>

Результат:
Здесь текст


Вывод о text-decoration:none в теге style

Мы видим, что наше подчеркивание было удалено.

text-decoration:none не работает

Если вдруг text-decoration:none не работает, то используем "!important".

Но иногда и этого не достаточно!

Как в выше приведенном примере, мы записали свойства вот так:

div.kod a.text_decoration_2 {

text-decoration: none !important;

}

Text-decoration:none в файле css

Чем будет отличаться данный пункт от предыдущего!?

Только тем, что сами стили мы располагаем в файле css.

Данные стили размещаем в файле css

.text_decoration_none_2{text-decoration:none;}


А блок, копия предыдущего!

<div class="text_decoration_none_2">Здесь текст</div>
Результат :
Здесь текст