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

Содержание

text-decoration-line | CSS | WebReference

Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.

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

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

Синтаксис ?

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

Обозначения

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

Значения

line-through
Создает перечёркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчёркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчёркивания у ссылок, которое задано по умолчанию.

Песочница

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

Пример

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

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

Объект.style.textDecorationLine

Примечание

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

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

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

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

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

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

Браузеры

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

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

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

×

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

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

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

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

Курс по вёрстке сайта на CSS Grid

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

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

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

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

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

Например:

a { text-decoration: underline overline; }

a {

  text-decoration: underline overline;

}

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

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

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

Узнать подробнее

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

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

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

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

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

a {

  text-decoration-color: #f06d06;

}

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

a { text-decoration-style: wavy; }

a {

  text-decoration-style: wavy;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Chris Coyier

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

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

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

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

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

Узнать подробнее Тонкое управление свойством text-decoration

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

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

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и вышеДо 4.04.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 Text Decoration

Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

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

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

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

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

a { text–decoration–skip: ink; }

a { text–decoration–skip: ink; }

Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

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

Изучите курс и узнайте, как верстать современные сайты на 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; }

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

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

Заключение

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

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

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

Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

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

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

Узнать подробнее Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

PSD to HTML

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

Смотреть

text-decoration-style | CSS | WebReference

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

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

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

Синтаксис ?

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

Обозначения

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

Значения

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

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

Курс по вёрстке сайта на CSS Grid

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

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

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *