Font decoration: text-decoration-style | htmlbook.ru

Разное 

Содержание

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. 1)Рекомендация
CSS Level 1Рекомендация

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

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

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

31213.511
1141

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Текст и шрифт

См. также

  • <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
  • word-spacing
  • 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-thickness: как определено
Тип анимациикак каждое их свойств сокращения:
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в качестве каждого из свойств стенографии:
  • text-decoration-color: currentcolor
  • text-decoration-style: solid
  • text-decoration-line: none
Applies toвсе элементы. Это также относится к ::first-letter и ::first-line .
Inheritedno
Computed valueв качестве каждого из свойств стенографии:
  • text-decoration-line : как указано
  • text-decoration-style : как указано
  • text-decoration-color : вычисленный цвет
  • text-decoration-thickness : как указано
Animation typeв качестве каждого из свойств стенографии:
  • text-decoration-color : цвет
  • text-decoration-style: discrete
  • text-decoration-line: discrete
  • text-decoration-thickness : по типу вычисляемого значения

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
text-decoration

1

12

1

3

3. 5

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. CSS
Учебное пособие по 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 .

Этот текст должен переноситься.

 <дел>
  Этот текст должен обернуться.

Предотвратить перенос текста с помощью класса .text-nowrap .

Этот текст должен переполнять родительский.

 <дел>
  Этот текст должен переполнять родительский.

Для более длинного содержимого можно добавить класс .text-truncate , чтобы обрезать текст многоточием. Требуется дисплей : встроенный блок или дисплей : блок .

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi.

 
<дел>
  <дел>
    Praeterea iter est quasdam res quas ex communi.
<диапазон> Praeterea iter est quasdam res quas ex communi.

Преобразование текста

Преобразование текста в компонентах с классами капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

Текст, набранный заглавными буквами.

 
Текст в нижнем регистре.


Текст в верхнем регистре.


Текст с заглавными буквами.

Обратите внимание, что .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Вес шрифта и курсив

Быстро изменить вес (жирность) текста или выделить текст курсивом.

Жирный текст.

Более жирный текст (относительно родительского элемента).

Текст обычного веса.

Облегченный текст.

Облегченный текст (относительно родительского элемента).

Курсив.

 
Текст полужирный.


Текст жирнее (относительно родительского элемента).


Текст обычного веса.


Облегченный текст.


Облегченный текст (относительно родительского элемента).


Курсив.

Моноширина

Измените выделение на наш стек моноширинных шрифтов с помощью .text-monospace .

Это в моноширине

 
Это моноширинный шрифт

Сбросить цвет

Сбросить цвет текста или ссылки с помощью .text-reset , чтобы он наследовал цвет от своего родителя.

Приглушенный текст со ссылкой сброса.

 <р>
  Приглушенный текст с ссылкой сброса.

Оформление текста

Удалите украшение текста с помощью класса .text-decoration-none .

Неподчеркнутая ссылка

 Неподчеркнутая ссылка

Свойство CSS text-decoration — GeeksforGeeks

Свойство text-decoration используется для «украшения» содержимого текста. По сути, это украшение текста различными линиями. Это сокращенное свойство для text-decoration-line (обязательно), text-decoration-color и text-decoration-style . Текстовые украшения рисуются на дочерних текстовых элементах, что означает, что если родительский элемент указывает текстовое оформление, то его дочерний элемент не может удалить украшение, указанное родительским элементом.

Синтаксис: 

 text-decoration: text-decoration-line text-decoration-style text-decoration-color|initial|inherit;

Значения свойств: Все свойства хорошо описаны в примере ниже.

text-decoration-line : Используется для установки различных видов оформления текста (например, подчеркивания, надчеркивания и т. д.).

Синтаксис: 

 оформление текста: строка оформления текста;

Пример: Этот пример иллюстрирует использование свойства text-decoration-line , значения которого могут быть установлены как подчеркивание, зачеркивание, надчеркивание.

HTML

< html lang = "en" dir = "ltr" >

< head >

     < Meta CHARSET = "UTF-8" >

< TITE > Текстовая декорация TITL 0012 >

< Стиль >

H2 {

ЦВЕТ: Зеленый;

}

Body {

Текстовый Align: Center;

     }

      

     ul li {

         margin-top: 15px;

}

#Пример1 {

Текстовый декорация: подставка;

}

#Пример 2 {

