Text decoration none что это: Свойство text-decoration, подчёркивание и другие эффекты — Оформление текста — HTML Academy – text-decoration — CSS: Cascading Style Sheets

Тонкое управление свойством text-decoration

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

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

Для данного свойства можно задать несколько значений

Например:

a { text-decoration: underline overline; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Посмотрите описание данной возможности в Альманахе. Если быть точнее, то в данном случае происходит добавление нескольких значений для дополнительного свойства text-decoration-line.

Вы можете управлять цветом данного свойства

По умолчанию для данного свойства задается цвет, указанный для текста (в свойстве color). Но вы можете изменить это:

a { text-decoration-color: #f06d06; }

Посмотрите описание данной возможности в Альманахе.

Примечание: Браузерный «движок» Gecko отображает подчеркивание под нижним выносным элементом букв (подстрочным элементом литеры), а WebKit/Blink – над:

Слева показан пример в браузере Chrome, справа – в Firefox.

Обычно цветные подчеркивания реализуются с помощью свойства border, а не text-decoration. Для каждой из границ элемента может быть указан индивидуальный цвет, толщина, и позиционируются границы значительно лучше.

Но есть вещи, которые нельзя сделать с помощью границ, например…

Вы можете менять стиль данного свойства

Вы просто не сможете сделать также с помощью границ!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

a { text-decoration-style: wavy; }

Посмотрите описание данной возможности в Альманахе.

А можно сделать и еще лучше

Есть определенное желание сделать подчеркивание текста лучше. Например, пропускать подчеркивание нижних выносных элементов у букв для улучшения читабельности подчеркнутого текста:

Такая возможность будет доступна благодаря свойству text-decoration-skip, хотя она пока не реализована ни в одном из браузеров. А пока мы можем указать для подчеркивания более мягкий и менее контрастный цвет. Здесь можно применить rgba():

И, кстати, пропуск нижних выносных элементов у букв – это всего лишь одна из возможностей. Вы также сможете пропускать некоторые строчные элементы, пробелы и управлять подчеркиванием по краям текста.

Примечание: Похоже, что в Safari/iOS пропуск нижних выносных элементов у букв задан по умолчанию.

Если вы хотите отменить данное поведение, воспользуйтесь следующей записью: -webkit-text-decoration-skip: none;.

Тестирование

Из-за разной степени браузерной поддержки, некоторые (или все) демо-примеры могут не сработать в вашем браузере.

Так что да! Даже такие простые вещи, которые мы воспринимаем, как должное, могут со временем меняться в CSS царстве.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

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

Опубликовано: 18.08.2010 Последняя правка: 10.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" "http://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="http://spravka.seodon.ru/css/">Справочник по CSS</a></p>
 </body>
</html>
 

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

Версии CSS

Браузеры

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 Text Decoration

От автора: интернет работает на ссылках. Помимо всего прочего, у ссылок очень строгие ограничения по стилям, по большей части из соображений безопасности. Дизайнеры, например, Marcin Wichary заметили, что эти ограничения влияют на разборчивость ссылок, поэтому они предложили свои способы обхода этих запретов. CSS стандарты развиваются, и множество из этих проблем постепенно решаются, что улучшает юзабилити и внешний вид ссылок.

Свойство text–decoration–skip

По умолчанию ссылки имеют синий цвет с подчеркиванием. Подчеркивание заходит на нижние выноски таких букв как j, что затрудняет чтение ссылок. Есть множество обходных путей решения этой проблемы, но теперь в CSS есть свой способ – свойство text–decoration–skip. У свойства очень много значений, но цель всегда одна – указать места, где подчеркивание не должно отрисовыватться.

Большинство дизайнеров заинтересует значение ink, решающее описанную выше проблему. Это значение обрывает подчеркивание в местах с нижними выносками букв. Эффект можете посмотреть в начале статьи.

a { text–decoration–skip: ink; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В Safari 10 такое поведение встроено по умолчанию. Во всех остальных браузерах у свойства text–decoration–skip по умолчанию стоит значение none.

У свойства text–decoration–skip есть значение spaces, с которым подчеркивание не будет перепрыгивать между словами. Есть и другие значения, более подробно см. в статье на Mozilla Developer Network.

На данный момент свойство text–decoration–skip поддерживается в Safari, в Chrome поддержки нет. Однако в Chrome Canary поддержка есть, что, возможно, приведет в скором времени к поддержке и в обычном Chrome.

Свойство text-decoration-color

По умолчанию цвет подчеркивания ссылки наследуется от цвета текста. Существует множество способов установить другой цвет, самый простой через border-bottom вместо text-decoration. Однако теперь в CSS есть прямой способ изменять цвет подчеркивания:

a { text–decoration–color: #ccc; }

Поддержка у text–decoration–color почти такая же, как у text–decoration–skip: оба поддерживаются в Chrome Canary, но в просто Chrome и других браузерах нет.

Заключение

Пока что оба свойства имеют слабую поддержку в браузерах, но это скоро изменится, и в будущем их стоит использовать в своих стилях. Если вам важны такие мелочи типографского изящества, могу предложить парочку ресурсов:

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

text-decoration-style | CSS | WebReference

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

Краткая информация

Синтаксис ?

text-decoration-style: solid | double | dotted | dashed | wavy

Обозначения

Значения

solid

Одинарная линия.

double

Двойная линия.

dotted

Точечная линия.

dashed

Пунктирная линия.

wavy

Волнистая линия.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-style</title>
  <style>
   a {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="page/1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

Объектная модель

Объект.style.textDecorationStyle

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-style.

Safari поддерживает свойство -webkit-text-decoration-style.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

text-decoration-color | CSS | WebReference

Устанавливает цвет линии, которая добавляется через свойство text-decoration.

Краткая информация

Значение по умолчанию	Совпадает с цветом текста
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис ?

text-decoration-color: <цвет>

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-color</title>
  <style>
   a {
    text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="page/1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

В данном примере ссылки подчёркиваются красной линией.

Объектная модель

Объект.style.textDecorationColor

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-color.

Safari поддерживает свойство -webkit-text-decoration-color.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.10.2018

Редакторы: Влад Мержевич