2.18. CSS3-оформление текста
Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Свойства для оформления текста
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки ( display: inline ) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.
Рис. 1. Прерывание линии подчеркивания
1.1. Вид линии оформления: свойство text-decoration-line
Поддержка браузерами
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
| text-decoration-line | |
|---|---|
| Значения: | |
| none | Ни оформляет, ни запрещает оформление текста. Значение по умолчанию. |
| underline | Подчёркивает каждую строку текста. |
| overline | Каждая строка текста имеет линию над ней (то есть на противоположной стороне от подчеркивания). |
| line-through | Добавляет линию через середину каждой строки текста. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.2. Стиль линии оформления: свойство text-decoration-style
Поддержка браузерами
Свойство не наследуется.
| text-decoration-style | |
|---|---|
| Значения: | |
| solid | Добавляет отрезок простой линии. Значение по умолчанию. |
| double | Две параллельные сплошные линии с небольшим промежутком между ними. |
| dotted | Последовательность круглых точек. |
| dashed | Последовательность прямоугольных штрихов. |
| wavy | Указывает на волнистую линию. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.3. Цвет линии оформления: свойство text-decoration-color
Поддержка браузерами
Свойство не наследуется.
1.4. Краткая запись свойств линии оформления: свойство text-decoration
Поддержка браузерами
1.5. Расположение линии оформления: свойство text-underline-position
Поддержка браузерами
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
2. Тень текста: свойство text-shadow
Поддержка браузерами
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration ). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Свойство не наследуется.
text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
text-decoration
Время чтения: меньше 5 мин
Обновлено 10 ноября 2021
Кратко
Свойство text-decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.
text-decoration: underline часто встречается при работе со ссылками.
Пример
Как это понять
По факту свойство text-decoration является шорткатом и позволяет указать значения для свойств:
Но, как правило, его используют только для указания положения линии.
Как пишется
Положение линии
Пишем свойство text-decoration и после двоеточия указываем одно из доступных значений:
Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.
Стиль линии
Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.
Для управления стилем линии используются следующие ключевые слова:
Управлять стилем подчёркивания обычно не требуется, но об этой возможности знать нужно.
Как будет выглядеть двойное перечёркивание:
Цвет линии
Мы можем изменить это значение, указав после ключевых слов типа и стиля линии код цвета в любом доступном в вебе формате.
Например, сделаем двойное подчёркивание красного цвета:
Цветом линии можно управлять отдельно при помощи свойства text-decoration-color :
Подсказки
💡 Свойство не наследуется.
💡 Свойство text-decoration целиком нельзя анимировать при помощи свойства transition 😒
Но можно анимировать цвет линии!
Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.
На практике
Егор Левченко
Алёна Батицкая
Свойство text-decoration
Синтаксис
Описание
Свойство text-decoration добавляет к тексту дополнительные элементы декора, такие как подчёркивание, зачёркивание текста, линия над текстом.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | не используются; |
| Медиа : | визуальные. |
Примечание
В CSS 3 можно устанавливать дополнительно цвет и тип линии.
JavaScript
Поддержка браузерами
[1] ‒ поддерживает синтаксис CSS 2-2.2.
Спецификация
Значения
none Указывает на отсутствие элементов декора. underline Подчёркивает текст.
overline Устанавливает линию над текстом.
line-through Перечёркивает текст.
blink Создаёт мигающий текст. (Данное свойство не поддерживается большинством современных браузеров.)
Задаёт тип элемента декора.
Задаёт стиль элемента декора.
Задаёт цвет элемента декора. inherit Указывает, что элемент должен унаследовать параметры родительского элемента.