Css text decoration none css: text-decoration-line | htmlbook.ru

Leave a Comment / Css / By /

Свойство text-decoration | CSS справочник

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-decoration1.01.03.51.03.012.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 свойства

CSS/Свойство text-decoration

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

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

Описание

Свойство text-decoration добавляет к тексту дополнительные элементы декора, такие как подчёркивание, зачёркивание текста, линия над текстом.

Применяется:ко всем элементам;
Наследование:отсутствует;
Проценты:не используются;
Медиа:визуальные.

Примечание

В CSS 3 можно устанавливать дополнительно цвет и тип линии.

JavaScript

[объект].style.textDecoration="[значение]";

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

Chrome

Поддерж.[1]

Firefox

Поддерж.[1]

Opera

Поддерж.[1]

Maxthon

Поддерж.[1]

IExplorer

Поддерж.[1]

Safari

Поддерж.[1]

iOS

Поддерж.[1]

Android

Поддерж.[1]

[1] ‒ поддерживает синтаксис CSS 2-2. 2.

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

CSSРаздел
15.4.3 ‘text-decoration’Перевод
216.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.116.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
2.216.3.1 Underlining, overlining, striking, and blinking: the ‘text-decoration’ property
32.4. Text Decoration Shorthand: the ‘text-decoration’ property

Значения

none
Указывает на отсутствие элементов декора.
underline
Подчёркивает текст.

text-decoration: underline;

overline
Устанавливает линию над текстом
.

text-decoration: overline;

line-through
Перечёркивает текст.

text-decoration: line-through;

blink
Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров.)
inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «none».

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство text-decoration</title>
</head>
<body>
<h2>Элементы декора</h2>
<p><span>Подчёркнутый текст</span>.

</p>
<p><span>Надчёркнутый текст</span>.</p>
<p><span>Перечёркнутый текст</span>.</p>
<p><span>Мигающий текст</span>.</p>
</body>
</html>

Свойство text-decoration

текстовое оформление | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-decoration добавляет к выделенному тексту подчеркивание, надчеркивание, сквозную линию или комбинацию строк.

 ч4 {
  оформление текста: подчеркивание;
}

Значения

  • нет : линия не рисуется, и любое существующее украшение удаляется.
  • подчеркивание : рисует линию толщиной 1 пиксель поперек текста на его базовой линии.
  • line-through : рисует линию толщиной 1 пиксель поперек текста в его «средней» точке.
  • overline : рисует линию толщиной 1 пиксель поперек текста, прямо над его «верхней» точкой.
  • наследовать : наследует украшение родителя.

Значение blink есть в спецификации W3C, но оно устарело и не будет работать ни в одном из текущих браузеров. Когда это сработало, текст «мигал», быстро переключаясь между 0% и 100% непрозрачностью.

Demo

Замечания по использованию

Вы можете комбинировать значения underline , overline или line-through в списке, разделенном пробелами, чтобы добавить несколько декоративных строк:

 p {
  text-decoration: надчеркивание, подчеркивание, перечеркивание;
}

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

text-decoration в качестве сокращенного свойства

text-decoration можно использовать в сочетании с text-decoration-style и text-decoration-color в качестве сокращенного свойства:

 .f {
  строка оформления текста: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
 
  /* можно сократить до */
  оформление текста: подчеркивание волнистым красным цветом;
}

В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с

- префикс webkit . Chrome также требуется префикс -webkit и экспериментальные функции веб-платформы, включенные в флагах Chrome.

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

Все браузеры поддерживают свойство CSS2.1 «longhand» text-decoration . Сокращенное свойство и подсвойства text-decoration-color , text-decoration-line и text-decoration-style поддерживаются без префикса в Firefox и с префиксом -webkit в Safari. Chrome также распознает эти значения с -префикс webkit и флаг экспериментальных веб-платформ включены.

Desktop
Chrome Firefox IE Edge Safari
113 112 No 110 TP

Mobile / Tablet
Android Chrome Android Firefox Android iOS Safari
110 110 109 16,4*

Подробнее

  • . текстовое оформление в MDN

цвет оформления текста

.element { text-decoration-color: оранжевый; }

строка оформления текста

.element {строка-украшения-текста: подчеркивание; }

текст-украшение-пропустить

.element { text-decoration-skip: ink; }

текст-украшение-пропустить-чернила

. element {text-decoration-skip-ink: none; }

стиль оформления текста

.element { стиль оформления текста: волнистый; }

толщина оформления текста

.element {толщина украшения текста: 2px; }

Как убрать подчеркивание ссылок в CSS

В веб-дизайне важна каждая деталь, включая ваши ссылки.

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

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

a:ссылка — когда пользователь не посещал, не наводил и не нажимал на ссылку

a:посещал — после посещения пользователем ссылки наведение курсора на ссылку

a:active — когда пользователь нажимает на ссылку

По умолчанию под ссылками появляется подчеркивание в каждом псевдосостоянии: при наведении, нажатии, посещении или отсутствии выше. Это показано в демо ниже:

Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство CSS text-decoration . Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание из ссылок на вашем сайте HTML или сайте Bootstrap.

Как удалить подчеркивание из ссылок в CSS

  1. Добавьте свой HTML-код в раздел вашей веб-страницы.
  2. Определите четыре псевдокласса ссылок со свойством text-decoration в разделе.
  3. Убедитесь, что a:link и:visited идут перед:hover, а:active идут последними. Это необходимо для каскадирования таблицы стилей.
  4. Установите для каждого свойства значение «нет».

Избранный ресурс

25 Советы по кодированию HTML и CSS

Заполните форму, чтобы получить доступ к вашим советам по программированию и шаблонам.

Процесс удаления подчеркивания действительно очень прост. Давайте взглянем на код в целом, а затем посмотрим, как он выглядит во внешнем интерфейсе.

Вот CSS:

 
 a:link { text-decoration: none; } 

 
 a:visited { text-decoration: none; } 

 
 a:hover { text-decoration: none; } 

 
 a:active {украшение текста: нет; }

Здесь важен порядок — a:link и a:visited должны идти первыми, затем a:hover , затем a:active .

Вот HTML:

 
 
Это ссылка, которая появляется внутри абзаца.

Вот результат:

См. Pen Remove Underline From Link With CSS 1 от Christina Perricone (@hubspot) на CodePen.

Также можно переключить подчеркивание, чтобы оно отображалось только при наведении на ссылку и нажатии. Сделайте это с помощью правила text-decoration: underline; вот так:

См. Pen Remove Underline From Link With CSS 2 by Christina Perricone (@hubspot) на CodePen.

Как удалить подчеркивание из ссылок в CSS в Bootstrap

Процесс удаления подчеркивания из ссылок немного отличается, если вы используете Bootstrap CSS в своем проекте. Давайте кратко обсудим процесс для сайтов Bootstrap.

По умолчанию в Bootstrap ссылки показывают подчеркивание, только когда они находятся в наведении или в активном состоянии. Это означает, что когда посетитель наводит курсор мыши на ссылку или нажимает на нее, он показывает подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены. Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не отображают подчеркивание.

Чтобы удалить подчеркивание в ссылках, независимо от их состояния, вам нужно добавить CSS.

Вот CSS:

 
 a:hover { text-decoration: none; } 

 
 a:active {украшение текста: нет; }

Вот HTML:

 
 
Это ссылка, которая появляется внутри абзаца. Ниже приведена ссылка, определенная классом кнопки Bootstrap.
 

 
 Ссылка

Вот результат:

См.

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

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