css властивість text-decoration-color
- Головна
- css
- властивості
- text-decoration-color
Встановлює колір оздоблення тексту, котрий додається через властивість text-decoration.
CSS властивість text-decoration-color працює тільки на елементах з видимим text-decoration.
Якщо не використовувати text-decoration-color, будь-яке підкреслення, як правило, відображатиметься в тому ж кольорі, що й підкреслений текст. Те саме стосується і перекресленого тексту та тексту з лінією над ним. text-decoration-color дозволяє вказати інший колір для тексту та його оздоблення.
| Нотатка: | Safari підтримує властивість |
| Нотатка: | Firefox до версії 36 підтримує властивість — |
| Порада: | При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю |
Запропонувати свою пораду чи нотатку
ПорадаНотатка
Синтакс
text-decoration-color: color|initial|inherit;
Властивість text-decoration-color може отримувати 3 значення:
colorКолір оздоблення тексту.
initialВстановлюється без задання.
inheritУспадковує це значення від свого батьківського елемента.
| Значення без задання: | Співпадає з кольором тексту |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.textDecorationColor=»red» |
Переглядачі
- Стаціонарні переглядачі
- Мобільні переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| text-decoration-color | 57. | Не підтримується | 36.0 | 7.1 -webkit- | Не підтримується | 44.0 |
0| Переглядач | |||
|---|---|---|---|
| text-decoration-color | Не підтримується | 36.0 | 8.0 -webkit- |
Приклади
- Приклад 1
- Приклад 2
- Приклад 3
Приклад використання
Лінія під посиланням буде червоного кольору
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration-color</title>
<style>
a {
text-decoration-color: red;
}
</style>
</head>
<body>
<a href="page/1.
html">Посилання</a>
</body>
</html>
Синтаксис властивості
p {
text-decoration: underline;
-moz-text-decoration-color: red; /* Для Firefox */
text-decoration-color: red;
} Додаткові посилання
text-decoration
text-shadow
text-decoration-line
text-decoration-style
box-decoration-break
| наследование украшения | цвет украшения текста: наследование; |
| декор-текущий | текст-декор-цвет: текущий цвет; |
| декоративный прозрачный | текстовый декоративный цвет: прозрачный; |
| декоративный черный | текстовый декоративный цвет: #000; |
| декоративный белый | текстовый декоративный цвет: #fff; |
| украшение-шифер-50 | текст-украшение-цвет: #f8fafc; |
| цвет-украшения-текста: #f1f5f9; | |
| украшение-сланец-200 | текст-украшение-цвет: #e2e8f0; |
| украшение-шифер-300 | текст-украшение-цвет: #cbd5e1; |
| декор-сланец-400 | текст-декор-цвет: #94a3b8; |
| декор-сланец-500 | text-decoration-color: #64748b; |
| декор-сланец-600 | текст-декор-цвет: #475569; |
| декор-сланец-700 | текст-декор-цвет: #334155; |
| украшение-шифер-800 | текст-украшение-цвет: #1e293b; |
| украшение-сланец-900 | цвет-украшения-текста: #0f172a; |
| декор-серый-50 | текст-декор-цвет: #f9фафб; |
| украшение-серый-100 | текст-украшение-цвет: #f3f4f6; |
| декоративный серый-200 | текстовый декоративный цвет: #e5e7eb; |
| украшение-серый-300 | текст-украшение-цвет: #d1d5db; |
| декоративный серый-400 | текстовый декоративный цвет: #9ca3af; |
| украшение-серый-500 | текст-украшение-цвет: #6b7280; |
| декор-серый-600 | text-decoration-color: #4b5563; |
| украшение-серый-700 | текст-украшение-цвет: #374151; |
| декоративный серый-800 | текстовый декоративный цвет: #1f2937; |
| украшение-серый-900 | |
| украшение-цинк-50 | текст-украшение-цвет: #fafafa; |
| декор-цинк-100 | текст-декор-цвет: #f4f4f5; |
| украшение-цинк-200 | текст-украшение-цвет: #e4e4e7; |
| украшение-цинк-300 | текст-украшение-цвет: #d4d4d8; |
| декор-цинк-400 | текст-декор-цвет: #a1a1aa; |
| декор-цинк-500 | текст-декор-цвет: #71717a; |
| декор-цинк-600 | текст-декор-цвет: #52525b; |
| украшение-цинк-700 | text-decoration-color: #3f3f46; |
| декор-цинк-800 | текст-декор-цвет: #27272a; |
| декор-цинк-900 | текст-декор-цвет: #18181b; |
| декор-нейтральный-50 | текст-декор-цвет: #fafafa; |
| декор-нейтральный-100 | текст-декорация-цвет: #f5f5f5; |
| украшение-нейтральный-200 | текст-украшение-цвет: #e5e5e5; |
| украшение-нейтральный-300 | текст-украшение-цвет: #d4d4d4; |
| оформление-нейтральный-400 | текст-украшение-цвет: #a3a3a3; |
| оформление-нейтральный-500 | текст-украшение-цвет: #737373; |
| оформление-нейтральный-600 | текст-украшение-цвет: #525252; |
| оформление-нейтральный-700 | текст-украшение-цвет: #404040; |
| украшение-нейтральный-800 | текст-украшение-цвет: #262626; |
| оформление-нейтральный-900 | текст-украшение-цвет: #171717; |
| декор-камень-50 | текст-декор-цвет: #fafaf9; |
| декоративный камень-100 | текстовый декоративный цвет: #f5f5f4; |
| украшение-камень-200 | текст-украшение-цвет: #e7e5e4; |
| декоративный камень-300 | цвет-декорации-текста: #d6d3d1; |
| декоративный камень-400 | текстовый декоративный цвет: #a8a29e; |
| украшение-камень-500 | текст-украшение-цвет: #78716c; |
| украшение-камень-600 | текст-украшение-цвет: #57534e; |
| украшение-камень-700 | текст-украшение-цвет: #44403c; |
| декор-камень-800 | текст-декор-цвет: #292524; |
| украшение-камень-900 | текст-украшение-цвет: #1c1917; |
| украшение-красный-50 | текст-украшение-цвет: #fef2f2; |
| украшение-красный-100 | текст-украшение-цвет: #fee2e2; |
| украшение-красный-200 | текст-украшение-цвет: #fecaca; |
| украшение-красный-300 | текст-украшение-цвет: #fca5a5; |
| украшение-красный-400 | text-decoration-color: #f87171; |
| украшение-красный-500 | текст-украшение-цвет: #ef4444; |
| украшение-красный-600 | текст-украшение-цвет: #dc2626; |
| украшение-красный-700 | текст-украшение-цвет: #b91c1c; |
| украшение-красный-800 | текст-украшение-цвет: #991b1b; |
| украшение-красный-900 | текст-украшение-цвет: #7f1d1d; |
| украшение-оранжевый-50 | цвет текста-украшения: #fff7ed; |
| украшение-оранжевый-100 | текст-украшение-цвет: #ffedd5; |
| украшение-оранжевый-200 | текст-украшение-цвет: #fed7aa; |
| украшение-оранжевый-300 | текст-украшение-цвет: #fdba74; |
| украшение-оранжевый-400 | текст-украшение-цвет: #fb923c; |
| украшение-оранжевый-500 | text-decoration-color: #f97316; |
| украшение-оранжевый-600 | текст-украшение-цвет: #ea580c; |
| украшение-оранжевый-700 | текст-украшение-цвет: #c2410c; |
| украшение-оранжевый-800 | цвет текста-украшения: #9a3412; |
| украшение-оранжевый-900 | цвет текста-украшения: #7c2d12; |
| украшение-янтарь-50 | текст-украшение-цвет: #fffbeb; |
| украшение-янтарь-100 | текст-украшение-цвет: #fef3c7; |
| украшение-янтарный-200 | текст-украшение-цвет: #fde68a; |
| украшение-янтарный-300 | текст-украшение-цвет: #fcd34d; |
| украшение-янтарь-400 | текст-украшение-цвет: #fbbf24; |
| украшение-янтарный-500 | текст-украшение-цвет: #f59e0b; |
| украшение-янтарь-600 | text-decoration-color: #d97706; |
| украшение-янтарный-700 | текст-украшение-цвет: #b45309; |
| украшение-янтарный-800 | текст-украшение-цвет: #92400e; |
| украшение-янтарный-900 | текст-украшение-цвет: #78350f; |
| украшение-желтый-50 | текст-украшение-цвет: #fefce8; |
| украшение-желтый-100 | текст-украшение-цвет: #fef9с3; |
| украшение-желтый-200 | текст-украшение-цвет: #fef08a; |
| украшение-желтый-300 | текст-украшение-цвет: #fde047; |
| украшение-желтый-400 | текст-украшение-цвет: #facc15; |
| украшение-желтый-500 | текст-украшение-цвет: #eab308; |
| украшение-желтый-600 | текст-украшение-цвет: #ca8a04; |
| украшение-желтый-700 | текст-украшение-цвет: #a16207; |
| украшение-желтый-800 | текст-украшение-цвет: #854d0e; |
| украшение-желтый-900 | текст-украшение-цвет: #713f12; |
| украшение-лайм-50 | текст-украшение-цвет: #f7fee7; |
| украшение-лайм-100 | текст-украшение-цвет: #ecfccb; |
| украшение-лайм-200 | text-decoration-color: #d9f99d; |
| украшение-лайм-300 | текст-украшение-цвет: #bef264; |
| украшение-лайм-400 | цвет-украшения-текста: #a3e635; |
| декор-лайм-500 | текст-декор-цвет: #84cc16; |
| декор-лайм-600 | текст-декор-цвет: #65a30d; |
| украшение-лайм-700 | цвет-украшения-текста: #4d7c0f; |
| украшение-лайм-800 | цвет-украшения-текста: #3f6212; |
| декор-лайм-900 | текст-декор-цвет: #365314; |
| декоративный зеленый-50 | текстовый декоративный цвет: #f0fdf4; |
| украшение-зеленый-100 | текст-украшение-цвет: #dcfce7; |
| украшение-зеленый-200 | текст-украшение-цвет: #bbf7d0; |
| украшение-зеленый-300 | text-decoration-color: #86efac; |
| украшение-зеленый-400 | текст-украшение-цвет: #4ade80; |
| украшение-зеленый-500 | текст-украшение-цвет: #22c55e; |
| украшение-зеленый-600 | текст-украшение-цвет: #16a34a; |
| украшение-зеленый-700 | текст-украшение-цвет: #15803d; |
| украшение-зеленый-800 | текст-украшение-цвет: #166534; |
| украшение-зеленый-900 | текст-украшение-цвет: #14532d; |
| украшение-изумруд-50 | текст-украшение-цвет: #ecfdf5; |
| украшение-изумруд-100 | цвет-украшения-текста: #d1fae5; |
| украшение-изумруд-200 | цвет-украшения-текста: #a7f3d0; |
| украшение-изумруд-300 | цвет-украшения-текста: #6ee7b7; |
| украшение-изумруд-400 | text-decoration-color: #34d399; |
| украшение-изумруд-500 | текст-украшение-цвет: #10b981; |
| украшение-изумруд-600 | текст-украшение-цвет: #059669; |
| украшение-изумруд-700 | текст-украшение-цвет: #047857; |
| украшение-изумруд-800 | текст-украшение-цвет: #065f46; |
| украшение-изумруд-900 | текст-украшение-цвет: #064e3b; |
| украшение-бирюзовый-50 | текст-украшение-цвет: #f0fdfa; |
| украшение-бирюзовый-100 | текст-украшение-цвет: #ccfbf1; |
| украшение-бирюзовый-200 | текст-украшение-цвет: #99f6e4; |
| украшение-бирюзовый-300 | текст-украшение-цвет: #5eead4; |
| украшение-бирюзовый-400 | текст-украшение-цвет: #2dd4bf; |
| украшение-бирюзовый-500 | text-decoration-color: #14b8a6; |
| украшение-бирюзовый-600 | текст-украшение-цвет: #0d9488; |
| украшение-бирюзовый-700 | текст-украшение-цвет: #0f766e; |
| украшение-бирюзовый-800 | текст-украшение-цвет: #115e59; |
| декоративный-бирюзовый-900 | текстовый-декоративный-цвет: #134e4a; |
| украшение-голубой-50 | текст-украшение-цвет: #ecfeff; |
| украшение-голубой-100 | текст-украшение-цвет: #cffafe; |
| украшение-голубой-200 | текст-украшение-цвет: #a5f3fc; |
| украшение-голубой-300 | текст-украшение-цвет: #67e8f9; |
| украшение-голубой-400 | цвет-украшения-текста: #22d3ee; |
| украшение-голубой-500 | цвет-украшения-текста: #06b6d4; |
| украшение-голубой-600 | text-decoration-color: #0891b2; |
| украшение-голубой-700 | текст-украшение-цвет: #0e7490; |
| украшение-голубой-800 | текст-украшение-цвет: #155e75; |
| украшение-голубой-900 | текст-украшение-цвет: #164e63; |
| украшение-небо-50 | текст-украшение-цвет: #f0f9ff; |
| украшение-небо-100 | текст-украшение-цвет: #e0f2fe; |
| украшение-небо-200 | текст-украшение-цвет: #bae6fd; |
| украшение-небо-300 | текст-украшение-цвет: #7dd3fc; |
| украшение-небо-400 | текст-украшение-цвет: #38bdf8; |
| украшение-небо-500 | текст-украшение-цвет: #0ea5e9; |
| украшение-небо-600 | текст-украшение-цвет: #0284c7; |
| украшение-небо-700 | text-decoration-color: #0369a1; |
| украшение-небо-800 | текст-украшение-цвет: #075985; |
| украшение-небо-900 | текст-украшение-цвет: #0c4a6e; |
| украшение-синий-50 | текст-украшение-цвет: #eff6ff; |
| украшение-синий-100 | текст-украшение-цвет: #dbeafe; |
| украшение-синий-200 | текст-украшение-цвет: #bfdbfe; |
| украшение-синий-300 | текст-украшение-цвет: #93c5fd; |
| украшение-синий-400 | текст-украшение-цвет: #60a5fa; |
| декоративный синий-500 | текстовый декоративный цвет: #3b82f6; |
| украшение-синий-600 | текст-украшение-цвет: #2563eb; |
| украшение-синий-700 | текст-украшение-цвет: #1d4ed8; |
| украшение-синий-800 | text-decoration-color: #1e40af; |
| декоративный синий-900 | текстовый декоративный цвет: #1e3a8a; |
| украшение-индиго-50 | текст-украшение-цвет: #eef2ff; |
| украшение-индиго-100 | цвет текста-украшения: #e0e7ff; |
| украшение-индиго-200 | цвет текста-украшения: #c7d2fe; |
| украшение-индиго-300 | текст-украшение-цвет: #a5b4fc; |
| украшение-индиго-400 | цвет текста-украшения: #818cf8; |
| декор-индиго-500 | текст-декор-цвет: #6366f1; |
| украшение-индиго-600 | цвет текста-украшения: #4f46e5; |
| декор-индиго-700 | текст-декор-цвет: #4338ca; |
| декор-индиго-800 | текст-декор-цвет: #3730a3; |
| украшение-индиго-900 | text-decoration-color: #312e81; |
| украшение-фиолетовый-50 | цвет текста-украшения: #f5f3ff; |
| украшение-фиолетовый-100 | текст-украшение-цвет: #ede9fe; |
| украшение-фиолетовый-200 | цвет текста-украшения: #ddd6fe; |
| украшение-фиолетовый-300 | текст-украшение-цвет: #c4b5fd; |
| украшение-фиолетовый-400 | текст-украшение-цвет: #a78bfa; |
| украшение-фиолетовый-500 | текст-украшение-цвет: #8b5cf6; |
| украшение-фиолетовый-600 | текст-украшение-цвет: #7c3aed; |
| украшение-фиолетовый-700 | цвет текста-украшения: #6d28d9; |
| украшение-фиолетовый-800 | цвет текста-украшения: #5b21b6; |
| украшение-фиолетовый-900 | текст-украшение-цвет: #4c1d95; |
| украшение-фиолетовое-50 | text-decoration-color: #faf5ff; |
| украшение-фиолетовый-100 | текст-украшение-цвет: #f3e8ff; |
| украшение-фиолетовый-200 | текст-украшение-цвет: #e9d5ff; |
| украшение-фиолетовый-300 | текст-украшение-цвет: #d8b4fe; |
| украшение-фиолетовый-400 | текст-украшение-цвет: #c084fc; |
| украшение-фиолетовый-500 | текст-украшение-цвет: #a855f7; |
| украшение-фиолетовый-600 | текст-украшение-цвет: #9333ea; |
| украшение-фиолетовый-700 | цвет текста-украшения: #7e22ce; |
| украшение-фиолетовый-800 | текст-украшение-цвет: #6b21a8; |
| украшение-фиолетовый-900 | текст-украшение-цвет: #581c87; |
| украшение-фуксия-50 | текст-украшение-цвет: #fdf4ff; |
| декор-фуксия-100 | text-decoration-color: #fae8ff; |
| украшение-фуксия-200 | цвет-украшения-текста: #f5d0fe; |
| украшение-фуксия-300 | текст-украшение-цвет: #f0abfc; |
| украшение-фуксия-400 | цвет-украшения-текста: #e879f9; |
| декор-фуксия-500 | текст-декор-цвет: #d946ef; |
| оформление-фуксия-600 | текст-украшение-цвет: #c026d3; |
| декор-фуксия-700 | текст-декор-цвет: #a21caf; |
| декор-фуксия-800 | текст-декор-цвет: #86198f; |
| декор-фуксия-900 | текст-декор-цвет: #701a75; |
| украшение-розовый-50 | текст-украшение-цвет: #fdf2f8; |
| украшение-розовый-100 | текст-украшение-цвет: #fce7f3; |
| украшение-розовый-200 | text-decoration-color: #fbcfe8; |
| украшение-розовый-300 | текст-украшение-цвет: #f9a8d4; |
| украшение-розовый-400 | текст-украшение-цвет: #f472b6; |
| украшение-розовый-500 | текст-украшение-цвет: #ec4899; |
| украшение-розовый-600 | текст-украшение-цвет: #db2777; |
| украшение-розовый-700 | текст-украшение-цвет: #be185d; |
| украшение-розовый-800 | текст-украшение-цвет: #9d174d; |
| украшение-розовый-900 | текст-украшение-цвет: #831843; |
| украшение-роза-50 | текст-украшение-цвет: #fff1f2; |
| украшение-роза-100 | текст-украшение-цвет: #ffe4e6; |
| украшение-роза-200 | текст-украшение-цвет: #fecdd3; |
| украшение-роза-300 | text-decoration-color: #fda4af; |
| украшение-роза-400 | текст-украшение-цвет: #fb7185; |
| украшение-роза-500 | текст-украшение-цвет: #f43f5e; |
| украшение-роза-600 | текст-украшение-цвет: #e11d48; |
| украшение-роза-700 | текст-украшение-цвет: #be123c; |
| украшение-роза-800 | текст-украшение-цвет: #9ф1239; |
| украшение-роза-900 | текст-украшение-цвет: #881337; |
Цвет оформления текста CSS
Свойство CSS text-decoration-color можно использовать в сочетании со свойством text-decoration-line и свойством text-decoration (сокращение) для указания цвета любого подчеркнутого, надчеркнутого и линейного элементов.
через текст.
Без использования свойства text-decoration-color любое подчеркивание обычно отображается тем же цветом, что и подчеркиваемый текст. То же самое относится к надчеркнутому и сквозному тексту. text-decoration-color позволяет указать другой цвет для текста и его строки.
Синтаксис
text-decoration-color: <цвет>
Возможные значения
- <цвет>
- Цвет оформления текста (подчёркивания и зачеркивания), заданного для элемента с помощью
text-decoration-lineилиtext-decoration.
Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:
-
начальный - Представляет значение, указанное как начальное значение свойства.
-
унаследовать - Представляет вычисленное значение свойства родительского элемента.
-
снято с охраны - Это значение действует либо как
наследует, либо какначальное, в зависимости от того, наследуется свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.
Основная информация о свойствах
- Исходное значение
- Текущий цвет
- Применяется к
- Все элементы
- Унаследовано?
- №
- СМИ
- Визуальный
- Анимируемый
- Да (см. пример)
Пример кода
Базовый CSS
Вот пример простого объявления. Объявление состоит из свойства и его значения.
цвет оформления текста: синий;
Так что его можно использовать так:
ч2 { строка оформления текста: подчеркивание; стиль оформления текста: пунктирный; цвет оформления текста: желто-зеленый; }
Рабочий пример в документе HTML
Хамелеон
Попробуйте
Технические характеристики CSS
- Свойство
text-decoration-colorопределено в модуле оформления текста CSS уровня 3 (рекомендация-кандидат W3C от 1 августа 2013 г. ).
).Поддержка браузера
В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.
Префиксы поставщиков
Для максимальной совместимости браузера многие веб-разработчики добавляют свойства браузера, используя такие расширения, как 9.1357 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.д. CSS свойство, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.
W3C не рекомендует такую практику, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.
. Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C рекомендует поставщикам удалять свои префиксы для свойств, достигших статуса кандидата в рекомендации.
