Text decoration none в css: CSS Text Decoration — CSS — Независимое театральное объединение "Зрительские симпатии"

Содержание

CSS свойство text-decoration — Как создать сайт

CSS справочник

Определение и применение

CSS свойство text-decoration задает декорирование текста (подчеркивание, перечеркивание, линия над текстом).

Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:

text-decoration-line
text-decoration-style
text-decoration-color

Обращаю Ваше внимание, что в настоящее время вышеуказанные свойства (добавленные в CSS3) имеют очень ограниченную поддержку и не рекомендованы к использованию.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
text-decoration	1.0	1.0	3.5	1.0	3.0	12.0

CSS синтаксис:

text-decoration:"none | underline | overline | line-through | initial | inherit";

Допускается использование нескольких значений в одном объявлении:
text-decoration:"underline line-through overline";

В качестве короткой записи в CSS3:
text-decoration:"text-decoration-line text-decoration-style text-decoration-color  | initial | inherit";

JavaScript синтаксис:

object. style.textDecoration ="line-through"

Значения свойства

Значение	Описание
none	Определяет нормальный текст (без декорирования). Это значение по умолчанию
underline	Определяет линию под текстом.
overline	Определяет линию над текстом.
line-through	Определяет линию, проходящую через текст (перечеркивание).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration.</title>
<style> 
.test {
text-decoration : underline; /* добавляем декорирование текста (линия снизу) */
color : red; /* устанавливаем цвет шрифта */
}
. test2  {
text-decoration : overline; /* добавляем декорирование текста (линия сверху) */
color : green; /* устанавливаем цвет шрифта */
}
.test3 {
text-decoration : line-through; /* добавляем декорирование текста (перечеркивание) */
color : blue; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration: underline;</p>
		<p class = "test2">text-decoration: overline;</p>
		<p class = "test3">text-decoration: line-through;</p>
	</body>
</html>

Пример декорирования текста в CSS (свойство text-decoration).

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

seodon.ru | CSS справочник — text-decoration

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS text-decoration используется для оформления текста элемента — подчеркивания, надчеркивания, зачеркивания или мигания. Также с помощью этого свойства можно убирать подчеркивание у ссылок.

Хотя text-decoration и не наследуется, оно распространяет свое действие на текст всех потомков элемента, которые находятся в прямом потоке HTML-страницы. А вот если какие-то потомки являются всплывающими (float), абсолютно позиционированными (position) либо имеют значение свойства display равное inline-table или inline-block, то на них данное свойство не действует.

Тип свойства

Назначение: текст.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства text-decoration является ключевое слово none или inherit либо одно или несколько (через пробел) ключевых слов задающих стили оформления.

underline — подчеркивает текст элемента.
overline — надчеркивает текст, то есть рисует над ним линию.
line-through — отображается зачеркнутый текст.
blink — текст элемента мигает (мерцает), то есть кратковременно исчезает и вновь появляется.
none — отменяет все эффекты оформления.
inherit — наследует значение text-decoration от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none, однако браузеры по умолчанию подчеркивают текст у ссылок.

Цвет линий подчеркивания, надчеркивания или зачеркивания всегда соответствует цвету текста элемента (color) к которому применялось text-decoration. То есть даже если у потомков будет другой цвет текста, то цвет линий при этом не изменится.

Синтаксис

text-decoration: [underline || overline || line-through || blink] | none | inherit

Пример CSS: использование text-decoration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство text-decoration</title>
  <style type="text/css">
   a:hover {
    text-decoration: none; /* убрать подчеркивание у ссылок под курсором */
   }
  </style>
 </head>
 <body>
  <p><a href="https://spravka. seodon.ru/css/">Справочник по CSS</a></p>
 </body>
</html>

Результат примера

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox		Opera	Safari
Версия:	До 9.0	9.0 и выше	2.0 и выше	До 4.0	4.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Частично	Частично	Да	Частично	Частично

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

IE до версии 9.0, Chrome и Safari не поддерживают значение blink.

Opera применяет значение blink только к тексту самого элемента, но не его потомков.

Chrome, Safari, Firefox до версии 4. 0 не применяют данное свойство к потомку элемента, если этот потомок является HTML-таблицей.

IE 6.0 и 7.0, Chrome, Safari, Firefox до версии 4.0 применяют text-decoration к потомкам элемента, даже если они являются всплывающими, встроенными блоками (inline-block) или абсолютно позицонированными — ошибка.

css — Оформление текста: нет не работает

спросил 10 лет, 9 месяцев назад

Изменено 7 месяцев назад

Просмотрено 180 тысяч раз

Совершенно сбит с толку! Я пробовал переписать строку text-decoration: none несколькими способами. Мне также удалось изменить размер текста, нацелившись на него, но text-decoration: никто код не возьмет.

Приветствуется помощь.

Код

 .виджет
{
     высота: 320 пикселей;
     ширина: 220 пикселей;
     цвет фона: #e6e6e6;
     положение: родственник;
     переполнение: скрыто;
}


.  заголовок
{
     семейство шрифтов: Georgia, Times New Roman, с засечками;
     размер шрифта: 12px;
     цвет: #E6E6E6;
     выравнивание текста: по центру;
     межбуквенный интервал: 1px;
     преобразование текста: верхний регистр;
     цвет фона: #4D4D4D;
     положение: абсолютное;
     сверху: 0;
     отступ: 5px;
     ширина: 100%;
     нижняя граница: 1px;
     высота: 28 пикселей;
     текстовое оформление: нет;
}

Заголовок
{
     текстовое оформление: нет;
}

 
    <дел>
        Подчеркнуто. Почему?

У вас есть блочный элемент (div) внутри встроенного элемента (a). Это работает в HTML 5, но не в HTML 4.

Таким образом, только те браузеры, которые действительно поддерживают HTML 5.

Когда браузеры обнаруживают недопустимую разметку, они пытаются ее исправить, но разные браузеры делают это по-разному, поэтому результат может различаться. Некоторые браузеры будут перемещать блочный элемент за пределы встроенного элемента, некоторые будут его игнорировать.

Используйте псевдоклассы CSS и присвойте тегу класс, например: