CSS text decoration style
HTML5CSS.ruЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Полный CSS Справочник Дальше ❯
Пример
Задайте различные типы стилей оформления текста:
div.a {text-decoration-line: underline;
text-decoration-style: solid;
}
div.b
{
text-decoration-line: underline;
text-decoration-style: wavy;
}
div.c
{
text-decoration-line: underline;
text-decoration-style: double;
}
div.d
{
text-decoration-line: overline underline;
text-decoration-style: wavy;
}
Определение и использование
Свойство text-decoration-style
задает стиль оформления текста (например, сплошная, волнистая, пунктирная, пунктирная, двойная).
Совет: Кроме того, посмотрите на свойство Text-decoration ие, которое представляет собой свойство с короткими руками для текста, декорирования строк, текста и декора, а также текст-украшение-цвет.
Значение по умолчанию: | solid |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.textDecorationStyle=»wavy» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
text-decoration-style | 57.0 | Не поддерживается | 36.0 6.0 -moz- | Не поддерживается | 44.0 |
Синтаксис CSS
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
solid | Значение по умолчанию. Линия будет отображаться в виде одной строки | |
double | Линия будет отображаться как двойная линия | |
dotted | Линия будет отображаться как пунктирная линия | |
dashed | Линия будет отображаться как пунктирная линия | |
wavy | Линия будет отображаться как волнистая линия | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Text
HTML DOM Справочник: textDecorationStyle Свойство
❮ Назад Полный CSS Справочник Дальше ❯
Популярное CSS
css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
css властивість text-decoration
- Головна
- css
- властивості
- text-decoration
Властивість text-decoration
визначає оздоблення тексту. В CSS3 властивість text-decoration
є універсальною властивістю для наступних властивостей.
text-decoration-line
text-decoration-color
text-decoration-style
Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск. Пропущені властивості отримають їх початкові значення.
Властивість додає оздоблення понад нащадками. Це означає, що якщо для елементу вказаний text-decoration
, то дочірній елемент не може видалити це оформлення. Наприклад, якщо ми маємо абзац з нащадком:
This is text!
Правило text-decoration: underline;
додасть лінію для всього абзацу, але правило для text-decoration: none;
не призведе до змін; весь абзац все одно буде підкреслено.
Нотатка: | В CSS3 використовуйте властивість |
Синтаксис
text-decoration: none|underline|overline|line-through|initial|inherit;
Властивість text-decoration може отримувати 13 значень:
none
Звичайний текст. Без задання.
underline
Підкреслений текст.
overline
Лінія над текстом.
line-through
Закреслений текст.
blink
Блимання тексту(не підтримується всіма браузерами)
solid
Суцільна лінія
wavy
Лінія у формі хвилі.
dotted
Лінія крапками.
dashed
Лінія рисочками.
double
Подвійна лінія.
<color>
Значення кольору у будь-якому форматі.
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивості від свого батьківського елемента.
Значення без задання: | none |
---|---|
Наслідує: | Ні |
Анімується: | Так |
JavaScript синтаксис: | object.style.textDecoration=»underline» |
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
Переглядач | ||||||
---|---|---|---|---|---|---|
text-decoration | 1. 0 | 3.0 | 1.0 | 1.0 | 3.5 | 12.0 |
Переглядач | |||
---|---|---|---|
text-decoration | 1.0 | 1.0 | 1.0 |
Приклади
- Приклад 1
- Приклад 2
- Приклад 3
Різні значення властивості у дії
Приклад використання
Встановлює оздоблення тексту для заголовків першого, друго та третього рівнів.
h2 { text-decoration: overline; } h3 { text-decoration: line-through; } h4 { text-decoration: underline; }
Додаткові посилання
text-decoration-color
text-shadow
text-decoration-line
text-decoration-style
box-decoration-break
Свойство CSS text-decoration-style
❮ Назад Полное руководство по CSS Далее ❯
Пример
Установка различных стилей оформления текста:
дива {строка оформления текста: подчеркивание;
стиль оформления текста: сплошной;
}
дел. б
{
строка оформления текста: подчеркивание;
}
дел.с
{
строка оформления текста: подчеркивание;
стиль оформления текста: двойной;
}
дел.д
{
text-decoration-line: надчеркивание, подчеркивание;
стиль оформления текста: волнистый;
}
Определение и использование
Свойство text-decoration-style
устанавливает стиль оформления текста
(типа сплошной, волнистый, пунктирный, пунктирный, двойной).
Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.
Показать демо ❯
Значение по умолчанию: | твердый |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать о анимированном |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.textDecorationStyle=»волнистый» Попробуй |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.
Собственность | |||||
---|---|---|---|---|---|
стиль оформления текста | 57,0 | 79,0 | 36,0 6,0 -моз- | 12,1 | 44,0 |
Синтаксис CSS
text-decoration-style: сплошной|двойной|точечный|пунктирный|волнистый|начальный|наследовать;
Значения свойств
Значение | Описание | Играй |
---|---|---|
сплошной | Значение по умолчанию. Строка будет отображаться как одна строка | Демонстрация ❯ |
двойной | Линия будет отображаться как двойная линия | Демонстрация ❯ |
с точкой | Линия будет отображаться в виде пунктирной линии | Демонстрация ❯ |
пунктир | Линия будет отображаться пунктиром | Демонстрация ❯ |
волнистый | Линия будет волнистой | Демонстрация ❯ |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальный | |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник CSS: Оформление текста CSS
Ссылка HTML DOM: свойство textDecorationStyle
❮ Предыдущая Полное руководство по CSS Далее ❯
ПИКЕР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
90 002
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Оформление текста CSS (с примерами)
В этом уроке вы узнаете о оформлении текста CSS с помощью примеров.
CSS text-decoration
Свойство используется для украшения внешнего вида текста с помощью различных строк. Например,
диапазон { оформление текста: подчеркивание; }
Вывод браузера
Здесь, text-decoration: underline
подчеркивает текст внутри элемента span
.
Синтаксис оформления текста CSS
Синтаксис свойства text-decoration
следующий:
text-decoration: value | начальная | наследовать;
Обычно используемые значения для text-decoration
: underline
, overline
, line-through
, inherit
и none
. Например,
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" />