text-decoration: сквозной;

}

#Пример 3 {

Text-Decoration: Overline;

}

Стиль >

. 0012 Body >

< H2 > Geeksforgeeks H2 >

> >

11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111t ; H3 >

< UL >

< LI ID .0012 = "Пример1" > Добро пожаловать в бой! / LI >

< LI ID = "Пример 3" > Добро пожаловать!0012

     ul >

body >

html >

Output:

text-decoration-style : Используется для установки оформления текста элемента (например, пунктирного, волнистого и т. д.).

Синтаксис: 

 text-decoration: text-decoration-line text-decoration-style;

Пример: Этот пример иллюстрирует использование свойства text-decoration-style .

HTML

< html lang = "en" dir = "ltr" >

< головка >

     < Meta CHARSET = "UTF-8" >

< TITL > Текстовые декорации 11111111111111111111111111111111111111111111111111111111111111111111111111111111111Р1У 11111111111111111111111111111111111Р1Р1У 11111111111111111111111111111111111Р. НА стиль >

     h2 {

         цвет: зеленый;

     }

      

     body {

         text-align: center;

}

UL LI {

MARGIN-TOP: 15PX;

}

#Пример1 {

text-decoration: подчеркивание пунктиром;

}

#Пример 2 {

.

}

#Пример 3 {

.

}

Стиль >

. H2 > Geeksforgeeks H2 >

< H3 >

.0011        text-decoration:

       text-decoration-line text-decoration-style;

     h3 >

     < ul >

         < li id = "example1" >Добро пожаловать, гики! li >

< LI ID = "Пример 2" > Добро пожаловать в туалет! "Пример 3" > Добро пожаловать в фанали!0012 Body >

HTML >

Выход:

9000 2

9 . (надчеркивания, подчеркивания и зачеркивания) над текстом.

Синтаксис: 

 text-decoration: text-decoration-line text-decoration-color;

Пример: Этот пример иллюстрирует использование text-decoration-color свойство.

HTML

< html lang = "en" dir = "ltr" >

< головка >

     < мета кодировка 9"1-8 =10011 >

     < title >text-decoration title >

     < style >

     h2 {

         цвет: зеленый;

     }

      

     корпус { 0044          text-align: center;

}

UL LI {

MARGIN-TOP: 15PX;

}

#Пример1 {

Текстовый декорация: подставка Wavy Green;

}

#Пример 2 {

Текстовое декорация: Красный;

}

#Пример 3 {

Text-Decoration: Overline Blue;

     }

     style >

head >

 

< body >

     < h2 >GeeksforGeeks H2 >

< H3 >

Текстовый-

0044           text-decoration-line text-decoration-color;

         h3 >

     < ul >

         < li id = "example1" >Добро пожаловать, гики! li >

         < li id = "example2" >Welcome geeks! li >

         < li id = "example3" > Добро пожаловать в фанаты! LI >

UL >

Body > > . 0044 HTML >

Выход:

Первоначальный : он используется для подставки элемента.

Синтаксис: 

 оформление текста: инициал;

Пример: В этом примере показано использование свойства text-decoration , для которого задано значение initial.

HTML

< HTML LANG = "EN" DIR = "LTR" DIR = "LTR" DIR = "LTR" DIR = " . >

< Meta Charset = "UTF-8" >

< 9003

< . 0011> Текстовое декорация Название >

< Стиль >

H2 {

;

}

Body {

Текстовый Align: Center;

     }

      

     #example1 {

     0    1 90 украшение

     }

     style >

head >

 

< body >

< H2 > Geeksforgeeks H2 >

< H3 > Текстовая декорация: начальная; H3 > Текстовая декорация: начальная; href = "#" >

      Это ссылка без оформления текста.

     a >

< BR >

< BR > < A ID = 12 A ID = 111111111111111111111111111111111111111111111111111111111111111111111111F111111111111111111111111111111111111111111111111111111111Р1У . #" >

      Это ссылка с текстовым оформлением, установленным на инициал.

     a >

body >

html >

Output:

inherit : It is used to inherit a property to an элемент из значения свойства его родительского элемента.

Синтаксис: 

 text-decoration: inherit;

Пример: Этот пример иллюстрирует использование text-decoration свойство, значение которого установлено для наследования.

HTML

< html lang = "en" dir = "ltr" >

