text-decoration | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | text-decoration-line: Нет text-decoration-style: Нет text-decoration-color: Да |
Синтаксис
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения.![]() | <размер> |
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
- Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
none line-through overline underline
div { text-decoration: {{ playgroundValue }}; }
Пример
<!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.![]() | Рекомендация |
CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
3 | 12 | 1 | 3.5 | 1 | 1 |
1 | 1 | 4 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Текст и шрифт
См. также
- <blink>
- text-decoration-color
- text-decoration-line
- text-decoration-style
- Начертание
- Оформление ссылок
- Свойства текста в CSS
Рецепты
- Как добавить подчёркивание к ссылке?
- Как добавить пунктирное подчёркивание к ссылкам?
- Как сделать мигающий текст?
- Как сделать подчёркивание заголовка?
- Как сделать подчёркнутый текст?
- Как убрать подчёркивание у ссылок?
Практика
- Двойное подчёркивание ссылок
- Пунктирное подчёркивание ссылок
- Рамка вокруг ссылки
- Ссылки без подчёркивания
- Убираем подчёркивание
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02. 03.2020
Редакторы: Влад Мержевич
decoration | HTML и CSS с примерами кода
Сокращенное свойство text-decoration
устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line
, text-decoration-color
, text-decoration-style
и text-decoration-thickness
.
- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- overflow-wrap
- paint-order
- tab-size
- text-align
- text-align-last
- text-indent
- text-justify
- text-size-adjust
- text-transform
- white-space
- word-break
- letter-spacing
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip
- text-decoration-skip-ink
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-rendering
- text-shadow
- text-underline-position
- text-transform
- white-space
- word-spacing
Синтаксис
text-decoration: none; text-decoration: underline red; text-decoration: underline wavy red; text-decoration: inherit; text-decoration: initial; text-decoration: unset;
Определение
Начальное значение | как каждое их свойств сокращения:text-decoration-color: currentcolor text-decoration-style: solid text-decoration-line: none |
Применяется ко | всем элементам и псевдо-элементам ::first-letter и ::first-line |
Наследуется | нет |
Вычисленное значение | как каждое их свойств сокращения:text-decoration-line : как определеноtext-decoration-style : как определеноtext-decoration-color : вычисленный цвет : как определено |
Тип анимации | как каждое их свойств сокращения:text-decoration-color : цветtext-decoration-style : дискретныйtext-decoration-line : дискретныйtext-decoration-thickness : вычисленное значение типа |
Поддержка браузерами
Примеры
Пример 1
Пример 2
CSS
.under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple 4px; } .blink { text-decoration: blink; }
HTML
<p>This text has a line underneath it.</p> <p>This text has a line over it.</p> <p>This text has a line going through it.</p> <p> This <a href="#">link will not be underlined</a>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. </p> <p> This text has lines above <em>and</em> below it. </p> <p> This text has a really thick purple underline in supporting browsers. </p> <p> This text might blink for you, depending on the browser you use.</p>
Результат
Пример 3
<!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>
См. также
- Элемент
a
— текст ссылки - Элемент
u
— подчеркнутый текст - Элемент
s
—зачеркнутыйтекст
Ссылки
- Свойство
text-decoration
MDN (рус.) - CSS Text Decoration Module Level 4 Спецификация (eng.
)
- CSS Text Decoration Level 3 Спецификация (eng.)
- CSS Level 2 (Revision 1) Спецификация (eng.)
- CSS Level 1 Спецификация (eng.)
decoration — Свойство text-decoration сокращенного CSS задает внешний вид декоративных линий
text-decoration
стенографии CSS свойство определяет внешний вид декоративных линий на тексте. Это сокращение для text-decoration-line
, text-decoration-color
, text-decoration-style
и нового свойства text-decoration-thickness
.
Try it
Украшения текста прорисовываются через элементы текста потомка. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке <p>This text has <em>some emphasized words</em> in it.</p>
, правило стиля p { text-decoration: underline; }
приведет к тому, что весь абзац будет подчеркнут. Правило стиля
em { text-decoration: none; }
не приведет к каким-либо изменениям; весь абзац все еще будет подчеркнут. Однако правило em { text-decoration: overline; }
заставит второе украшение появиться на «некоторых выделенных словах».
Constituent properties
Это свойство является сокращением для следующих свойств CSS:
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
Syntax
text-decoration: underline; text-decoration: overline red; text-decoration: none; / * Глобальные значения * / text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset;
Свойство text-decoration
указывается как одно или несколько значений, разделенных пробелами, представляющих различные свойства текстового оформления.
Values
text-decoration-line
Устанавливает используемый тип оформления, например,
underline
илиline-through
.text-decoration-color
Устанавливает цвет декора.
text-decoration-style
Устанавливает стиль линии, используемой для оформления, например
solid
,wavy
илиdashed
.text-decoration-thickness
Устанавливает толщину линии,используемой для украшения.
Formal definition
Initial value | в качестве каждого из свойств стенографии:
|
---|---|
Applies to | все элементы. Это также относится к ::first-letter и ::first-line . |
Inherited | no |
Computed value | в качестве каждого из свойств стенографии:
|
Animation type | в качестве каждого из свойств стенографии:
|
Formal syntax
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>
Examples
Демонстрация значений украшений текста
.under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple 4px; } .blink { text-decoration: blink; }
<p>This text has a line underneath it.</p> <p>This text has a line over it.</p> <p>This text has a line going through it.</p> <p>This <a href="#">link will not be underlined</a>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p>This text has lines above <em>and</em> below it.</p> <p>This text has a really thick purple underline in supporting browsers.</p> <p>This text might blink for you, depending on the browser you use.</p>
Specifications
Specification |
---|
Модуль оформления текста CSS, уровень 3 # text-decoration-property |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
text-decoration | 1 | 12 | 1 | 3 | 3. | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
blink | No | No | 1-23 | No | 4-15 | No | No | No | 4-23 | 10.1-14 | No | No |
shorthand | 57 | 79 | 36 6 | No | 44 | 8 | 57 | 57 | 36 6 | 43 | 8 | 7.0 |
text-decoration-thickness | 87 | 87 | 70 | No | 73 | No | 87 | 87 | No | 62 | No | 14.0 |
See also
- Индивидуальные свойства text-decoration:
text-decoration-line
,text-decoration-color
,text-decoration-style
иtext-decoration-thickness
. -
text-decoration-skip-ink
,text-underline-offset
иtext-underline-position
свойства также влияют на текст-отделку, но они не включены в сокращенном. - В
list-style
управления связывают появление элементов в HTML<ol>
и<ul>
списки.
© 2005–2021 Авторы MDN.
Лицензия Creative Commons Attribution-ShareAlike License v2.5 или более поздняя.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Оформление текста CSS
❮ Назад Далее ❯
CSS Text Decoration
В этой главе вы узнаете о следующих свойствах:
-
text-decoration-line
-
цвет оформления текста
-
стиль оформления текста
-
толщина оформления текста
-
текстовое украшение
Добавить декоративную линию к тексту
9Свойство 0011 text-decoration-line используется для добавления
декоративная линия к тексту.
Совет: Вы можете комбинировать более одного значения, например надчеркивание и подчеркивание, чтобы отобразить линии как над текстом, так и под ним.
Пример
h2 {
text-decoration-line: overline;
}
h3 {
text-decoration-line: line-through;
}
h4 {
text-decoration-line: underline;
}
p {
строка-декорации текста:
надчеркивание подчеркивание;
}
Попробуйте сами »
Примечание: Не рекомендуется подчеркивать текст, не являющийся ссылкой, так как это часто сбивает читателя с толку.
Укажите цвет для линии оформления
Свойство text-decoration-color
используется для
установить цвет декоративной линии.
Пример
h2 {
text-decoration-line: overline;
текстовый-декоративный-цвет:
красный;
}
h3 {
text-decoration-line: line-through;
текстовый-декоративный-цвет:
синий;
}
h4 {
text-decoration-line: underline;
текстовый-декоративный-цвет:
зеленый;
}
p {
строка-декорации текста:
надчеркивание подчеркивание;
text-decoration-color: фиолетовый;
}
Попробуйте сами »
Укажите стиль для линии оформления
Свойство text-decoration-style
используется для
задать стиль декоративной линии.
Пример
h2 {
text-decoration-line: underline;
стиль оформления текста:
твердый;
}
h3 {
text-decoration-line: underline;
стиль оформления текста: двойной;
}
h4 {
text-decoration-line: underline;
стиль оформления текста: пунктирный;
}
p.ex1 {
text-decoration-line: underline;
стиль оформления текста: пунктир;
}
p.ex2 {
text-decoration-line: underline;
стиль оформления текста: волнистый;
}
p.ex3 {
текстовая строка-украшения:
подчеркнуть;
text-decoration-color: красный;
стиль оформления текста: волнистый;
}
Попробуйте сами »
Укажите толщину линии оформления
Свойство text-decoration-thickness
используется для
установите толщину декоративной линии.
Пример
h2 {
text-decoration-line: underline;
толщина оформления текста: авто;
}
h3 {
текстовая-декорационная-строка:
подчеркнуть;
толщина оформления текста: 5 пикселей;
}
ч4 {
строка оформления текста: подчеркивание;
text-decoration-толщина: 25%;
}
р {
строка оформления текста: подчеркивание;
text-decoration-color: красный;
стиль оформления текста: двойной;
толщина оформления текста: 5 пикселей;
}
Попробуйте сами »
Сокращенное свойство
text-decoration
свойство является сокращением
свойство для:
-
text-decoration-line
(обязательно) -
цвет текста-декорации
(опционально) -
стиль оформления текста
(опционально) -
толщина оформления текста
(опционально)
Пример
h2 {
text-decoration: underline;
}
h3 {
оформление текста: подчеркивание красным;
}
ч4 {
text-decoration: подчеркивание
красный двойной;
}
р {
оформление текста: подчеркивание красным двойным 5px;
}
Попробуйте сами »
Маленький совет
Все ссылки в HTML по умолчанию подчеркнуты. Иногда вы
обратите внимание, что ссылки оформлены без подчеркивания. Текстовое оформление
: нет;
используется для удаления
подчеркивание из ссылок,
например:
Пример
a {
text-decoration: none;
}
Попробуйте сами »
Все свойства CSS text-decoration
Свойство | Описание |
---|---|
украшение текста | Задает все свойства оформления текста в одном объявлении |
цвет оформления текста | Задает цвет оформления текста |
строка оформления текста | Определяет тип оформления текста (подчеркивание, надчеркивание, д.) |
стиль оформления текста | Задает стиль оформления текста (сплошной, пунктирный и т. д.) |
толщина оформления текста | Задает толщину линии оформления текста |
❮ Предыдущий Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
![](/800/600/http/psdcollection.ru/wp-content/uploads/2020/04/2-Pi05NhRqTa4-1024x574.jpg)
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
902 Справочник
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Модуль оформления текста CSS, уровень 3
1. Введение
Этот подраздел не является нормативным.
Этот модуль охватывает оформление текста, то есть украшение глифов. текста, набранного в соответствии со шрифтовыми и типографскими правилами. (См. [CSS-TEXT-3] и [CSS-FONTS-3].) Такие особенности традиционно используются не только в чисто декоративных целях, но также в некоторых случаях, чтобы показать ударение, для почтения, а также для указания редакционных изменений, таких как вставки, удаления и орфографические ошибки.
Уровни CSS 1 и 2 определяли только очень простые украшения линий (подчеркивание, надчеркивание и зачеркивание).
соответствует западным типографским традициям.
Уровень 3 этого модуля добавляет возможность изменять
цвет, стиль, положение и непрерывность этих украшений,
а также вводит знаки ударения (традиционно используемые в восточноазиатской типографике),
и тени (которые были предложены, а затем перенесены с уровня 2).
1.1. Взаимодействия модулей
Этот модуль заменяет и расширяет возможности оформления текста. функции, определенные в [CSS2], глава 16.
1.2. Определения значений
Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определенные в этой спецификации, определены в значениях и единицах CSS [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.
В дополнение к значениям свойств, перечисленным в их определениях, все свойства, определенные в этой спецификации также принимать ключевые слова CSS в качестве значения свойства. Для удобства чтения они не повторялись явно.
1.3. Терминология
Термины «знак», «буква» и «язык содержимого», используемые в этой спецификации, определены в [CSS-TEXT-3].
Другие термины и понятия, используемые в данной спецификации, определяются
в [CSS2] и [CSS-WRITING-MODES-4].
2. Оформление линий: подчеркивание, зачеркивание и зачеркивание
Следующие свойства описывают декорации строк, которые добавляются к содержимому элемента. При указании или распространении на встроенный блок эта коробка становится коробка для украшения для этого украшения, нанесение украшения на все его фрагменты. Затем декорация распространяется на любые входящие блоки блочного уровня, разделяющие встроенный блок. (см. раздел 9.2.1.1 CSS2.1). При указании или распространении в блочном контейнере, который устанавливает встроенный контекст форматирования, украшения распространяются на анонимный встроенный блок, который обертывает все дочерние элементы встроенного уровня в потоке блочного контейнера. При указании или распространении на контейнер ruby, украшения распространяются только на рубиновую основу. Для всех других типов коробок украшения распространяются на всех дочерних элементов в потоке.
Обратите внимание, что украшения текста не распространяются ни на какие внепотоковые потомки,
ни к содержимому атомарных потомков встроенного уровня, таких как встроенные блоки и встроенные таблицы. Они также не распространяются на встроенные дочерние элементы встроенных блоков,
хотя украшение наносится на такие коробки.
Подчеркивания, надчеркивания и зачеркивания рисуются только для незаменяемых встроенных блоков, и рисуются по всему тексту (включая пробелы, интервалы между буквами и словами) за исключением пробелов (пробелов, межбуквенных и межсловных интервалов) в начале и в конце строки. Атомарные встроенные строки, такие как изображения и встроенные блоки, не декорируются. Поля, границы и отступы декоративной рамки всегда пропускаются. однако поля, границы и отступы дочерних встроенных блоков не являются.
Обратите внимание, что CSS 2.1 требовал всегда пропускать поля, границы и отступы.
На этом уровне по умолчанию пропускаются только поля, границы и отступы декоративного блока.
В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому умолчанию.
Кроме того, на уровне 4 ожидается контроль над оформлением начальных/конечных пробелов. и будет применяться по умолчанию к элементам HTML
ins
и del
.
UA могут прерывать подчеркивание и надчеркивание там, где линия пересекает чернила глифов и на некотором расстоянии по обе стороны от контура глифа; это поведение не контролируется на этом уровне, но будет дополнительно определено на уровне 4. Однако сквозные линии должны оставаться непрерывными.
Пропуск чернил глифов
Когда UA прерывает подчеркивание или зачеркивание на границах глифа, форма линии на этой границе должна следуйте форме глифа.
Обратите внимание, что эта спецификация намеренно не предписывает конкретный метод.
для «следования форме» глифа
так что UA могут принять соответствующие меры для обработки
эстетические и эксплуатационные характеристики.
Например,
UA может предполагать, что квадратные линии заканчиваются ниже определенного порога размера
по соображениям производительности;
или используйте трапециевидные окончания для аппроксимации кривых,
особенно на украшениях с более тонкой линией. Скрытие части подчеркивания внутри чаши придает шрифту более чистый вид,
в то время как изогнутые концы подчеркивания вне его
предполагают непрерывность подчеркивания через букву
обнимая его внешний контур. По эстетическим соображениям,
ПА может также учитывать, что происходит, когда граница глифа
пересекает только часть толщины линии
или наклонена близко к горизонтали—
Относительное позиционирование потомка перемещает все украшения текста
наносится на него вместе с текстом потомка; это не влияет
вычисление начального положения украшения на этой линии.
Свойство видимости, text-shadow, фильтры и другие графические преобразования
аналогичным образом влияет на все украшения текста, примененные к этому блоку — (В случае линейных украшений, нарисованных поверх атомарного встроенного
или через поля/границы/отступы незаменяемого встроенного блока,
они аналогично связаны с затронутым атомарным встроенным / незамещенным встроенным полем
а не с декоративной коробкой.)
В следующей таблице стилей и фрагменте документа:
blockquote { text-decoration: underline; цвет синий; } em { дисплей: блок; } процитировать { цвет: фуксия; }
<цитата><диапазон> Помогите помогите! Я под шапкой! —ГвиФ
…подчеркивание элемента цитаты распространяется на
анонимный встроенный блок, который окружает элемент span, вызывая
текст «Помогите, помогите!» быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет берется из
элемент цитаты. текст
в блоке em также подчеркнут, как и во входящем блоке для
в котором распространяется подчеркивание. Последняя строка текста — фуксия,
но подчеркивание под ним по-прежнему синее подчеркивание от
анонимный встроенный элемент. На этой диаграмме показаны поля, задействованные в приведенном выше примере.
закругленная линия цвета морской волны представляет собой обертку анонимного встроенного элемента
встроенное содержимое элемента абзаца, скругленная синяя линия
представляет собой элемент span, а оранжевые линии представляют
блоки.
Примечание. Декорации линий распространяются по дереву коробок, не по наследству, и, следовательно, не влияет на потомков при указании элемента с display:contents.
2.1. Линии оформления текста: свойство text-decoration-line
Указывает, какие линейные украшения, если таковые имеются, добавляются к элементу. Значения имеют следующие значения:
- нет
- Не создает и не запрещает оформление текста.
- подчеркивание
- Каждая строка текста подчеркнута.
- над чертой
- Каждая строка текста имеет строку над ней (т.е. на противоположной сторону от подчеркивания).
- проходной
- Каждая строка текста имеет черту посередине.
- мигает
- Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут просто не мигать текстом. Обратите внимание, что не мигание текста является одним из методов выполнения контрольной точки 3.3 WAI-UAAG. Это значение равно устарел в пользу анимации [CSS-ANIMATIONS-1].
Примечание. В режимах вертикального письма позиция подчеркивания текста может привести к смене сторон подчеркивания и надчеркивания.
Это позволяет позиции подчеркивания отключать языковые настройки.
автоматически.
2.2. Стиль оформления текста: свойство text-decoration-style
Это свойство определяет стиль линий, рисуемых для текстовое оформление, указанное на элементе. Ценности имеют то же значение, что и для стиля границы свойства [CSS-BACKGROUNDS-3]. волнистый указывает на волнистую линию.
Стиль текстовых украшений должен оставаться одинаковым для всех украшений, происходящих из данного элемента, даже если блоки-потомки имеют разные указанные стили.
2.3. Цвет оформления текста: свойство text-decoration-color
Это свойство определяет цвет оформления текста (подчеркивание overlines и line-throughs), заданные для элемента с text-decoration-line.
Цвет текстовых украшений должен оставаться одинаковым для всех украшений, происходящих из данного элемента,
даже если поля-потомки имеют разные указанные цвета.
2.4. Text Decoration Shorthand: свойство text-decoration
Это свойство является сокращением для установки text-decoration-line, text-decoration-color, и text-decoration-style в одном объявлении. Пропущенные значения устанавливаются в их начальные значения.
Примечание. Объявление text-decoration, в котором отсутствует оба значения text-decoration-color и text-decoration-style обратно совместим с CSS уровней 1 и 2.
В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом. подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синей точкой в UA CSS3.
:ссылка { цвет синий; оформление текста: подчеркивание; оформление текста: подчеркивание темно-синим пунктиром; /* Игнорируется в UA CSS1/CSS2 */ }
Примечание. В сокращении намеренно опущено свойство text-underline-position,
который является параметром, зависящим от языка/системы письма, который отключает содержимое,
так что он может каскадировать и наследовать независимо
из (не унаследованных) стилистических настроек стенографии оформления текста.
2.5. Text Underline Position: свойство text-underline-position
Это свойство задает позицию подчеркивания, указанную в элементе. (Это не влияет на подчеркивание, указанное элементами-предками.) Если указано только левое или правое, автоматически также подразумевается.
Следующий пример стилизует современный китайский, японский и корейский языки. тексты с соответствующими позициями подчеркивания в обоих горизонтальных и вертикальный текст:
:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; } :root:lang(zh), [lang|=zh] { text-underline-position: under left; }
Значения имеют следующие значения:
- авто
- Пользовательский агент может использовать любой алгоритм для определения
подчеркните позицию; однако он должен быть размещен на или под
алфавитная основа.
Примечание: рекомендуется, чтобы положение подчеркивания по умолчанию быть близко к алфавитной базовой линии, если только это не будет либо перекрестным индексом (или иным образом пониженным) текста или нарисуйте глифы из азиатских шрифтов, таких как ханьский или тибетский. для которых буквенное подчеркивание слишком высоко: в таких случаях смещение подчеркивания ниже или выравнивание по краю em box, как описано ниже, может быть более подходящим.
Типичное «алфавитное» подчеркивание располагается сразу под буквенной базовой линией
- ниже
- Подчеркивание располагается под текстовым содержимым элемента.
В этом случае подчеркивание обычно не пересекает выносные элементы.
(Это иногда называют «бухгалтерским подчеркиванием».)
Это значение можно комбинировать с левым или правым, если определенная сторона предпочтительна в вертикальных типографских режимах.
позиция подчеркивания текста: до
Поскольку text-underline-position наследуется и не сбрасывается сокращением text-decoration следующий пример переключает документ на подчеркивание, что может быть более подходящим для написания систем с длинными, сложными спусковые крючки. Это также часто полезно для математических или химических тексты, в которых используется много индексов.
: root { text-underline-position: under; }
Примечание. Заниженное значение не гарантирует что подчеркивание не будет конфликтовать с глифами, так как некоторые шрифты имеют нисходящие или диакритические знаки которые простираются ниже показателей спуска шрифта.
- слева
- В режимах вертикальной типографики подчеркивание выравнивается так же, как подчеркивание, за исключением того, что оно всегда выравнивается по левому краю текста.
Если это приводит к тому, что подчеркивание будет нарисовано на стороне «над» текст, затем надчеркивание также меняет стороны и рисуется на «нижняя» сторона.
- справа
- В режимах вертикальной типографики подчеркивание выравнивается так же, как подчеркивание, за исключением того, что оно всегда выравнивается по правому краю текста. Если это приводит к тому, что подчеркивание будет нарисовано на стороне «над» текст, затем надчеркивание также меняет стороны и рисуется на «нижняя» сторона.
слева | справа |
В режимах вертикальной типографики значения text-underline-position left и right позволяют размещать подчеркивание на любом сторону текста. (В горизонтальных типографских режимах оба значения рассматривается как авто.)
Точное положение и толщина линий декораций на этом уровне определяются UA. Однако для подчеркивания и надчеркивания
UA должен использовать единую толщину и позицию на каждой линии
для украшений, происходящих из одной коробки для украшения.
против
Правильное и неправильное отображение ABCD
Обратите внимание, что оформление строк может охватывать элементы с разными размерами шрифта и
вертикальное выравнивание, лучшая позиция для оформления строки не
обязательно идеальное положение, продиктованное декоративной коробкой.
Например, надчеркивание расположено на мелком шрифте.
фактически станет сквозным, если элемент содержит текст со значительно большим размером шрифта.
Даже для подчеркивания, если текст не выровнен по алфавиту
(например, в стилях вертикального набора,
текст выравнивается по центральной базовой линии по умолчанию [CSS-WRITING-MODES-4])
подчеркивание будет прорезать дочерний текст с большим размером шрифта. Таким образом, учет контента потомков UA приведет к лучшей типографике.
Из-за выравнивания вертикального текста по базовой линии по центру, подчеркивание слева на небольшом вертикальном тексте прорежет текст ребенка с большим размером шрифта. Подчеркивание не допускается ломать, но регулируя свое положение дальше влево правильно вмещает весь подчеркнутый текст.
UA должны корректировать позиции строк чтобы соответствовать смещенным метрикам декорирования коробок, смещенным со значениями вертикального выравнивания, отличными от базового [CSS2], или с нижними/надстрочными индексами через вариантное положение шрифта [CSS-FONTS-3], но не должен регулировать положение или толщину линии в ответ потомкам украшающей коробки, которые так стилизованы. Это позволяет правильно оформить верхние и нижние индексы. (подчеркнуто, зачеркнуто и т. д.) но не позволяет им искажать или нарушать расположение таких украшений на их предках.
Пример подчеркивания, примененного к тексту с надстрочным индексом по сравнению с подчеркиванием, примененному к тексту , содержащему верхний индекс
Некоторые форматы шрифтов (например, OpenType) могут предоставлять информацию
о соответствующем положении украшения линии. UA должен использовать такую информацию
(например, толщина подчеркивания,
или соответствующую позицию подчеркивания в алфавитном порядке)
от шрифта везде, где это уместно.
Примечание. Как правило, метрики шрифта OpenType указывают позицию буквенное подчеркивание; в некоторых случаях (особенно в шрифтах CJK), это дает позицию под левым подчеркиванием. (В этом случае показатели подчеркивания шрифта обычно коснитесь нижнего края поля em). UA может, но не обязан исправлять неправильные метрики шрифта.
3. Знаки выделения
документа Восточной Азии традиционно используют маленькие символы рядом с каждым глифом, чтобы подчеркнуть пробег текста. Например:
Акцент (показан синим цветом для ясности) применен к тексту на японском языке
Сокращение text-emphasis-style и text-emphasis-style и text-emphasis-color,
можно использовать для применения таких меток к тексту.
Свойство text-emphasis-position, которое наследуется отдельно,
позволяет задать положение знаков ударения по отношению к тексту.
3.1. Стиль метки выделения: свойство text-emphasis-style
Это свойство применяет метки выделения к тексту элемента. Значения имеют следующие значения:
- нет
- Без акцентов.
- наполненный
- Форма заполнена сплошным цветом.
- открытый
- Полая форма.
- точка
- Отображение маленьких кружков в качестве меток. Закрашенная точка — это U+2022 ‘•’, а открытая точка — это U+25E6 ‘◦’.
- круг
- Отображение больших кругов в качестве меток.
Закрашенный кружок — U+25CF ‘●’, а незакрашенный кружок — U+25CB ‘○’.
- двойной круг
- Отображение двойных кругов в качестве меток. Закрашенный двойной кружок — это U+25C9 ‘◉’, а открытый двойной кружок — это U+25CE ‘◎’.
- треугольник
- Отображение треугольников в виде меток. Закрашенный треугольник — U+25B2 ‘▲’, а незакрашенный треугольник — U+25B3 ‘△’.
- кунжут
- Отображение кунжута в виде меток. Заполненный кунжут — U+FE45 ‘﹅’, а открытый кунжут — U+FE46 ‘﹆’.
- <строка>
- Отобразить заданную строку в виде меток.
Авторы не должны указывать более одного символа в
. АП может обрезать или игнорировать строки, состоящие из более чем одного кластера графем.
Если ключевое слово формы указано, но ни заполнено, ни открыто указано, считается заполненным. Если указано только заполнено или открыто, ключевое слово shape вычисляет круг в горизонтальных типографских режимах и сезам в вертикальных типографских режимах.
Метки должны быть нарисованы с использованием настроек шрифта элемента
с добавлением рубиновой функции
и размер уменьшен на 50%.
Однако, поскольку не все шрифты имеют все эти глифы,
и некоторые шрифты используют неподходящие размеры для выделения в этих кодовых точках,
UA может решить использовать шрифт, известный как подходящий для выделения,
или вместо этого метки могут быть синтезированы UA.
Знаки должны оставаться вертикальными в режимах вертикальной типографики:
как и символы CJK, они не поворачиваются в соответствии с режимом письма.
Ориентация знаков в горизонтальных типографских способах вертикального письма на этом уровне не определена. (но может быть определено на будущем уровне, если возникнут окончательные варианты использования).
Примечание. Одним из примеров хороших шрифтов для выделений является шрифт Adobe Kenten Generic OpenType с открытым исходным кодом, который специально разработан для знаков акцента.
Метки рисуются один раз для каждой единицы типографского символа. Однако знаки ударения , а не нарисованы для:
Примечание. Контроль над тем, какие символы помечаются, будет добавлен на уровне 4. (Список знаков препинания также может быть уточнен, особенно для пунктуации, отличной от CJK.)
3.2. Emphasis Mark Color: свойство text-emphasis-color
Это свойство определяет цвет переднего плана меток выделения.
Примечание: ключевое слово currentcolor вычисляется само по себе
и преобразуется в значение цвета после выполнения наследования.
Это означает, что text-emphasis-color по умолчанию соответствует цвету текста, даже если цвет меняется между элементами.
3.3. Emphasis Mark Shorthand: свойство text-emphasis
Это свойство является сокращением для установки стиля выделения текста и цвета выделения текста в одном объявлении. Пропущенные значения устанавливаются в их начальные значения.
Обратите внимание, что позиция выделения текста не сбрасывается в этом стенография. Это связано с тем, что обычно форма и цвет различаются, но позиция согласуется для конкретного языка во всем документе. Поэтому положение должно наследоваться независимо.
3.4. Emphasis Mark Position: свойство text-emphasis-position
Это свойство описывает, где рисуются метки акцента. Если [правильно | левый ] опущен, по умолчанию он правый. Значения имеют следующие значения:
- свыше
- Рисовать метки над текстом в горизонтальных типографских режимах.
- ниже
- Рисовать метки под текстом в горизонтальных типографских режимах.
- справа
- Рисовать метки справа от текста в режимах вертикальной типографики.
- слева
- Рисовать метки слева от текста в режимах вертикальной типографики.
Знаки выделения рисуются точно так, как если бы каждый символ был присвоил метке текст рубиновой аннотации с рубиновой позицией задается text-emphasis-position и рубиновым выравниванием по центру. Обратите внимание, что это положение может быть скорректировано, если оно будет противоречить с подчеркиванием или надчеркиванием украшений.
Влияние меток выделения на высоту строки такое же, как и для
рубиновый текст.
Обратите внимание, предпочтительное положение меток ударения зависит от язык. В японском языке, например, предпочтительнее положение справа. С другой стороны, в китайском языке предпочтительным положение ниже правого. В информативной таблице ниже приведены предпочтительные позиции ударения для китайского и японского языков:
Язык | Предпочтительная должность | Иллюстрация | ||
---|---|---|---|---|
Горизонтальный | Вертикальный | |||
Японский | более | справа | ||
Корейский | ||||
Монгольский | ||||
Китайский | под | справа |
Если к символам применяются метки ударения
для которого рубин нарисован в том же положении, что и знак ударения,
ударения ставятся вне рубина. Сюда входят автоматически скрытые и пустые рубиновые аннотации.
Знаки выделения нанесены на 4 символа, рубин также нанесен на 2 из них
Некоторые редакторы предпочитают скрывать знаки выделения, когда они конфликтуют с ruby. В HTML это можно сделать с помощью следующего правила стиля:
ruby {выделение текста: нет; }
Некоторые другие редакторы предпочитают скрывать ruby, когда они конфликтуют со знаками выделения. В HTML это можно сделать с помощью следующего шаблона:
em { text-emphasis: dot; } /* Установить выделение текста для элементов */ em rt { дисплей: нет; } /* Скрыть ruby внутри элементов */
4. Text Shadows: свойство text-shadow
Это свойство принимает список теневых эффектов, разделенных запятыми.
применяется к тексту элемента.
Значения интерпретируются как box-shadow [CSS-BACKGROUNDS-3].
(Но обратите внимание, что значения распространения и ключевое слово inset не допускаются. )
Каждый слой затеняет текст элемента и все его текстовые украшения.
(составлены вместе).
Эффекты тени применяются спереди назад: первая тень сверху. Таким образом, тени могут накладываться друг на друга, но они никогда не накладываются на сам текст. Тень должна быть нарисована на уровне стека между границей элемента и/или фоном (если есть) и элементы текста и оформления текста. Пользовательские пользователи должны избегать отрисовки текстовых теней поверх текста. в соседних элементах, принадлежащих к тому же уровню стека и контексту стека. (Это может означать, что точный уровень стека теней зависит от того, имеет ли элемент границу или фон: таким образом, точное поведение текстовых теней в стеке определяется UA.) Не определено, затеняет ли данный теневой слой каждый глиф или украшение отдельно или если текст и/или украшения сглажены, а затем затенены.
В отличие от box-shadow тени текста не обрезаются по затененной форме
и может просвечиваться, если текст частично прозрачен. Как и box-shadow, текстовые тени не влияют на макет.
и не запускать прокрутку
или увеличьте размер прокручиваемой области переполнения.
Примечание. Определенный здесь порядок рисования теней противоположен того, что определено в Рекомендации CSS2 1998 года.
Свойство text-shadow применяется как к ::first-line
и ::first-letter
псевдоэлементы.
5. Рисование текстовых украшений
5.1. Покраска Заказ текстовых украшений
Как и в [CSS2], украшения текста рисуются непосредственно над/под украшаемым текстом, в следующем порядке (сначала снизу):
- тени (текст-тень)
- подчеркивания (украшение текста)
- надчеркивания (текстовое оформление)
- текст
- знаки выделения (выделение текста)
- сквозной (текстовый декор)
Если декорации линий нарисованы поверх декораций блоков или атомарных встроенных линий,
они рисуются над непозиционированным содержимым и чуть ниже любых позиционированных потомков
(непосредственно под слоем № 8 в Приложении E CSS2. 1).
5.2. Переполнение текстовых украшений
Оформление текста, вытекающее за пределы рамки, считается переливом чернил: они не расширяют прокручиваемую область переполнения. [CSS-переполнение-3]
Приложение A: Благодарности
Эта спецификация была бы невозможна без помощи: Айман Алдалех, Берт Бос, Тантек Челик, Стивен Дич, Джон Даггетт, Мартин Дюрст, Лори Анна Эдлунд, Бен Эррез, Янив Файнберг, Арье Гиттельман, Ян Хиксон, Мартин Хейдра, Ричард Исида, Масаясу Исикава, Майкл Йохимсен, Эрик ЛеВайн, Эмброуз Ли, Хокон Виум Ли, Крис Лилли, Кен Лунде, Нат МакКалли, Шинью Мураками, Пол Нельсон, Крис Пратли, Марчин Савицки, Арнольд Шрайвер, Рахул Соннад, Мишель Суиньяр, Такао Сузуки, Фрэнк Танг, Крис Трэшер, Этан Векслер, Крис Уилсон, Масафуми Ябэ и Стив Зиллес.
Приложение B: Таблица стилей UA по умолчанию
Это приложение является информативным,
и помочь разработчикам UA реализовать таблицу стилей по умолчанию,
но разработчики UA могут игнорировать или изменять.
/* типичный стиль HTML */ мигать { строка оформления текста: мерцание; } с, забастовка, дель { оформление текста: сквозное; } u, ins, :ссылка, :посетили { оформление текста: подчеркивание; } аббр [название], акроним [название] { оформление текста: подчеркивание пунктиром; } /* отключить наследование меток выделения текста на ruby-текст: знаки ударения должны применяться только к основному тексту */ rt {выделение текста: нет; } /* установить соответствующую языку позицию метки акцента по умолчанию */ :root:lang(zh), [lang|=zh] { text-emphasis-position: under right; } [lang|=ja], [lang|=ko] { text-emphasis-position: over right; } /* установить соответствующую языку позицию подчеркивания по умолчанию */ :root:яз(я), [яз|=я], :root:яз(мн), [язык|=мн], :root:lang(ko), [lang|=ko] { text-underline-position: right; } :root:lang(zh), [lang|=zh] { text-underline-position: left; } /* auto выбрано (подразумевается) выше, а не ниже из-за проблем с совместимостью контента */
Если вы обнаружите какие-либо проблемы, рекомендации для добавления или исправления,
пожалуйста, отправьте информацию на www-style@w3. org с [css-text-decor] в строке темы.
В то время как text-decoration-line: blink не может быть полностью воспроизведен с другими существующими свойствами, авторы могут добиться очень похожего эффекта с помощью следующего CSS:
@ключевые кадры мигают { 0% { видимость: скрытая; функция синхронизации анимации: шаг-конец; } 25%, 100% { видимость: видимая; } } мигать { анимация: мигание 1с бесконечно; }
Приложение С: Изменения
Изменения по сравнению с рекомендацией-кандидатом
от августа 2019 г.Изменения включают:
- Уточнить, что text-shadow анимируется как список теней, как box-shadow. (выпуск 4375)
- Четко укажите свойства, применимые к тексту. (выпуск 5303)
- Мелкие редакционные исправления.
Изменения с июля 2018 г. Рекомендация-кандидат
Изменения включают:
- Уточнено, что переполнение оформления текста является переполнением чернил.
(выпуск 3272)
- Исправлены несоответствия в примерах правил положения подчеркивания текста. (Выпуск 3441)
- Очищены строки «Вычисленное значение» в соответствии с новыми соглашениями.
Доступно расположение комментариев.
Изменения по сравнению с рекомендацией-кандидатом
от августа 2013 г.Значительные изменения включают:
- Отложенное оформление текста — переход на уровень 4 для внесения серьезных изменений. Определенные поведенческие по умолчанию в прозе. (Выпуск 1, Выпуск 22, Выпуск 26)
- Указано, что функция пропуска чернил не влияет на проходные линии. (Выпуск 24)
- Рекомендуется, чтобы при пропуске чернил концы строк соответствовали форме глифа. (выпуск 30)
- Обновлены условия, чувствительные к режиму письма, чтобы они зависели от типографского режима,
для учета добавления значений sideways-lr и sideways-rl к свойству режима письма.
Отмеченная ориентация меток упора под sideways-lr и sideways-rl не определена.
(Выпуск 10, Выпуск 20)
- Сделано [право | left ] опция text-emphasis-position необязательна, по умолчанию вправо. (Выпуск 17)
- Сделано text-underline-position подразумевающим auto вместо under когда указано только left или right. (Выпуск 18)
- Изменено оформление текста, чтобы пропустить начальные и конечные пробелы. (выпуск 6)
- Отмечено, что положение рубиновых аннотаций может быть скорректировано чтобы избежать конфликтов с оформлением текста. (Выпуск 21)
- Изменено начальное значение text-shadow на
текущий цвет
. (Выпуск 28) - Исправлена ошибка в строке «Расчетное значение» для text-shadow. (Выпуск 7)
- Исправлен канонический порядок значений text-shadow для соответствия реализациям. (Выпуск 35)
- Определено расположение меток акцента относительно автоматически скрытых и пустых рубиновых аннотаций.
(Выпуск 9)
Если к символам применяются знаки ударения для которого рубин нарисован в том же положении, что и знак ударения, ударения ставятся вне рубина.
Сюда входят автоматически скрытые и пустые рубиновые аннотации.
- Выделение текста по умолчанию пропускает пунктуацию. (Выпуск 16)
- Добавлено правило для применения рубина к шрифту выделений. (Выпуск 13)
- Различные исправления и улучшения правил UA по умолчанию для text-emphasis-position и text-underline-position. (Выпуск 11, Выпуск 12, Выпуск 18, Выпуск 19, Выпуск 36)
Требования соответствия выражаются комбинацией описательные утверждения и терминология RFC 2119. Ключевые слова «ОБЯЗАТЕЛЬНО», «НЕ ДОЛЖЕН», «ТРЕБУЕТСЯ», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119.. Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации.
Весь текст данной спецификации является нормативным, за исключением разделов
явно помечены как ненормативные, примеры и примечания. [RFC2119]
Примеры в этой спецификации вводятся словами «например».
или отделены от нормативного текста с помощью class="example"
,
следующим образом:
Информационные примечания начинаются со слова «Примечание» и отделяются от
нормативный текст с class="note"
, например:
Рекомендации — это нормативные разделы, оформленные так, чтобы привлечь особое внимание и
отделить от другого нормативного текста с помощью
, например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.
Таблица стилей соответствует этой спецификации если все его операторы, которые используют синтаксис, определенный в этом модуле, действительны в соответствии с общей грамматикой CSS и индивидуальными грамматиками каждого функция, определенная в этом модуле.
Средство визуализации соответствует этой спецификации
если, в дополнение к интерпретации таблицы стилей, как определено
соответствующие спецификации, он поддерживает все функции, определенные
по этой спецификации, правильно разбирая их
и рендеринга документа соответственно. Однако неспособность А.
UA для правильного отображения документа из-за ограничений устройства
не делает UA несовместимым. (Например, UA не
требуется для цветопередачи на монохромном мониторе.)
Средство разработки соответствует этой спецификации если он пишет таблицы стилей, которые синтаксически правильны в соответствии с общая грамматика CSS и отдельные грамматики каждой функции в этот модуль и отвечает всем остальным требованиям соответствия таблиц стилей как описано в этом модуле.
Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для
назначать резервные значения, средства визуализации CSS должны считать недействительными (и игнорировать
при необходимости) любые at-правила, свойства, значения свойств, ключевые слова,
и другие синтаксические конструкции, для которых они не имеют применимого уровня
поддерживать. В частности, пользовательские агенты не должен выборочно
игнорировать неподдерживаемые значения компонентов и учитывать поддерживаемые значения в одном
объявление многозначного свойства: если какое-либо значение считается недействительным
(так как должны быть неподдерживаемые значения), CSS требует, чтобы все объявление
быть проигнорировано.
Чтобы избежать конфликтов с будущими стабильными функциями CSS, CSSWG рекомендует следовать рекомендациям по реализации нестабильных функций и проприетарных расширений CSS.
Как только спецификация достигает стадии кандидата в рекомендации, возможны неэкспериментальные реализации, и разработчики должны выпустить реализацию без префикса любой функции уровня CR, которую они может продемонстрировать правильность реализации в соответствии со спецификацией.
Для установления и поддержания функциональной совместимости CSS в реализации, Рабочая группа CSS просит, чтобы неэкспериментальные Визуализаторы CSS представляют отчет о внедрении (и, при необходимости, тестовых наборов, использованных для этого отчета о реализации) в W3C до выпуск реализации без префикса любых функций CSS. Тестовые случаи отправленные в W3C, подлежат рассмотрению и исправлению со стороны CSS Рабочая группа.
Дополнительная информация о представлении тестовых примеров и отчетов о внедрении
можно найти на веб-сайте Рабочей группы CSS по адресу https://www. w3.org/Style/CSS/Test/.
Вопросы следует направлять в список рассылки [email protected].
Чтобы эта спецификация была улучшена до предлагаемой рекомендации, должны быть как минимум две независимые, взаимодействующие реализации каждой функции. Каждая функция может быть реализована различным набором продукты, нет требования, чтобы все функции были реализованы единый продукт. Для целей этого критерия мы определяем следующие термины:
Имя | Значение | Начальный | Относится к | Инга. | %возраст | Тип анимации | Канонический порядок | Расчетное значение |
---|---|---|---|---|---|---|---|---|
украшение текста | <'строка-украшения-текста'> || <'стиль оформления текста'> || <'text-decoration-color'> | см.![]() | см. отдельные свойства | см. отдельные свойства | см. отдельные свойства | см. отдельные свойства | на грамматику | см. отдельные свойства |
цвет текста-декорации | <цвет> | текущий цвет | все элементы | нет | н/д | по типу вычисляемого значения | на грамматику | вычисляемый цвет |
текст-декор-линия | нет | [подчеркнуть || надчеркивание || линейный || мигать] | нет | все элементы | нет (но см. прозу выше) | н/д | дискретный | на грамматику | указанные ключевые слова |
стиль оформления текста | сплошной | двойной | пунктирная | пунктир | волнистый | твердый | все элементы | нет | н/д | дискретный | на грамматику | указанное ключевое слово |
выделение текста | <'стиль выделения текста'> || <'text-emphasis-color'> | см.![]() | см. отдельные свойства | см. отдельные свойства | см. отдельные свойства | см. отдельные свойства | по грамматике | см. отдельные свойства |
цвет выделения текста | <цвет> | текущий цвет | текст | да | н/д | по типу вычисляемого значения | на грамматику | вычисляемый цвет |
положение выделения текста | [ более | под ] && [ справа | оставил ]? | справа | текст | да | н/д | дискретный | на грамматику | указанные ключевые слова |
стиль выделения текста | нет | [[ заполнено | открыть ] || [ точка | круг | двойной круг | треугольник | кунжут ] ] | <строка> | нет | текст | да | н/д | дискретный | по грамматике | ключевое слово нет, пара ключевых слов, представляющих форму и заливку, или строка |
тень текста | нет | [ <цвет>? && <длина>{2,3} ]# | нет | текст | да | н/д | как теневой список | на грамматику | ключевое слово none или список, каждый элемент которого состоит из трех абсолютных длин плюс вычисляемый цвет |
подчеркивание текста | авто | [ под || [ слева | Правильно ] ] | авто | все элементы | да | н/д | дискретный | на грамматику | указанные ключевые слова |
Текст · Bootstrap
- Выравнивание текста
- Обтекание текстом и переполнение
- Преобразование текста
- Толщина шрифта и курсив
- Моноширинный
- Сбросить цвет
- Оформление текста
Документация и примеры распространенных текстовых утилит для управления выравниванием, обтеканием, весом и т. д.
Выравнивание текста
Легко выравнивайте текст по компонентам с помощью классов выравнивания текста.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Для выравнивания по левому краю, по правому краю и по центру доступны адаптивные классы, которые используют те же контрольные точки ширины области просмотра, что и система сетки.
Выровненный по левому краю текст на всех размерах окна просмотра.
Выровненный по центру текст на всех размерах окна просмотра.
Выровненный по правому краю текст на всех размерах окна просмотра.
Выровненный по левому краю текст на окнах просмотра размером SM (маленький) или шире.
Выровненный по левому краю текст на окнах просмотра размером MD (средний) или шире.
Выровненный по левому краю текст на окнах просмотра размером LG (большой) или шире.
Выровненный по левому краю текст на окнах просмотра размером XL (очень большой) или шире.
Текст с выравниванием по левому краю на всех размерах окна просмотра.
Выравнивание текста по центру на всех размерах окна просмотра.
Текст с выравниванием по правому краю на всех размерах окна просмотра.
Текст, выровненный по левому краю, на окнах просмотра размером SM (маленький) или шире.
Текст с выравниванием по левому краю на окнах просмотра размером MD (средний) или шире.
![]()
Текст с выравниванием по левому краю на экранах просмотра размером LG (большой) или шире.
Выровненный по левому краю текст на окнах просмотра размером XL (очень большой) или шире.
Обтекание и переполнение текста
Оберните текст классом .text-wrap
.
Этот текст должен переноситься.
<дел> Этот текст должен обернуться.