text-decoration-color — CSS — Дока
- Кратко
- Пример
- Как пишется
Кратко
Секция статьи «Кратко»Свойство text определяет цвет декоративной линии (подчёркивания, зачёркивания и других), заданной при помощи text.
Кстати, декоративные линии можно интересно стилизовать при помощи text 😎
Пример
Секция статьи «Пример»Зададим для слов, обозначающих цвет в тексте, двойное нижнее подчёркивание, и разукрасим линии в нужные цвета:
span { text-decoration-line: underline; text-decoration-style: double;}.red { text-decoration-color: red;}.yellow { text-decoration-color: yellow;}.white { text-decoration-color: white;}
span {
text-decoration-line: underline;
text-decoration-style: double;
}
.
red {
text-decoration-color: red;
}
.yellow {
text-decoration-color: yellow;
}
.white {
text-decoration-color: white;
}
Открыть демо в новой вкладке
red {
text-decoration-color: red;
}
.yellow {
text-decoration-color: yellow;
}
.white {
text-decoration-color: white;
}
Как пишется
Секция статьи «Как пишется»Значение text по умолчанию — current, то есть цвет такой же, что и у текста.
body { color: #735184;}span { text-decoration-line: underline; text-decoration-style: double;}
body {
color: #735184;
}
span {
text-decoration-line: underline;
text-decoration-style: double;
}
Открыть демо в новой вкладкеВ примере выше цвет двойного подчёркивания серобуромалиновый, поскольку для самого текста задан этот цвет, а значит и current для text будет значиться серобуромалиновым.
Это можно легко поменять: text принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff.
Раскрасить можно не только text, но и линии, обозначенные в HTML-разметке тегами, например <u> или <del>. У text краски хватит на всех!
del { text-decoration-color: orange;}
del {
text-decoration-color: orange;
}
Открыть демо в новой вкладкеЕсли вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
text
alt + ←
→
text
alt + →
Наследуемые свойства — Основы CSS — HTML Academy
Загрузка…
Через несколько секунд всё будет готово
- index. html
- style.css
htmlHTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<h2>Сайт начинающего верстальщика</h2>
</header>
<main>
<img src=»img/raccoon.svg» alt=»Аватарка»>
<nav>
<h3>Записи в блоге</h3>
<ul>
<li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li>
<li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li>
<li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li>
<li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li>
<li><a href=»day-5.
body {
padding: 0 30px;
/* Измените значения свойств ниже */
font-size: 14px;
line-height: 22px;
font-family: «Arial», sans-serif;
color: #222222;
}
h2 {
font-size: 36px;
line-height: normal;
}
h3 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
.
avatar {
border-radius: 10px;
}
nav {
margin-bottom: 30px;
padding: 20px;
background-color: #4470c4;
color: #ffffff;
}
nav a {
color: #ffffff;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
margin-top: 30px;
}
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- Для
bodyизмените значение свойстваfont-sizeна16px, - а затем значение свойства
line-heightна26pxи посмотрите, что изменения отразились на всех элементах.
CSS Color Text Box Widgets – WebNots
Многие думают, что создавать текстовые поля с фоновыми цветами сложно.
Это очень просто, и вы можете просто использовать элемент абзаца с пользовательским CSS, чтобы добавить цвета фона. Вот несколько виджетов цветных текстовых полей в качестве демонстрации.
Мы показываем здесь три стиля цветных виджетов текстовых полей.
- Использование встроенного CSS
- Гиперссылка внутри содержимого блока
- Стиль блочной цитаты
Простое встроенное цветное текстовое поле CSS
Это образец текстового поля с фоновым цветом 02f3e5.
Это образец текстового поля с серебристым фоном.
Это образец текстового поля с розовым фоном.
Это образец текстового поля с красным фоном.
Это образец текстового поля с зеленым цветом фона и белым текстом.
Это образец текстового поля с фиолетовым и белым фоном текста.
Встроенное цветное текстовое поле CSS со ссылкой
Хотите настроить боковую панель блога Weebly?
Внутреннее или встроенное цветное текстовое поле CSS — стиль блочной цитаты
«Вот текстовый блок для содержимого блочной цитаты.
Стиль блочной цитаты может отличаться в зависимости от стиля темы вашего сайта по умолчанию, который вы можете перезаписать своим собственным кодом». Как добавить этот виджет на свой сайт?
Это зависит от конструктора веб-сайтов или системы управления контентом, которую вы используете для публикации своего контента.
- Если вы используете Weebly, у нас есть отдельная статья, объясняющая, как использовать эти виджеты. Вы можете следовать тем же инструкциям для других подобных конструкторов сайтов, таких как Wix.
- Системы управления контентом, такие как WordPress, предлагают опцию «Настройки цвета» для добавления фона к блокам. Вы должны использовать последний редактор блоков Gutenberg, чтобы использовать эту функцию, которая недоступна в старом классическом редакторе. Поскольку этот веб-сайт использует WordPress, ниже приведен пример блока абзаца с фоновым цветом.
Это блок абзаца, созданный в редакторе WordPress Gutenberg с черным фоном и белым цветом текста.
- Для простых фреймворков HTML, таких как Bootstrap, вы можете использовать компонент оповещения. Также можно использовать эти виджеты, просто внедрив приведенный ниже код.
Для обычного блока
Это образец текстового поля с фиолетовым и белым фоном.
Блок со ссылкой
Замените # на вашу ссылку и добавьте соответствующий якорный текст.