< головка >

     < мета кодировка 9"1-8 =10011 >

     < title >text-decoration title >

     < style >

     h2 {

         цвет: зеленый;

     }

      

     корпус { 0044          text-align: center;

}

#Пример1 {

Текстовый декорация: подставка Wavy Green;

}

#Пример 1Child {

Текстовый декорация: inhorit;

         вес шрифта: полужирный;

     }

     style >

head >

 

< body >

< h2 >Гики для гиков h2 >

< H3 > Текст-декорация: наследство; H3 >

< P ID = «Пример ». Пример «». родитель и < SPAN ID = "Пример1 -Килд" >

Это мой ребенок. SPAN > p >

 

body >

html >

Output:

Supported browsers: Браузеры, поддерживаемые свойством text-decoration , перечислены ниже:

  • Google Chrome 1.0
  • Internet Explorer 3.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

Типографика | Windi CSS

Семейство шрифтов

Утилиты для управления семейством шрифтов элемента.

без засечек

с засечками

моно

Настройка
 экспорт по умолчанию {
  тема: {
    продлевать: {
      семейство шрифтов: {
        без засечек: ['ui-sans-serif', 'system-ui'],
        с засечками: ['ui-serif', 'Грузия'],
        моно: ['ui-monospace', 'SFMono-Regular'],
        отображать: ['Освальд'],
        тело: ['Открытый Санс'],
      },
    },
  },
}

Семейства шрифтов можно указать в виде массива или простой строки с разделителями-запятыми:

 {
  // Формат массива:
  "sans": ["Helvetica", "Arial", "без засечек"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, без засечек",
}

Обратите внимание, что Windi CSS автоматически не экранирует имена шрифтов. Если вы используете шрифт, который содержит недопустимый идентификатор, заключите его в кавычки или экранируйте недопустимые символы.

 {
  // Не будет работать:
  "sans": ["Экзо 2", /* ... */],
  // Добавляем кавычки:
  "sans": ["\"Экзо 2\"", /* . .. */],
}

Размер шрифта

Утилиты для управления размером шрифта элемента.

XS

SM

База

LG

XL

2xl

3xl

4xl

5xl

6xl

7xl

7xl

7xl

. тема: { размер шрифта: { 'xs': '.75rem', 'см': '.875рем', «крошечный»: «0,875 рем», «база»: «1рем», «lg»: «1,125 бэр», «xl»: «1,25 бэр», «2xl»: «1,5 бэр», «3xl»: «1,875 бэр», «4xl»: «2,25 бэр», «5xl»: «3rem», «6xl»: «4rem», «7xl»: «5rem», }, }, }

Вы можете указать высоту строки по умолчанию для каждого из ваших размеров шрифта, используя кортеж формы [fontSize, lineHeight] в файле windi.config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      см: ['14px', '20px'],
      база: ['16px', '24px'],
      LG: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это с помощью кортежа формы [fontSize, {letterSpacing, lineHeight}] в вашем файле windi. config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Или также с высотой строки по умолчанию
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        высота строки: '40px',
      }],
    },
  },
}

Сглаживание шрифта

Утилиты для управления сглаживанием шрифта элемента.

сглаживание

субпиксельное сглаживание

Стиль шрифта

Утилиты для управления стилем текста.

курсив

не курсив

Толщина шрифта

Утилиты для управления жирностью шрифта элемента.

Thin

Extralight

Light

Нормальная

Средняя

Semibold

BOLD

Extrabold

Black

400

600

0002 windi.config.js

 экспорт по умолчанию {
  тема: {
    Вес шрифта: {
      «линия роста волос»: 100,
      «сверхлегкий»: 100,
      «тонкий»: 200,
      «светлый»: 300,
      «нормальный»: 400,
      «средний»: 500,
      «полужирный»: 600,
      «жирный»: 700,
      «сверхжирный»: 800,
      «очень жирный»: 800,
      «черный»: 900,
    },
  },
}

Font Variant Numeric

Утилиты для управления вариантом чисел.

обычные-числа

порядковые

дробные-ноль

Linting-Nums

OldStyle-Nums

пропорциональные номы

Табулярные номы

Диагональные фракции

Сложные фракции

Гифены

Утечки гифенов. . Он может полностью предотвратить расстановку переносов, расставлять переносы в указанных вручную точках в тексте или позволить браузеру автоматически вставлять дефисы там, где это необходимо.

нет

ручной

