Decoration css: text-decoration-color — CSS: Cascading Style Sheets

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-color щоб змінити колір оздоблення.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтаксис

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 Reference 
 CSS 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" />
        
    
    <тело>
         
Украшение текста
 
        
украшение текста: подчеркивание;
        
украшение текста: сквозное;
        
украшение текста: надчеркивание;
    
 
 стр. Подчеркнуть {
    /* рисует линию на 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 text-decoration
            свойство. 
        
    
 
 /* сокращенное свойство для установки оформления текста*/
р пролет {
    оформление текста: подчеркивание волнистым красным цветом 2px;
}
/* Этот приведенный выше код эквивалентен
  р пролет {
    строка оформления текста: подчеркивание;
    стиль оформления текста: волнистый;
    цвет оформления текста: красный;
    толщина оформления текста: 2px;
  }
*/ 
  Вывод браузера 
  Примечание  : Значение  text-decoration-line  является обязательным, а другие необязательными.
 Различные свойства, связанные с оформлением текста 
 Давайте рассмотрим пример свойства  text-decoration-line ,
 HTML
 CSS
 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
        
текстовая-декорационная-линия: подчеркивание;
    
 
 р {
    /* подчеркивает текст */
    строка оформления текста: подчеркивание;
} 
  Вывод браузера 
 Возможные значения для  text-decoration-line :  underline  ,  overline  или  line-through  .
 Давайте рассмотрим пример свойства  text-decoration-style ,
 HTML
 CSS
 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
        
стиль оформления текста: пунктир;
    
 
 р {
    строка оформления текста: подчеркивание;
    /* делаем линию пунктирной */
    стиль оформления текста: пунктир;
} 
  Вывод браузера 
 Возможные значения для  text-decoration-style :  сплошной  ,  пунктирный  ,  пунктирный  ,  двойной  и  волнистые  .
 Давайте рассмотрим пример свойства  text-decoration-color ,
 HTML
 CSS
 
  <голова> <метакодировка="UTF-8" />