CSS-свойство text-decoration-style устанавливает линии,заданные text-decoration-line.
CSS-свойство text-decoration-style устанавливает стиль линий,заданных text-decoration-line.Стиль применяется ко всем линиям,заданным с помощью text-decoration-line .
Определение и использование Свойство text-decoration-style устанавливает стиль оформления текста (например,сплошной,волнистый,точечный,пунктирный,двойной).Совет:Также посмотрите на свойство text-decoration,которое является сокращением свойств text-decoration-line,text-decoration-style,text-decoration-color и text-decoration-thickness.
CSS-свойство text-decoration-line задает вид украшения,которое используется для текста в элементе,например,подчеркивание или надчеркивание.
Свойство CSS text-decoration-style устанавливает стиль строк, заданных параметром text-decoration-line . Стиль применяется ко всем строкам, которые заданы с помощью text-decoration-line
Try it
Если указанное оформление имеет конкретное семантическое значение, такое как прямая линия, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью HTML-тега, например <del> или <s> . Так как в некоторых случаях браузеры могут отключить стилизацию, семантическое значение не исчезнет в такой ситуации.
При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .
Syntax
/ * Значения ключевых слов * / text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; / * Глобальные значения * / text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: revert; text-decoration-style: revert-layer; text-decoration-style: unset;
Values
- solid
Рисует одну линию.
- double
Рисует двойную линию.
- dotted
Рисует пунктирную линию.
- dashed
Рисует пунктирную линию.
- wavy
Рисует волнистую линию.
- -moz-none Non-standard
Не рисует линии. Используйте
text-decoration-line: none.
Formal definition
| Initial value | solid |
|---|---|
| Applies to | все элементы. Это также относится к ::first-letter и ::first-line . |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
text-decoration-style = solid | double | dotted | dashed | wavy
Examples
Установка волнистого подчеркивания
Следующие действия создают красное волнистое подчеркивание:
CSS
.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }
HTML
<p>This text has a wavy red line beneath it.</p>
Results
Specifications
| Specification |
|---|
| Модуль оформления текста CSS, уровень 3 # text-decoration-style-property |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
text-decoration-style | 57 | 79 | 36 6-39 | No | 44 | 12.1 8 | 57 | 57 | 36 6-39 | 43 | 12. 8 | 7.0 |
wavy | 57 | 79 | 6 | No | 44 | 8 | 57 | 57 | 6 | 43 | 7.0 |
2See also
- При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения
text-decoration. text-decoration-linetext-decoration-colortext-decoration-thicknesstext-underline-offset
CSS
-
text-decoration-skip
Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.
-
text-decoration-skip-ink
CSS-свойство text-decoration-skip-ink определяет,как рисуются надстрочные и подстрочные линии,когда они проходят мимо глифа ascenders descenders.
-
text-decoration-thickness
CSS-свойство text-decoration-thickness задает обводку линии,которая используется элементом,например,line-through,underline,overline.
text-emphasis
Свойство text-emphasis CSS применяет знаки к (кроме пробелов и управляющих символов).
- 1
- …
- 781
- 782
- 783
- 784
- 785
- …
- 857
- Next
Наследование стилей: text-decoration | PHPClub
JavaScript отключён.
Чтобы полноценно использовать наш сайт, включите JavaScript в своём браузере.
- Автор темы sayber
- Дата начала
sayber
Новичок
- #1
Если открыть этот код в браузере, то мы увидим слово «hello», подчеркнутое сверху и снизу.
Но я же переопределил свойство text-decoration для дочернего тега и слово «hello» должно быть подчеркнуто только сверху.
Вопрос: как сделать так, чтобы text-decoration не накладывался, а заменялся для дочерних тегов?
P.S. Отображается в Firefox, Opera и IE одинаково.
PHP:
<html>
<head>
<style type="text/css">
DIV.sample {text-decoration: underline;}
DIV.sample DIV {text-decoration: overline !important;}
</style>
</head>
<body>
<div>
<div>hello</div>
</div>
</body>
</html>
filipchuk
Новичок
- #2
-~{}~ 14.
12.07 12:14:
все правильно браузер показывает… пиши тогда
Код:
<div>
<div>hello</div>
</div>
sayber
Новичок
- #3
Тоже способ, спасибо. Но все же костыль<div>
Нажмите для раскрытия…
Я все-таки думал, что проблему можно решить только средствами CSS.
filipchuk
Новичок
- #4
Код:
DIV.sample0 DIV.samle {text-decoration: none;} <DIV> <div> <div>hello</div> </div> </DIV>
sayber
Новичок
- #5
Все же аттрибут добавить проще, чем обертку.
@ndrey
Новичок
- #6
никак, т.к. text-decoration не наследуется, так же как и border, background и некоторые другие.Вопрос: как сделать так, чтобы text-decoration не накладывался, а заменялся для дочерних тегов?
Нажмите для раскрытия.
..
Данное свойство влияет на все элементы следующего уровня. Т.е . в приведенном примере правило DIV.sample DIV не переопределяет родителя, а добавляет к нему (и к нижеследующим) новое оформление (!important вообще не причем).
Войдите или зарегистрируйтесь для ответа.
Поделиться:Facebook Twitter WhatsApp Ссылка
text-decoration-skip — CSS: Каскадные таблицы стилей
Экспериментальная: Это экспериментальная технология
Внимательно проверьте таблицу совместимости браузера, прежде чем использовать ее в производстве.
Свойство CSS text-decoration-skip устанавливает, какие части содержимого элемента должны пропускать любые текстовые декорации, влияющие на элемент. Он контролирует все линии оформления текста, нарисованные элементом, а также любые линии оформления текста, нарисованные его предками.
Примечание: Большинство других браузеров сходятся на поддержке более простого свойства text-decoration-skip-ink .
/* Значения ключевых слов */ пропустить текстовое оформление: нет; текст-украшение-пропустить: объекты; текст-украшение-пропустить: пробелы; text-decoration-skip: края; text-decoration-skip: box-decoration; /* Несколько ключевых слов */ text-decoration-skip: пробелы объектов; text-decoration-skip: начальные пробелы, конечные пробелы; text-decoration-skip: оформление краев объектов box-decoration; /* Глобальные значения */ text-decoration-skip: наследовать; текст-украшение-пропустить: начальный; текст-украшение-пропустить: вернуться; пропустить оформление текста: вернуть слой; пропустить текстовое оформление: не установлено;
Значения
-
нет Ничего не пропущено.
Таким образом, оформление текста рисуется для всего текстового содержимого и для атомарных блоков встроенного уровня.-
объекты Весь блок поля элемента пропускается, если он является атомарным встроенным, например изображением или встроенным блоком.
-
мест Пропускаются все пробелы: все пробельные символы Unicode и все разделители слов, а также любые соседние
интервал между буквамиилиинтервал между словами.-
начальные пробелы То же, что и
пробелов, за исключением того, что пропускаются только начальные пробелы.-
конечные пробелы То же, что и
пробелов, за исключением того, что пропускаются только конечные пробелы.-
края Начало и конец текстового оформления немного смещены (например, на половину толщины линии) от края содержимого поля оформления.
Таким образом, соседние элементы получают отдельные подчеркивания. (Это важно для китайского языка, где подчеркивание является формой пунктуации.)-
украшение коробки Текстовое оформление пропускается на полях, границах и отступах блока. Это влияет только на украшения, наложенные предком; коробка для украшения никогда не закрашивает собственное украшение коробки.
| Исходное значение | объекты |
|---|---|
| Применяется ко всем элементам | |
| Унаследовано | да |
| Вычисленное значение | как указано |
| Тип анимации | дискретный | 9010 4
text-decoration-skip =
нет |
auto
Пропуск ребер
HTML
Эй, возьми чашечку кофе!
CSS
р {
маржа: 0;
размер шрифта: 3em;
оформление текста: подчеркивание;
text-decoration-skip: края;
}
Результат
| Спецификация |
|---|
| Модуль оформления текста Уровень 4 # text-decoration-skipping | 9 0104
Таблицы BCD загружаются только в браузере с включенным JavaScript.
Включите JavaScript для просмотра данных.
-
text-decoration-skip-ink
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Последний раз эта страница была изменена участниками MDN.
Оформление текста CSS (с примерами)
В этом уроке вы узнаете о оформлении текста CSS с помощью примеров.
CSS text-decoration Свойство используется для украшения внешнего вида текста с помощью различных строк. Например,
диапазон {
оформление текста: подчеркивание;
} Вывод браузера
Здесь text-decoration: underline подчеркивает текст внутри элемента span .
Синтаксис оформления текста CSS
Синтаксис свойства text-decoration следующий:
text-decoration: value | начальная | наследовать;
Обычно используемые значения для text-decoration : underline , overline , сквозной , наследует , а нет .
Например,
HTML
CSS
<голова>
<метакодировка="UTF-8" />
<ссылка rel="stylesheet" href="style.css" />
Украшение текста CSS
<тело>
Украшение текста
украшение текста: подчеркивание;
украшение текста: сквозное;
украшение текста: надчеркивание;
стр. подчеркивание {
/* рисует линию на 1 пиксель ниже текста по базовой линии */
оформление текста: подчеркивание;
}
p.line-через {
/* рисует линию толщиной 1 пиксель поперек текста посередине */
оформление текста: сквозное;
}
p.overline {
/* рисует линию высотой 1 пиксель над текстом вверху */
оформление текста: надчеркивание;
} Вывод браузера
Оформление текста как сокращенное свойство
Мы также можем использовать text-decoration в качестве сокращенного свойства для установки цвета, стиля и толщины текстовой строки.
Оригинальный синтаксис text-decoration is,
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
Здесь,
-
text-decoration-line: устанавливает тип оформления линии для нашего текста -
text-decoration-color: устанавливает цвет для оформления линии -
text-decoration-style: устанавливает стиль строки, заданныйtext-decoration-line -
text-decoration-thickness: устанавливает толщину линии, используемой в оформлении
Давайте посмотрим на пример,
HTML
CSS
<голова>
<метакодировка="UTF-8" />
<ссылка rel="stylesheet" href="style.css" />
Украшение текста CSS
<тело>
Украшение сокращенного текста
<р>
Мы можем украсить наш текст, используя CSS text-decoration
свойство.
/* сокращенное свойство для установки оформления текста*/
р пролет {
оформление текста: подчеркивание волнистым красным цветом 2px;
}
/* Этот приведенный выше код эквивалентен
р пролет {
строка оформления текста: подчеркивание;
стиль оформления текста: волнистый;
цвет оформления текста: красный;
толщина оформления текста: 2px;
}
*/ Вывод браузера
Примечание : Значение text-decoration-line является обязательным, а другие необязательными.
Различные свойства, связанные с оформлением текста
Давайте рассмотрим пример свойства text-decoration-line ,
HTML
CSS
<голова>
<метакодировка="UTF-8" />
<ссылка rel="stylesheet" href="style.css" />
Строка оформления текста CSS
<тело>
текстовая-декорационная-линия: подчеркивание;
р {
/* подчеркивает текст */
строка оформления текста: подчеркивание;
} Вывод браузера
Возможные значения для text-decoration-line : underline , overline или line-through .
Давайте рассмотрим пример свойства text-decoration-style ,
HTML
CSS
<голова>
<метакодировка="UTF-8" />
<ссылка rel="stylesheet" href="style.css" />
стиль оформления текста CSS
<тело>
стиль оформления текста: пунктир;
р {
строка оформления текста: подчеркивание;
/* делаем линию пунктирной */
стиль оформления текста: пунктир;
} Вывод браузера
Возможные значения для text-decoration-style : сплошной , штриховой , точечный , двойной и волнистые .
Давайте рассмотрим пример свойства text-decoration-color ,
HTML
CSS
<голова> <метакодировка="UTF-8" />