авто

Интервал между буквами

Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.

БОЛЬШЕГО

TEAR

Нормальный

WID

шире

Самый широкий

0PX

2PX

0.5EM

Настройка

Windi.config.js

.
  тема: {
    Межбуквенное расстояние: {
      самый плотный: '-.075em',
      плотнее: '-.05em',
      плотно: '-.025em',
      нормальный: «0»,
      широкий: '0,025em',
      шире: «. 05em»,
      самый широкий: '.25em',
    },
  },
}

Высота строки

Утилиты для управления интерлиньяжем (высотой строки) элемента.

Нет

Тенганизация

Snug

Нормальный

Расслабленный

Свободный

1

2

3

4

5

6

. тема: { продлевать: { высота линии: { «экстра-рыхлый»: «2,5», }, }, }, }

Выступ, размер

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009). По умолчанию тема: { размер вкладки: { см: '2', мд: '4', лг: '8', }, }, }

Выравнивание текста

Утилиты для управления выравниванием текста.

левый

центр

правый

justify

Text Color

Утилиты для управления цветом текста элемента.

Прозрачный

Ток

Грей-500

RED-500

Yellow-500

Blue-500

Green-500

Grey-500/50

RED-500/50 0003

Yellow -5003/50

RED-500/50 0003

Yellow -5003

. /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    цвет текста: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Оформление текста

Утилиты для управления оформлением текста.

Тип оформления текста

Утилиты для управления типом оформления текста.

подчеркнутый

верхний

сквозной

без подчеркивания

Цвет оформления текста

Утилиты для управления цветом оформления текста.

прозрачный

Ток

Грей-500

RED-500

Желтый-500

Blue-500

Green-500

Grey-500/50

Red-500/50

Желтый-500/50 0003

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textDecorationColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Стиль оформления текста

Утилиты для управления стилем оформления текста.

сплошной

двойной

пунктирный

пунктирный

волнистый

Толщина оформления текста

Утилиты для управления толщиной оформления текста.

Auto

от Font

1

2

3

4

5

6

7

8

0,1REM

3PX

0,3EM3

. js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationLength: {
        см: '1px',
        мд: '2px',
        LG: '4px',
      },
    },
  },
}

Смещение оформления текста

Утилиты для управления смещением оформления текста.

Auto

1

2

3

4

5

6

7

8

0,6Rem

8.5px

0.5EM

Culdatizing

Windi.ConfIGLIGIGLIGIGLIGIGLIGIGLIGIGLIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGIGLIGIGIGIGIGIGIGIGIGIGIGIGIGLIGIGLIGIGLIGIGILIST. дефолт { тема: { textDecorationOffset: { см: '1px', мд: '2px', LG: '4px', }, }, }

Прозрачность оформления текста

Утилиты для управления непрозрачностью цвета оформления элемента. Это запасной вариант цвета оформления текста, начиная с WindiCSS v3.4.0.

5

10

20

25

30

40

50

60

70

75

80

95

800003

