Атрибут text-decoration в CSS

9 червня 2022 р.1511

Зміст

Додає оформлення тексту як його підкреслення, перекреслення чи лінії над текстом. Одночасно можна застосувати більше одного стилю, перераховуючи значення через пробіл.

Коротка інформація

Значення за замовчуванням	none
Успадковується	Ні
Застосовується	До всіх елементів
Анімується	text-decoration-line: Ні text-decoration-style : Ні text-decoration-color: Так

Синтаксис

<code>text-decoration: <a href="/css/text-decoration-line">text-deco ration-line</a> || <a href="/css/text-decoration-style">text-decoration-style</a> || <a href="/css/text-decoration-color">text-decoration-color</a>

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<размер> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

blink: Встановлює миготливий текст. Такий текст періодично приблизно раз на секунду зникає, потім знову з'являється на колишньому місці. Це значення не підтримується браузерами і засуджується в CSS3, замість рекомендується використовувати анімацію.
line-through: Створює перекреслений текст (приклад ).
overline: Лінія проходить над текстом (приклад).
underline: Встановлює підкреслений текст (приклад).
none: Скасує все ефекти, в тому числі і підкреслення у посилань, яке задано за замовчуванням.

field-type-text-long field-label-above">

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку , тому що в цей час сніданок вже давно закінчився, а обід ще е думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

none line-through overline underline

div { text-decoration: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration</title> <style> a {text-decoration: none; /* Забираємо підкреслення у посилань */
} 
a:hover { text-decoration: underline; /* Додаємо підкреслення при наведенні курсору миші на посилання */
}
</style>
</head>
<body> <p><a href="page/1.html">Стратегічне напад</a></p>
</body>
</html>

Об'єктна модель

Об'єкт.style.textDecoration

Примітка

Лінія, отримана за допомогою значення line-through, в IE7 розташовується вище, ніж в інших браузерах; в IE8 цю помилку виправлено.

Специфікація

Специфікація	Статус
CSS Text Decoration Module Level 3	Можлива рекомендація
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація
CSS Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


3	12	1	3.5	1	1

table>

Браузери

У таблиці браузерів застосовуються такі позначення.

;— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення де або властивість застосовується не до всіх елементів, які вказані в специфікації.

Число вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Текст і шрифт

Див. також

Рецепти

Практика

div class="recipe-list">


1	1	4	1