95

    9000 3

    800003

    95

      800003

      9000

        800003

        9000.

         экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationOpacity: {
        10: «0,1»,
        20: «0,2»,
        95: «0,95»,
      },
    },
  },
}

        Отступ текста

        Утилиты для управления отступом текста.

        по умолчанию

        XS

        SM

        MD

        LG

        XL

        2xL

        3xl

        1,8Rem

        2EM

        1/2

        -x

        -10003

        --1,1MAIG 2

        . .js

         экспорт по умолчанию {
  тема: {
    продлевать: {
      отступ текста: {
        «4xl»: «5rem»,
        «5xl»: «6rem»,
      },
    },
  },
}

        Непрозрачность текста

        Утилиты для управления непрозрачностью цвета текста элемента.

        5

        10

        20

        25

        30

        40

        50

        60

        70

        75

        80

        95

        800003

        95

          9000 3

          800003

          95

            800003

            9000

              800003

              9000.

               экспорт по умолчанию {
  тема: {
    продлевать: {
      непрозрачность текста: {
        10: «0,1»,
        20: «0,2»,
        95: '0,95',
      },
    },
  },
}

              Text Shadow

              Утилиты для управления тенью текстового элемента.

              по умолчанию

              sm

              md

              lg

              xl

              нет

              Настройка

              windi.config.js

               экспорт по умолчанию {
  тема: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // Если предоставлена ​​тень ПО УМОЛЧАНИЮ, она будет использоваться для теневая утилита без суффикса.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0. 3)',
    },
  },
}

              Обводка текста

              Утилиты для управления обводкой текстового элемента.

              Ширина обводки текста

              Утилиты для управления шириной обводки текста.

              default

              none

              sm

              md

              lg

              1

              2

              3

              4

              5

              6

              7

              8

              0.1rem

              3px

              0.3em

              Настройка

              windi.config.js

               экспорт по умолчанию {
  тема: {
    продлевать: {
      textStrokeWidth: {
        'xl': '6',
        «2xl»: «8»,
      },
    },
  },
}

              Цвет обводки текста

              Утилиты для управления цветом обводки текста.

              Прозрачный

              Ток

              Грей-500

              RED-500

              Yellow-500

              Blue-500

              Green-500

              Grey-500/50

              RED-500/50 0003

              Yellow -5003/50

              RED-500/50 0003

              Yellow -5003

              . /50

              синий-500/50

              зеленый-500/50

              Настройка

              windi. config.js

               экспорт по умолчанию {
  тема: {
    textStrokeColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

              Преобразование текста

              Утилиты для управления преобразованием текста.

              верхний регистр

              нижний регистр

              заглавные буквы

              обычный регистр

              Text Overflow

              Утилиты для управления переполнением текста в элементе.

              урезать

              многоточие-переполнение

              -клип-переполнение

              Выравнивание по вертикали

              Утилиты для управления выравниванием по вертикали встроенного блока или поля ячейки таблицы.

              baseline

              top

              middle

              bottom

              text-top

              text-bottom

              пробел

              Утилиты для управления свойством пробела элемента.

              обычная

              нововставка

              предварительная

              предварительная

              предварительная

              Разрыв слов

              Утилиты для управления разрывами слов в элементе.

              нормальный

              слов

              все

              Режим письма

              Утилита режим письма устанавливает, будут ли строки текста располагаться горизонтально или вертикально, а также направление, в котором блоки перемещаются. Если он установлен для всего документа, он должен быть установлен для корневого элемента (элемент html для документов HTML).

              обычный

              вертикальный-правый

              вертикальная-левая

              Ориентация письма

              Утилита ориентации письма устанавливает ориентацию символов текста в строке. Это влияет только на текст в вертикальном режиме (когда режим письма не является горизонтальным-tb ). Это полезно для управления отображением языков, использующих вертикальное письмо, а также для создания вертикальных заголовков таблиц.

              смешанный

              вертикальный

              боковой

              Оформление текста CSS | Примеры оформления текста в CSS

              CSS предназначен для презентации. Если первый просмотр страницы понравился пользователю, половина работы уже сделана. Представление вашего текстового контента таким образом, чтобы все важные части сразу же привлекали внимание конечных пользователей, очень важно. Каскадная таблица стилей или CSS предлагает множество возможностей для улучшения представления текстового содержимого на веб-странице. Он не только предоставляет нам различные способы структурирования нашего текста, но и множество вариантов выделения важного текста. Одним из таких свойств является text-decoration. Можно использовать это свойство и настроить, как текст должен быть подчеркнут, т. е. подчеркнут, перечеркнут или перечеркнут (перечеркнут). Это свойство предлагает множество параметров, которые можно использовать для украшения текста по желанию. Однако следует отметить, что эта функция или свойство не поддерживаются всеми браузерами в равной степени и могут не давать одинаковых результатов. Следовательно, будет полезно проверить совместимость браузера перед запуском окончательного кода. Давайте посмотрим на синтаксис и как работает оформление текста в CSS.

              Как работает оформление текста в CSS?

              Оформление текста в CSS может использоваться как встроенный CSS, внешний CSS или внутренний CSS, в зависимости от выбора разработчика.

              Синтаксис:

              Синтаксис text-decoration следующий:

               text-decoration:  line | цвет | стиль;

              Здесь строка определяет тип линии, необходимой для текста, будь то подчеркивание, надчеркивание или зачеркивание. Цвет определяет цвет украшения. Стиль определяет, какой будет линия, то есть будет ли она пунктирной или волнистой.

              Свойство text-decoration является сокращенным свойством для свойств с тремя родителями, а именно:

              • text-decoration-line
              • стиль оформления текста
              • цвет текста-декорации

              Определение этих трех свойств отдельно для разных элементов может оказаться длительной задачей, поэтому краткое свойство text-decoration охватывает все три.

              Примеры оформления текста в CSS

              Давайте посмотрим на некоторые примеры оформления текста:

              1. Оформление текста с использованием всех трех родительских свойств

              В этом примере мы будем использовать метод внешнего CSS, поэтому начнем с создания файла css.

              Мы определим три свойства, т. е. text-decoration-line, text-decoration-style, text-decoration-color для элемента заголовка

              . Код должен быть таким:

              Код: 

               h3{
text-decoration-line: подчеркивание;
text-decoration-style: волнистый;
text-decoration-color: красный;
}

              В этом примере мы определим класс под названием «overline». Код должен быть таким:

              Код: 

               .overline{
text-decoration-line: overline;
text-decoration-style: штрих;
text-decoration-color: темно-зеленый;
}

              Комбинируя эти два кода, окончательный код CSS должен выглядеть следующим образом:

              Код: 

               h3{
text-decoration-line: подчеркивание;
text-decoration-style: волнистый;
text-decoration-color: красный;
}
. overline{
text-decoration-line: overline;
text-decoration-style: штрих;
text-decoration-color: темно-зеленый;
}

              Теперь, когда файл CSS готов, мы создадим соответствующий файл HTML и вызовем внешнюю таблицу стилей. Мы будем использовать элемент

              , для которого мы написали стиль, а также класс для элемента абзаца

              . Файл HTML, в результате которого будет создана веб-страница, должен выглядеть следующим образом:

              Код: 

               
<голова>
Свойство оформления текста


<тело>
 
              Оформление текста с помощью внешнего CSS
               
Тестирование свойства text-decoration

              Окончательный вывод:

              2. Text-decoration с использованием сокращенного свойства

              В этом примере мы будем использовать сокращенное свойство для демонстрации text-decoration.

              Поскольку в этом примере мы также используем внешний CSS, мы начнем с создания и определения стиля. Сначала мы определим стиль оформления текста для элемента заголовка

              , например:

              Код: 

               h3{
text-decoration: подчеркивание волнистым бирюзовым;
}

              Далее мы определим общий класс, который может использоваться любым элементом, если и когда это необходимо. Код для класса CSS должен быть примерно таким:

              Код: 

               .overline{
размер шрифта: 20 пикселей;
text-decoration: надчеркивание, подчеркивание, пунктирная красная линия;
}

              В итоге код CSS должен выглядеть так, как показано ниже. Обратите внимание, что дополнительные функции и параметры могут быть добавлены по мере необходимости.

              Код: 

               h3{
text-decoration: подчеркивание волнистым бирюзовым;
}
.overline{
размер шрифта: 20 пикселей;
text-decoration: надчеркивание, подчеркивание, пунктирная красная линия;
}

              Далее мы напишем HTML-код, используя как элемент заголовка, так и класс overline, для которого мы разработали стиль во внешней таблице стилей. Поскольку это внешний лист, мы будем вызывать его в разделе заголовка страницы. Окончательный комбинированный код HTML-страницы должен быть примерно таким:

              Код: 

               
<голова>
Свойство оформления текста


<тело>
 
              Это демонстрация сокращения Property text-decoration
               
Тестирование свойства text-decoration

              Сохраните этот код и откройте HTML-файл в браузере.

              Результат:

              3. Различные типы оформления текста с использованием встроенного CSS

              Мы создадим страницу HTML для этого примера, так как мы используем встроенный стиль CSS для опробования различных параметров оформления текста.

              Во-первых, мы установим стиль для элемента

              . Мы определим text-decoration и установим параметры таким образом, чтобы любое содержимое внутри

              было дважды подчеркнуто синим цветом. Аналогично стилизуем элементы

              и

              .

              Код должен быть таким, как показано ниже:

              Код: 

               Text-Decoration

               Использование волнистого подчеркивания для этого абзаца 
Использование перечеркнутого текста для вычеркивания текста

              Если объединить этот код стиля с базовой структурой HTML-страницы, окончательный код должен выглядеть примерно так: :

              Код: 

               
<голова>
Украшение текста с помощью встроенного CSS

<тело>
Text-Decoration
Использование WaveWinstring для этого абзаца
Использование зачеркивания для вычеркивания текста

              Сохраните эту страницу и откройте ее в браузере.

              No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *