Оформление текста css: Оформление текста в CSS | CSS — Программирование на Python и Objective-C в Mac OS

Содержание

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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать размер шрифта в CSS. В данной статье я бы хотел рассказать, как задать стиль и насыщенность (по-другому называют жирность) для шрифта в CSS. В данной статье мы изучили некоторые теги, с помощью которых можно задавать стиль и насыщенность для текста на html-странице. Но это неправильно, html должен задавать только структуру сайта, всё оформление должно быть сделано с помощью CSS. Курсив мы задавали с помощью тега <i>. В CSS за это отвечает свойство font-style со значением italic. Давайте создадим тестовую html-страницу:


<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Для абзацев в файле стилей style.css зададим стиль шрифта:


p {
font-style:italic;
}

После обновления страницы вы увидите, что шрифт стал курсивным. Другие значения для свойства font-style:
normal — стандартное начертание текста
oblique — наклонное начертание текста (не то же самое, что курсивное). Разницу можно будет заметить не для всех шрифтов.

Я всегда использовал только значение italic, других никогда нигде не использовал.

Давайте теперь зададим насыщенность или жирность для нашего текста. Делается это с помощью свойства font-weight (weight с англ «вес», так сказать вес шрифта) со значением bold:


p {
font-weight:bold;
}

Если вы запустите данную страницу, то увидите, что текст стал полужирным. Значение для насыщенности можно задавать равным от 100 до 900 с шагом 100. 100 — это самое светлое начертание, которое способен отобразить браузер, 900 — самое темное. Стандартный шрифт соответствует значению 400, полужирный (тот, который получается при значении bold — 700). Задание насыщенности в числах как-то не прижилось, и не все браузеры это отобразят (я сам тестировал в некоторых браузерах, но так и не заметил разницы между 100 и 600). Стандартную насыщенность можно задать с помощью свойства normal, что иногда требуется:


p {
font-weight:normal;
}

Следующее свойство, которое служит для оформления текста — это text-decoration. Оно служит для того, чтобы мы могли сделать текст, например, подчеркнутым (значение underline). В html для этого служит тег <u>. С помощью этого свойства мы можем также подчеркнуть текст сверху (overline) и перечеркнуть текст (line-through). Убрать декорацию текста можно с помощью значения none. Давайте создадим тестовую html-страницу и применим на ней inline-стиль для каждого абзаца:


<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
<p>Подчеркнутый абзац данного текста</p>
<p>Надчеркнутый абзац данного текста</p>
<p>Перечеркнутый абзац данного текста</p>
<p>Простой абзац данного текста</p>
</body>
</html>

Запустите данную страницу и убедитесь, что всё работает, как нужно.

Домашнее задание: в данной статье мы рассмотрено 3 свойства и у данных свойств много значений. Запомнить их все трудно, но если практиковаться, то будет намного проще. Поэтому создайте свою html-страницу и примените к ней все те свойства, которые вы изучили в данной статье.

В данной статье вы узнали как оформлять текст с помощью свойств font-style, font-weight, text-decoration.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Следующая статья >

CSS — Работа с текстом

На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Основные свойства CSS для работы с текстом

1. Свойство font-size

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

2. Свойство font-weight

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

3. Свойство font-style

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

4. Свойство font-family

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

5. Свойство color

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

6. Свойство background-color

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p>Lorem ipsum dolor <span>sit amet</span></p>
<p><span>Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

6. Свойство text-decoration

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p><span>Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

7. Свойство text-transform

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

8. Свойство white-space

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).


<p>Lorem    ipsum 

dolor sit amet</p>
<hr>
<p>Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum

dolor sit amet

9. Свойство text-align

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

10. Свойство vertical-align

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).


<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>

Lorem ipsum dolor sit amet.

11. Свойство line-height

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Оформление текста используя CSS | Справочник HTML CSS

При изучении css важной частью является умение стилизовать текст. В данной статье рассмотрим свойства для задания стилей для текста, а также рассмотрим их использование на примерах.

Для многих свойств можно применить “глобальные” значения:

initial — устанавливает значение по умолчанию

inherit — наследует значение родительского элемента

Их описание находится здесь, чтобы не дублировать его много раз.

Стилизация текста

color — задает цвет текста

text-shadow — задает тень тексту, можно задать несколько теней через запятую

Синтаксис: text-shadow: смещение по x | смещение по y | радиус-размытия | цвет;

text-decoration — добавляет декоративную линию. Сокращенное свойство для text-decoration-line, text-decoration-color, text-decoration-style.

Синтаксис: text-decoration: text-decoration-line text-decoration-color text-decoration-style

Значения text-decoration-line:

none — отсутствие линии
overline — добавляет линию над текстом
underline — добавляет линию под текстом
line-through — перечеркивает текст
initial
inherit

Значения text-decoration-style:

solid — сплошная линия
double — двойная линия
dotted — линия из точек
dashed — пунктирная линия
wavy — волнистая линия

Примеры: https://codepen.io/dmitryvalak/pen/XWNrVwE

Шрифты

font-family — задает название шрифта для текста. Можно указать несколько шрифтов через запятую. Если в названии шрифта есть пробелы, его нужно обернуть кавычками. Обычно указывается несколько шрифтов и семейство шрифтов. Самым первым указывают приоритетный шрифт, если браузер не находит такого шрифта у пользователя он применяет следующий. Семейство шрифтов указывается для ситуации когда ни одного из указанных шрифтов нет, тогда браузер сам выберет подходящий шрифт из указанного семейства шрифтов.

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

serif — шрифты с засечками
sans-serif — рубленные шрифты
cursive — курсивные шрифты
fantasy — декоративные шрифты
monospace — моноширинные шрифты

font-size — задает размер шрифта

font-style — задает стиль шрифта

Значения:

normal — обычный стиль (значение по умолчанию)
italic — курсив
oblique — наклонный
initial
inherit

font-weight — задает вес/жирность шрифта. Значения можно указать ключевыми словами или числовыми значениями: 100, 200, 300, 400, 500, 600, 700, 800, 900

Ключевые слова:

normal — обычный (аналогично 400)
bold — жирный (аналогично 700)
lighter — на один порядок более легче
bolder — на один порядок более тяжелее
initial
inherit

Примеры: https://codepen.io/dmitryvalak/pen/bGBbaXe

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

text-transform — трансформирует текст

Значения:

capitalize — первая буква каждого слова заглавная
uppercase — все буквы заглавные
lowercase — все буквы строчные
none — отсутствие трансформаций (значение по умолчанию)
initial
inherit

Примеры: https://codepen.io/dmitryvalak/pen/eYBOyqy

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

text-align — задает горизонтальное выравнивание текста

Значения:

left — выравнивание по левому краю
right — выравнивание по правому краю
start — выравнивание по начальному краю
end — выравнивание по конечному краю
center — выравнивание по центру
justify — выравнивание по левому и по правому краю, увеличивается расстояние между буквами и пробелы, последняя строка не выравнивается
match-parent — аналогично inherit, но значения start и end вычисляются в зависимости от значения direction родительского элемента
inherit

Примеры: https://codepen.io/dmitryvalak/pen/YzpKYmb

text-justify — указывает тип выравнивания при значении text-align: justify

Значения:

none — отключает выравнивание текста
auto — браузер сам выбирает наилучший тип выравнивания на основании используемого языка, качества отображения и производительности (значение по умолчанию)
inter-word — для выравнивания добавляет расстояние между словами
inter-character — для выравнивания добавляет расстояние между символами

Примеры: https://codepen.io/dmitryvalak/pen/poNzazw

text-align-last — задает горизонтальное выравнивание текста для последней строки

Значения:

auto — выравнивается по значению свойства text-align
left, right, start, end, center, justify — значения аналогичны как у свойства text-align

line-height — задает высоту строки. Можно использовать число (значение по умолчанию 1.2) или единицы измерения css

Пример: https://codepen.io/dmitryvalak/pen/gOLYvOp

Отступы, интервалы и переносы строк

word-spacing — устанавливает интервал между словами. Кроме ключевых слов значения можно указать в единицах измерения css (значение в процентах имеет плохую поддержку браузеров), значение может быть отрицательным

Значения:

normal — не изменяет интервал (значение по умолчанию)
initial
inherit

Пример: https://codepen.io/dmitryvalak/pen/QWGLQwp

letter-spacing — устанавливает интервал между символами, правила и значения аналогичны word-spacing

Пример: https://codepen.io/dmitryvalak/pen/yLVBvyz

text-indent — устанавливает отступ для первой строки в блоке. Значения указывается в единицах измерения css, значение может быть отрицательным

Пример: https://codepen.io/dmitryvalak/pen/qBqWxEL

white-space — позволяет управлять переносами строк и пробелами

Значения:

normal — текст переносится по необходимости, лишние пробелы удаляются (значение по умолчанию)
nowrap — запрещает перенос строк
pre-wrap — текст переносится по необходимости, все пробелы сохраняются
pre-line — текст переносится по необходимости, все лишние пробелы удаляются, кроме случаев с использованием
break-spaces — аналогично pre-wrap, но все неудаляемые пробелы и переносы строк занимают место
initial
inherit

Примеры: https://codepen.io/dmitryvalak/pen/RwobQPb

tab-size — указывает величину отступа табуляции (Tab), работает для тегов textarea и pre

Значения:

значение в единицах измерения css
число указывающие число пробелов
initial
inherit

Оформление текста с помощью CSS. Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие) Выравнивание текста с помощью CSS

Примечание:

Есть также свойство vertical-align , которое отвечает за вертикальное выравнивание.

Выравнивание текста по левому краю. Действуют по умолчанию.

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

Выравнивание текста по правому краю.

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

Иногда text-align: justify;
может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Вместо свойства text-align
можно также использовать атрибут align
, который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

Здравствуйте, уважаемые читатели блога сайт. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).

Свойство стиля text-align
задает горизонтальное выравнивание текста
и имеет всего четыре возможных значения:

Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

Примеры использования свойства:

Следующее свойство CSS text-ident
задает отступ для красной строки
, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align
. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
top — выравнивание фрагмента текста по верхнему краю родительского элемента;
text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
middle — выравнивание центра фрагмента текста по центру родительского элемента;
bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

top — для выравнивания содержимого по верхней границе ячейки;
bottom — для выравнивания содержимого по нижней границе ячейки;
middle — для выравнивания по центру ячейки (используется по умолчанию).

Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre»
, помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Пример использования:

Далее рассмотрим параметр word-wrap
, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

Параметры тени у текста — свойство text-shadow

Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:

Значение none отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени
задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.

Горизонтальное смещение тени
можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет располагаться правее текста, при отрицательном — левее. Нулевое значение расположит тень прямо под текстом и имеет смысл только если задано размытие тени.

Вертикальное смещение тени
тоже можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет смещаться ниже текста, при отрицательном — выше. Нулевое значение расположит тень прямо под текстом.

В любой единице измерения задается и радиус размытия тени
. Чем больше это значение, тем шире становится тень и сильнее сглаживается. Если этот параметр не установлен, то значение размытие предполагается равным нулю. Так как алгоритм сглаживания обычно у разных браузеров отличается, то и вид тени может несколько отличаться в зависимости от браузера.

Задаёт выравнивание последней строки блока текста.

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

Обозначения

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

Значения

auto Совпадает с выравниванием, заданным свойством text-align , за исключением значения justify
. Для него выравнивание будет как start
. start Строка выравнивается по начальному краю блока, который может меняться в зависимости от направления текста (слева направо или справа налево). end Строка выравнивается по конечному краю блока, он определяется направлением текста. left Строка выравнивается по левому краю. right Строка выравнивается по правому краю. center Строка выравнивается по центру. justify Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Влияние разных значений на положение текста показано в табл. 1.

Табл. 1. Влияние значений text-align-last

Значение	Выравнивание	Вид текста
left	По левому краю
right	По правому краю
center	По центру
justify	По ширине

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
text-align-last: start
;
}

Пример

text-align-last

При переходе через горы опирайся на долину;
располагайся на высотах, смотря, где солнечная сторона. При
бое с противником, находящимся на возвышенности, не иди
прямо вверх. Таково расположение войска в горах.

Объектная модель

Объект
.style.textAlignLast

Примечание

Internet Explorer и Edge не поддерживают значения start
и end
.

Firefox до версии 49 поддерживает свойство -moz-text-align-last
.

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

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

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

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

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

1. Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

Свойство наследуется.

Синтаксис

Text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

Свойство наследуется.

white-space
Значения:
normal	Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap	Запрещает переносы строк, за исключением применения .
pre	Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap	Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line	Удаляет лишние пробелы, за исключением случаев .
break-spaces	Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
initial
inherit

Синтаксис

White-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: inherit;
white-space: initial;

3. Настройка табуляции: свойство tab-size

Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов и

Для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

Свойство наследуется.

Синтаксис

Tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;

4. Разрыв строки и границы слов

Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.

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

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

4.1. Правила разрыва для букв: свойство word-break

Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.

Свойство наследуется.

Синтаксис

Word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: inherit;
word-break: initial;

4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

Свойство наследуется.

line-break
Значения:
auto	Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.
loose	Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах.
normal	Разбивает текст, используя наиболее распространенный набор правил переноса строк.
strict	Разбивает текст, используя строгий набор правил переноса строк.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;

4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

Свойство наследуется.

hyphens
Значения:
none	Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса.
manual	Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ -). Значение по умолчанию.
auto	Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;

4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство overflow-wrap (или его устаревшее имя word-wrap) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.

Свойство наследуется.

overflow-wrap, word-wrap
Значения:
normal	Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию.
break-word
anywhere	Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;

5. Выравнивание и выключка строк

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

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent , присваиваются text-align-all и сбрасываются в text-align-last на auto .

Свойство наследуется.

text-align
Значения:
start	Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию.
end	Содержимое на уровне строки выравнивается по конечному краю линейного блока.
left	Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
right	Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
center	Содержимое на уровне строки центрируется внутри линейного блока.
justify	Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last , последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
justify-all	Устанавливает text-align-all и text-align-last в justify , также выравнивая последнюю строку.
match-parent	Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right .
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;

5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last . Принимает значения start , end , left , right , center , justify и match-parent .

Свойство наследуется.

Синтаксис

Text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;

5.3. Выравнивание последней строки: свойство text-align-last

Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

Если задано значение auto , содержимое в соответствующей строке выравнивается по text-align-all , если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align .

Принимает значения auto , start , end , left , right , center , justify и match-parent .

Свойство наследуется.

Синтаксис

Text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;

6. Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing .

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

Свойство наследуется.

Синтаксис

Word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 50%;
word-spacing: inherit;
word-spacing: initial;

6.2. Трекинг: свойство letter-spacing

Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к и word-spacing . В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.

Свойство наследуется.

Синтаксис

Letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;

7. Отступ первой строки: свойство text-indent

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

Свойство наследуется.

Синтаксис

Text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;

29. Оформление текста с помощью css

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

Введение

Так
как Web является совокупностью документов
— динамических, статических, функциональных
— соглашения, согласно которым они
форматируются, заимствуются из лучшего
доступного
нам источника: шести веков традиции
печати. Это включает полиграфию.
Однако Web является новой и отличающейся
информационной средой, а полиграфия
Web-сайта требует по большому счету
совершенно других навыков для создания
представления, и зависит от дополнительных
ограничений.

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

Лекция
имеет следующую структуру:

Обзор
полиграфии
Web

Свойства
шрифта
CSS: изменение внешнего вида текста

Как
это делается

Какие
единицы измерения могут применяться в
свойствах текста
CSS?

Какой
смысл использовать
так много разных типов единиц измерения?

Что
является физическим эквивалентом
пикселя рабочего стола?

Em,
проценты, и пункты, согласно CSS

Краткое
замечание об официальных Рекомендациях
CSS 2.1

Ключевые
слова размеров

Выбор
семейства шрифтов
и гарнитуры
Стиль
шрифта,
вариант шрифта,
и толщина шрифта:
изменение характеристик

Зачем
использовать свойство font-style, когда
достаточно элементов em и i?

font-variant
как другой инструмент для выделения
коротких отрывков

font-weight:
жирность и ее отсутствие

Свойства
CSS для текста
и выравнивания:
изменение композиции

Выравнивание
и text-align
Изменение
слежения: свойства letter-spacing и word-spacing
Отступ
начальных строк: свойство text-indent
Прописные
буквы: свойство text-transform
Оформление
ссылок и показ удаления: свойство
text-decoration
Регулировка
просвета (интерлиньяж) и высота строки
(line-heigh)t
Вытеснение
pre и br: свойство white-space

Заключение

Дополнительное
чтение

Контрольные
вопросы

Обзор полиграфии Web

В
Web дизайнеры имеют значительно меньше
контроля над представлением, чем в
другой информационной среде. Это
становится наиболее очевидно при
рассмотрении основных свойств документа,
таких как размер, разрешение, и контраст.
Существуют также строгие ограничения
на качество полиграфии
Web, что было рассмотрено в лекции 11 об
основах полиграфии.

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

Контраст

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

Материалы с тегом «оформление текста»

CSS свойство text-shadow

CSS свойство text-shadow задает эффект тени тексту элемента.

font-size: 100.01% для html

Отвечаем на вопрос: зачем использовать font-size: 100.01%.

Безопасные шрифтовые CSS стеки для рунета

Приведен перечень безопасных шрифтовых CSS стеков для рунета.

Верстальщику о шрифтах. Часть I: Безопасные шрифты

Хороший дизайнер, как и хороший верстальщик, знает, что браузер, как правило, может использовать для отображения страницы только те шрифты, которые установлены на компьютере у пользователя. Возможно ли обеспечить одинаковое отображение шрифтов в разных платформах и разных операционных системах? Как определить какие шрифты можно использовать, а какие необходимо подменять или делать картинками? Попробуем разобраться.

Верстальщику о шрифтах. Часть II : Соответствия шрифтов Windows, Mac и Unix/Linux

Продолжение статьи «Верстальщику о шрифтах. Часть I: Безопасные шрифты». Ищем соответствия между шрифтами в разных операционных системах. Составляем безопасные шрифтовые CSS стеки.

Вертикальный текст на CSS

О том как кроссбраузерно сделать вертикальный текст средствами CSS.

Контур для текста на CSS

О том как сделать контур для текста средствами CSS.

Подмена текста изображением

Иногда дизайнеры используют красивые (нестандартные) шрифты, например, для заголовков, пунктов меню, эффектных ссылок. Если решено было делать их картинками, тогда воспользуйся техникой замены текста изображением — правило хорошего тона.

Свойство break-after

Css свойство break-after определяет разрыв колонки после элемента в многоколоночном элементе, а также отвечает за разбивку страниц при печати.

Свойство break-before

Css свойство break-before определяет разрыв колонки перед элементом в многоколоночном элементе, а также отвечает за разбивку страниц при печати.

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

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

После цвета шрифт — возможно, важнейшее свойство страницы. На
этой странице я не буду демонстрировать никаких «трюков», но покажу
ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют
тысячи шрифтов и большинство из них не бесплатны), CSS
предусматривает резервную систему. Первым вы указываете шрифт,
который хотели бы использовать. Затем следуют любые шрифты, которые
вы могли бы использовать, если первый указанный шрифт не доступен.
А закончить список вы должны типовым шрифтом, который
имеет 5 видов: serif, sans-serif, monospace,
cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш
браузер может не знать их все) и вы можете увидеть, что ваш браузер
делает с каждым из пяти типовых шрифтов:


‘sans-serif’: обычные шрифты без засечек
`Arial, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Helvetica, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Verdana, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trebuchet MS, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Gill Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Noto Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Arial Narrow, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
`Times, Times New Roman, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Georgia, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Palatino, URW Palladio L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bookman, URW Bookman L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`New Century Schoolbook, TeX Gyre Schola, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
`Andale Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier New, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`FreeMono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`DejaVu Sans Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
`Comic Sans MS, Comic Sans, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bradley Hand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Brush Script MT, Brush Script Std, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Snell Roundhand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`URW Chancery L, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
`Impact, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Luminari, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Marker Felt, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trattatello, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного
и того же шрифтового семейства. Обычно это жирный стиль (bold) или
курсив (italic), часто встречается также стиль «жирный курсив»
(bold italic), реже — капитель (малые прописные буквы —
small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или
растянутые/сжатые версии.

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

правило	serif	sans-serif
Стили
`font-style: normal`	Съешь же…	Съешь же…
`font-style: italic`	Съешь же…	Съешь же…
`font-style: oblique`	Съешь же…	Съешь же…
Насыщенность шрифта
`font-weight: 100`	Съешь же…	Съешь же…
`font-weight: 200`	Съешь же…	Съешь же…
`font-weight: 300`	Съешь же…	Съешь же…
`font-weight: normal`	Съешь же…	Съешь же…
`font-weight: 500`	Съешь же…	Съешь же…
`font-weight: 600`	Съешь же…	Съешь же…
`font-weight: bold`	Съешь же…	Съешь же…
`font-weight: 800`	Съешь же…	Съешь же…
`font-weight: 900`	Съешь же…	Съешь же…
Варианты
`font-variant: normal`	Съешь же…	Съешь же…
`font-variant: small-caps`	Съешь же…	Съешь же…
Растяжение
`font-stretch: ultra-condensed`	Съешь же…	Съешь же…
`font-stretch: extra-condensed`	Съешь же…	Съешь же…
`font-stretch: condensed`	Съешь же…	Съешь же…
`font-stretch: semi-condensed`	Съешь же…	Съешь же…
`font-stretch: normal`	Съешь же…	Съешь же…
`font-stretch: semi-expanded`	Съешь же…	Съешь же…
`font-stretch: expanded`	Съешь же…	Съешь же…
`font-stretch: extra-expanded`	Съешь же…	Съешь же…
`font-stretch: ultra-expanded`	Съешь же…	Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания
специальных стилей (для шрифтов, которые поддерживают несколько
вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

text-decoration-Thickness — CSS: Cascading Style Sheets

Свойство CSS text-decoration-Thick устанавливает толщину обводки линии украшения, которая используется в тексте в элементе, например в сквозной строке, подчеркивание или подчеркивание.

 
толщина украшения текста: авто;
толщина-украшение-текста: от-шрифта;


толщина украшения текста: 0,1 мкм;
толщина украшения текста: 3 пикселя;


толщина текстового оформления: 10%;


толщина украшения текста: наследование;
толщина украшения текста: начальная;
толщина украшения текста: вернуться;
толщина-украшения-текста: не задано;

Значения

авто: Браузер выбирает подходящую ширину для линии оформления текста.
от-шрифт: Если файл шрифта содержит информацию о предпочтительной толщине, используйте это значение. Если файл шрифта не включает эту информацию, ведите себя так, как если бы было установлено auto , при этом браузер выбирает подходящую толщину.
<длина>: Определяет толщину линии оформления текста как <длина> , отменяя предложенный файл шрифта или значение браузера по умолчанию.
<процент>: Задает толщину линии оформления текста как <процент> из 1em в текущем шрифте. Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Браузер должен использовать минимум 1 пиксель устройства. Для данного применения этого свойства толщина постоянна по всему блоку, к которому оно применяется, даже если есть дочерние элементы с другим размером шрифта.

Различная толщина

HTML

   Вот текст с красным подчеркиванием в 1 пиксель. 
 У этого есть красная линия подчеркивания 5 пикселей. 
 Здесь используется эквивалентное сокращение.

CSS

  .thin {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина украшения текста: 1px;
}

.толстый {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина текстового украшения: 5 пикселей;
}

.стенография {
  оформление текста: подчеркивание сплошным красным цветом 5 пикселей;
}

Результаты

Примечание: Свойство раньше называлось text-decoration-width , но в 2019 году было обновлено до text-decoration-width .

таблицы BCD загружаются только в браузере

Модуль оформления текста CSS, уровень 4

1. Введение

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

Этот модуль охватывает оформление текста, т.е.е. украшение глифов
текста, набранного в соответствии с правилами шрифтов и типографикой.
(См. [CSS-TEXT-3] и [CSS-FONTS-3].)
Такие особенности традиционно используются не только в чисто декоративных целях,
но также в некоторых случаях, чтобы подчеркнуть, для вежливости,
и для обозначения редакционных изменений, таких как вставки, удаления и орфографические ошибки.

CSS Уровни 1 и 2 определяли только самые простые украшения линий (подчеркивание, надстрочные линии и зачеркивание).
соответствует западным типографским традициям.Уровень 3 этого модуля добавил возможность изменять
цвет, стиль, положение и непрерывность этих украшений,
а также введены знаки ударения (традиционно используемые в восточноазиатской типографике),
и тени (которые были предложены, а затем отложены с Уровня 2).
Уровень 4 вводит дополнительный контроль над этими украшениями.

1.1. Модуль взаимодействия

Этот модуль заменяет и расширяет декорирование текста
функции, определенные в [CSS-TEXT-DECOR-3].

Все свойства в этом модуле
может применяться к псевдоэлементам :: first-line и :: first-letter.

1.2. Определения значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].
Типы значений, не определенные в этой спецификации, определены в CSS Values & Units [CSS-VALUES-3].
Комбинация с другими модулями CSS может расширить определения этих типов значений.

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

1,3. Терминология

Термины: типографская символьная единица ( символов, ), типографская буквенная единица (буква),
и язык содержимого, используемый в этой спецификации, определены в [CSS-TEXT-3].
Другая терминология и концепции, используемые в этой спецификации, определены.
в [CSS2] и [CSS-WRITING-MODES-4].

2. Оформление линии: подчеркивание, подчеркивание и зачеркивание

Следующие свойства описывают украшения строк, которые добавляются к содержимому элемента.При указании или распространении на встроенный блок,
эта коробка становится коробкой для украшения для этого украшения,
нанесение украшения на все его фрагменты.
Затем оформление распространяется на любые блоки на уровне блоков в потоке, которые разделяют встроенный
(см. CSS2.1 раздел 9.2.1.1).
При указании или распространении на контейнер блока, который устанавливает встроенный контекст форматирования,
украшения распространяются на анонимный встроенный блок, который обертывает все текущие дочерние элементы встроенного уровня контейнера блока.При указании на контейнере с рубином или его распространении на него,
украшения распространяются только на рубиновую основу.
Для всех остальных типов ящиков
украшения распространяются на всех входящих в поток детей.

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

Подчеркивание, надчеркивание и сквозные линии отображаются только для незамещенных строчных блоков,
и прорисовываются по всему тексту (включая пробелы, межбуквенные и межсловные интервалы)
кроме пробелов (пробелы, межбуквенные и межсловные интервалы) в начале и в конце строки. Атомарные встроенные строки, такие как изображения и встроенные блоки, не декорируются.
Поля, границы и заполнение рамки украшения всегда пропускаются,
однако поля, границы и отступы дочерних строковых блоков — нет.

Обратите внимание, что CSS 2.1 требует всегда пропускать поля, границы и отступы.
На уровне 3 и выше по умолчанию
пропускаются только поля, границы и заполнение рамки украшения.
В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому значению по умолчанию.

Относительное позиционирование потомка перемещает все текстовые украшения
применяется к нему вместе с текстом потомка; это не влияет
расчет начального положения украшения на этой линии.
Свойство видимости, текстовая тень, фильтры и другие графические преобразования.
аналогичным образом влияют на оформление текста как часть текста, на котором они нарисованы,
даже если украшения были указаны на поле предка,
и не влияют на расчет их начального положения или толщины.(В случае линейных украшений, нарисованных поверх атомарной встроенной строки или через поля / границы / отступы незамещенного встроенного блока,
они аналогично связаны с затронутым атомарным встроенным / незамещенным встроенным блоком
а не с коробкой для украшения.)

В следующей таблице стилей и фрагменте документа:

 цитата {украшение текста: подчеркивание; цвет синий; }
em {display: block; }
цитируй {цвет: фуксия; }

<цитата>

Помогите помогите! Я под шляпой! —GwieF

… подчеркивание элемента цитаты переносится на
анонимный встроенный блок, который окружает элемент span, вызывая
текст «Помогите, помогите!» быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет взят из
элемент цитаты. текст в блоке em также подчеркнут, так как он находится во входном блоке для
которым подчеркивается подчеркивание. Последняя строка текста — фуксия,
но подчеркивание под ним по-прежнему остается синим подчеркиванием
анонимный встроенный элемент.На этой диаграмме показаны блоки, использованные в приведенном выше примере. В
закругленная морская линия представляет собой анонимную обертку встроенного элемента
встроенное содержимое элемента абзаца, закругленная синяя линия
представляет элемент span, а оранжевые линии представляют
блоки.

Примечание: линейные украшения распространяются через дерево блоков,
не по наследству,
и таким образом не влияют на потомков
при указании в элементе с display: contents.

2.1. Линии оформления текста: свойство

text-decoration-line.

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

Примечание: если это не требуется для цвета, стиля и толщины линий
устанавливается объявлениями ниже в каскаде,
безопаснее использовать сокращение text-decoration вместо этого longhand.

Значения имеют следующие значения:

нет: Не производит и не запрещает оформление текста.
подчеркивание: Каждая строка текста подчеркнута.
черта: Каждая строка текста имеет над ней черту
(т.е. на противоположной стороне от подчеркивания).
сквозной: Каждая строка текста проходит через линию посередине.
мигает: Текст мигает (чередуется между видимым и невидимым).
Соответствующие пользовательские агенты могут просто не мигать текстом.
Обратите внимание, что отсутствие мигания текста — это один из способов удовлетворения контрольной точки 3.3 WAI-UAAG.
Это значение , а не в пользу анимации [CSS3-ANIMATIONS].
орфографическая ошибка: Это значение указывает тип оформления текста.
используется агентом пользователя для выделения орфографических ошибок.Его внешний вид определяется UA,
и может зависеть от платформы. Часто это подчеркивается красной волнистой линией.
грамматическая ошибка: Это значение указывает тип оформления текста.
используется агентом пользователя для выделения грамматических ошибок.
Его внешний вид определяется UA,
и может зависеть от платформы. Это часто отображается как зеленая волнистая линия подчеркивания.

Примечание. В режимах вертикального письма положение подчеркивания текста может привести к смещению сторон подчеркивания и надчеркивания.Это позволяет расположению подчеркивания отключать языковые предпочтения.
автоматически.

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

2.2. Стиль оформления текста: свойство

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

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

Значения имеют то же значение, что и свойства стиля границы [CSS-BACKGROUNDS-3]. wavy обозначает волнистую линию.

2.3. Цвет оформления текста: свойство

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

Это свойство,
которое является подсвойством сокращения text-decoration,
устанавливает цвет подчеркивания, оверлей и сквозных линий
указанный в элементе с помощью text-decoration-line,
и влияет на все украшения, происходящие из этого элемента
даже если в дочерних полях указан другой цвет.

2.4. Толщина линии оформления текста: свойство

толщины-украшения-текста

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

Значения имеют следующие значения:

авто

UA выбирает подходящую толщину для линий оформления текста;
см. ниже.

от-шрифт

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

<длина>

Задает толщину линий оформления текста как фиксированную длину.UA должен ограничить фактическое значение одним пикселем устройства.

Примечание: длина наследуется как фиксированное значение,
и не будет масштабироваться вместе со шрифтом.

<процент>

Задает смещение подчеркивания в процентах от 1em.
UA должен ограничить фактическое значение одним пикселем устройства.

Примечание. Процент наследуется как относительное значение,
и, следовательно, будет масштабироваться с изменениями шрифта по мере его унаследования.

2.4.1. Автоматическая толщина линий оформления текста

Некоторые форматы шрифтов (например, OpenType) могут содержать информацию
о подходящей толщине линии украшения.
UA должен использовать такую информацию на основе шрифтов.
при выборе автоматической толщины линии
везде, где это возможно.

2,5. Определение положения и толщины декоративных линий

Этот раздел скопирован из ранних черновиков уровня 3 оформления текста.
Он все еще находится на рассмотрении и нуждается в интеграции с text-underline-offset и text-decoration-Thickness.

Поскольку линейные украшения могут охватывать элементы с различными размерами шрифта и
вертикальные выравнивания, лучшая позиция для украшения линии — не
обязательно идеальное положение, продиктованное украшением шкатулки.
Вместо этого он рассчитывается для каждой строки из всего текста, украшенного рамкой для украшения в этой строке,
считается текстом .
Однако потомки блока украшения, которые пропускаются из-за пропуска текста-декорации,
встроенные потомки с text-decoration-skip: ink,
и любые потомки, которые не участвуют во встроенном контексте форматирования блока украшения
исключаются из множества рассматриваемого текста.

Затем рассчитываются позиции декорирования линий.
на строку
следующее
(обработка чрезмерно расположенных подчеркиваний как перекрывающих строк
и недооцененные надстрочные линии, как под строками):

по линиям

Выровняйте декоративный элемент линии относительно самого высокого края EM-box
рассматриваемого текста.

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

Положение подчеркивания алфавита рассчитывается следующим образом:
идеальное смещение (от алфавитной базовой линии) каждого прогона рассматриваемого текста,
их усреднение, а затем использование самой нижней буквенной базовой линии для фактического позиционирования линии.(Алфавитные базовые линии могут отличаться между блоками, выровненными по базовой линии.
если доминирующая базовая линия не буквенная.)
Чтобы верхние и нижние индексы не сбивали эту позицию с толку,
строка с не начальным вычисленным вертикальным выравниванием рассматривается как имеющая идеальную позицию подчеркивания своего родителя.

без букв под чертой

Расположите декоративный элемент линии относительно самого нижнего края EM-бокса.
рассматриваемого текста.

сквозных

Для сквозных строк используется тот же тип усреднения, что и для буквенного подчеркивания,
но пересчитать позицию при рисовании через потомка с другим вычисленным размером шрифта.(Это гарантирует, что текст остается фактически «перечеркнутым», несмотря на любые изменения размера шрифта.)
Для каждого прогона рассматриваемого текста с одинаковым размером шрифта
вычислить идеальную позицию, усредненную по метрикам шрифта.
Чтобы верхние и нижние индексы не сбивали эту позицию с толку,
строка с не начальным вычисленным вертикальным выравниванием рассматривается как имеющая идеальную позицию подчеркивания своего родителя.
Расположите часть линии поперек каждого декорированного фрагмента в этой позиции.

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

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

На следующем рисунке показано усреднение для подчеркивания:

В трех фрагментах подчеркнутого текста проводится подчеркивание.
последовательно ниже и толще, как отношение большого текста к мелкому
текст увеличивается.

Используя тот же пример, сквозная строка во втором фрагменте,
вместо усреднения двух размеров шрифта,
разделите сквозную линию на два сегмента:

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

2,6. Сокращение оформления текста: свойство text-decoration

Это свойство является сокращением для установки строки-украшения-текста, толщины-украшения-текста, стиля-украшения-текста,
и текст-украшение-цвет в одном объявлении.
Пропущенные значения устанавливаются на свои начальные значения.

Примечание. Объявление оформления текста, в котором отсутствует
оба значения text-decoration-color и text-decoration-style
обратно совместим с CSS уровней 1 и 2.

В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом.
подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синим пунктиром в UA CSS3.Ссылка

 {
  цвет синий;
  текст-оформление: подчеркивание;
  оформление текста: темно-синяя пунктирная линия; / * Игнорируется в CSS1 / CSS2 UA * /
}

Примечание. В сокращении намеренно опущено свойство text-underline-position,
это настройка, зависящая от языка / системы письма, которая позволяет отключать контент,
так что он может каскадировать и наследовать независимо
из (ненаследственных) стилистических настроек стенографического оформления текста.

2.7. Text Underline Position: свойство text-underline-position

Это свойство,
это , а не как подсвойство сокращения text-decoration,
устанавливает позицию подчеркивания по отношению к тексту,
и определяет его нулевую позицию для дальнейшей настройки с помощью text-underline-offset.Он влияет на все украшения, происходящие из этого элемента,
даже если в дочерних полях указано другое положение.
Это не влияет на подчеркивания, указанные родительскими элементами.

В следующем примере стили современного китайского, японского и корейского языков.
тексты с соответствующим подчеркиванием по горизонтали
и вертикальный текст:

: root: lang (ja), [lang | = ja],: root: lang (ko), [lang | = ko] {позиция подчеркивания текста: внизу справа; }
: root: lang (zh), [lang | = zh] {положение подчеркивания текста: внизу слева; }

Если указано только left или right, подразумевается также auto.Значения имеют следующие значения:

авто

Пользовательский агент может использовать любой алгоритм для определения
положение подчеркивания; однако он должен быть размещен на или под
алфавитный базовый уровень.

Примечание. Рекомендуется, чтобы позиция подчеркивания по умолчанию
быть близко к алфавитной базовой линии,
если это не приведет к перекрестному (или иным образом пониженному) тексту
или нарисуйте глифы из азиатских шрифтов, таких как ханьский или тибетский
для которых буквенное подчеркивание слишком велико:
в таких случаях смещение подчеркивания ниже
или выравнивание по краю EM-бокса, как описано ниже, может быть более подходящим.

Типичное «буквенное» подчеркивание располагается чуть ниже буквенной базовой линии

из шрифта

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

под

Подчеркивание располагается под под текстовым содержанием элемента.
В этом случае подчеркивание обычно не пересекает нижние элементы.(Это иногда называют «бухгалтерским» подчеркиванием.)
Это значение можно комбинировать с левым или правым, если конкретная сторона предпочтительнее в вертикальных типографских режимах.

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

: корень {положение-подчеркивания-текста: ниже; }

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

слева

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

правый

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

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

2,8. Смещение подчеркивания текста: свойство смещения подчеркивания текста

Это свойство,
это , а не как подсвойство сокращения text-decoration,
устанавливает смещение подчеркиваний от их нулевого положения.
Положительные смещения представляют собой расстояния от текста;
отрицательные смещения внутрь.
Он влияет на все украшения, происходящие из этого элемента,
даже если в дочерних полях указано другое положение.Это не влияет на подчеркивания, указанные родительскими элементами.

Значения имеют следующие значения:

авто

UA выбирает подходящее смещение для подчеркивания.

Однако это смещение должно быть нулевым.
если был указан from-font
и UA смог извлечь подходящую метрику для использования
от шрифта.

<длина>

Задает смещение подчеркивания как фиксированную длину.

Примечание: длина наследуется как фиксированное значение,
и не будет масштабироваться вместе со шрифтом.

<процент>

Задает смещение подчеркивания в процентах от 1em.

Когда значение свойства text-decoration-line равно орфографической или грамматической,
UA может игнорировать значение text-underline-position.

2.8.1. Смещение подчеркивания исходной точки (нулевое положение)

Нулевая позиция подчеркивания
зависит от значения text-underline-position, как описано ниже.

Подчеркивание выравнивается по внешней стороне указанной позиции
(увеличивая его толщину только в положительном направлении).

Все автоматические настройки, сделанные для размещения потомков, сохраняются;
text-underline-offset является дополнением к ним.

2.8.2. Использование метрик шрифта для автоматического позиционирования

Некоторые форматы шрифтов (например, OpenType) могут содержать информацию
о правильном положении линейного украшения.
UA должен использовать такую информацию на основе шрифтов.
в выборе автоматического смещения
там, где это возможно,
и должен использовать такую информацию
когда from-font указан для text-underline-position.

Примечание. Обычно метрики шрифта OpenType указывают позицию
буквенного подчеркивания;
в некоторых случаях (особенно в шрифтах CJK),
он дает позицию нижнего подчеркивания слева.(В этом случае показатели подчеркивания шрифта обычно
коснитесь нижнего края поля EM).
UA может, но не обязан, исправлять неверные метрики шрифта.

2.9. Однородность линии оформления текста

Точное положение и толщина линий декора
зависит от значений text-underline-position, text-underline-offset и text-decoration-width, как определено выше,
и в остальном UA-определен.
Однако для подчеркивания и подчеркивания
UA должен использовать одну толщину и позицию на каждой линии
для украшений, происходящих из одной коробки для отделки .

vs.

Правильный и неправильный рендеринг A ^B C D

Обратите внимание, поскольку линейные украшения могут охватывать элементы с разными размерами шрифта и
вертикальные выравнивания, лучшая позиция для украшения линии — не
обязательно идеальное положение, продиктованное коробкой для украшения .
Например, надчеркнутый мелкий шрифт
фактически станет сквозной строкой, если элемент содержит текст со значительно большим размером шрифта.Даже для подчеркивания, если текст не выровнен по алфавитной базовой линии
(например, в стилях вертикального набора,
текст по умолчанию выравнивается по центральной базовой линии [CSS-WRITING-MODES-4])
подчеркивание прорежет текст-потомок большего размера шрифта.
Таким образом, учет дочернего контента UA приведет к лучшей типографике.

Из-за выравнивания вертикального текста по центру базовой линии,
левое подчеркивание небольшого вертикального текста прорезает текст
ребенка с большим размером шрифта.Подчеркивание не допускается,
но изменяя свое положение дальше влево
правильно вмещает весь подчеркнутый текст.

UAs должны отрегулировать положение линии
для соответствия смещенным метрикам украшающих коробок сдвинутым
со значениями вертикального выравнивания, отличными от baseline [CSS2], или с нижним / верхним индексом через font-variant-position [CSS-FONTS-3],
но не должен регулировать положение линии или толщину
в ответ на потомков , украшающих коробку , которые так стилизованы
(хотя это может отрегулировать положение
для размещения потомков, которые не имеют такого стиля,
например, те, которые просто набраны другим размером шрифта, как указано выше).Это позволяет правильно оформить надстрочные и подстрочные индексы.
(подчеркнуты, зачеркнуты и т. д.)
но не дает им исказить или нарушить расположение таких украшений на своих предках.

Пример подчеркивания, примененного к надстрочному тексту по сравнению с подчеркиванием, примененным к тексту, содержащему надстрочный индекс

2.10. Непрерывность линии оформления текста: сокращение text-decoration-skip и его вспомогательные свойства

CSSWG решила разделить функцию пропуска на отдельные свойства.
по линиям текст-украшение-скип-тушь,
для улучшения его каскадного поведения.См. Обсуждение и решение.
Этот раздел представляет собой черновой вариант и еще не прошел проверку Рабочей группой CSS

Свойство text-decoration-skip и его вложенные свойства
(текст-украшение-пропустить-сам, текст-украшение-пропустить-поле, текст-украшение-пропустить-вставку, текст-украшение-пропускать-пробелы, текст-украшение-пропустить-чернила)
контролировать прерывания в оформлении линии
для которого элемент или предок является украшающей коробкой.
Значение none
устанавливает для всех подсвойств значение none,
и значение auto
устанавливает для всех вложенных свойств их начальные значения.

Совместимо ли это определение с Интернетом?
Нужно ли нам также добавлять значение рукописного ввода для веб-совместимости?

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

В таблицу стилей UA по умолчанию для HTML по умолчанию добавлено:

  ins, del {text-decoration-skip: none;}

Когда значение свойства text-decoration-line равно орфографической или грамматической,
UA может игнорировать любое или все эти свойства.

2.10.1. Пропуск пробелов: свойство text-decoration-skip-self

CSSWG решила разделить текст-декорацию-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.

Это свойство указывает,
любые линии оформления текста, нарисованные его предками
распространяются на элемент или рисуются поперек него.
Значения имеют следующие значения:

нет: Ничего не пропускать: линейные украшения из предков, украшающих прямоугольник, переносятся на этот прямоугольник или рисуются поперек него, в зависимости от ситуации.
объектов: Пропустить этот элемент (весь его поле поля), если это атомарный встроенный
(например, изображение или встроенный блок).

2.10.2. Пропуск пробелов: свойство text-decoration-skip-box

CSSWG решила разделить текст-декорацию-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.

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

нет

Ничего не пропускать: линейные украшения из предшествующих рамок рисуются от края поля до края поля.

все

При рисовании линий оформления текста, применяемых к рамке-предку,
пропустить собственные поля, границу и отступы поля
и рисовать линии только внутри области содержимого.

Это значение влияет только на украшения, наложенные предком;
коробка для украшения никогда не перекрывает собственное украшение коробки.

2.10.3. Inset Edges: свойство text-decoration-skip-inset

CSSWG решила разделить текст-декорацию-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.

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

нет: Ничего не пропустить: оформление текста рисуется от края до края блока.
авто: UA должен слегка повернуть начало и конец линии внутрь.
от края содержимого коробки для украшения так, чтобы,
например два подчеркнутых элемента рядом друг с другом не имеют единого подчеркивания.Размер вставки зависит от User Agent.
(например, половина толщины линии)
но не должно быть равным нулю.
(Это важно для китайского языка, где подчеркивание является формой пунктуации.)

Это может быть отдельное свойство, а не часть набора text-decoration-skip.
Также Issue 4557,
о явном контроле длины строки.

2.10.4. Пропуск пробелов: свойство text-decoration-skip-space

Должно быть начальное значение none для Web-compat?
Если нет, то в таблице стилей UA по умолчанию как минимум не должно быть присвоено ни одного INS и DEL.См. Также ошибку 4653.

Это свойство указывает, пропускает ли текстовое оформление какие-либо пробелы.
Он контролирует все линии оформления текста, нарисованные элементом
а также любые линии оформления текста, нарисованные его предками.
Значения имеют следующие значения:

нет: Проставки не пропускаются.
Они декорированы так же, как и любой другой персонаж.
все: Пропустить все распорки,
плюс любой соседний межбуквенный или межсловный интервал.
начало: Пропустить все распорки,
плюс любой соседний межбуквенный или межсловный интервал,
когда находится в начале строки.
конец: Пропустить все распорки,
плюс любой соседний межбуквенный интервал или межсловный интервал,
когда находится в конце строки.

Для целей данной собственности:
проставка
любой типографский символьный блок со свойством Unicode White_Space [UAX44], кроме U + 202F NARROW NO-BREAK SPACE,
или любой разделитель слов.

2.10.5. Пропуск глифов: свойство text-decoration-skip-ink

Это свойство определяет способ рисования надстрочного и подчеркивания.
когда они пересекают глиф.

Когда этот параметр включен, декоративные линии пропускаются там, где нарисованы глифы:
прервать декоративную линию, чтобы видна форма текста
где текстовое оформление в противном случае пересекало бы глиф.
UA также должен пропустить небольшое расстояние по обе стороны от контура глифа.

Пропуск чернил символов

Идеографические скрипты не хотят пропускать при авто.Как мы можем определить это поведение?
Есть ли еще скрипты, которые хочется не пропускать?
Нужен нормативный текст, описывающий, как работает авто.
См. Протокол Telcon, alreq # 86, csswg # 1288

Это свойство применимо только к надстрочным и подчеркнутым чертам;
линейные проходы всегда непрерывны.

авто: UA может прерывать подчеркивание и наложение
где линия будет пересекать чернила глифа
и на некотором расстоянии по обе стороны от контура глифа.UA должен учитывать сценарий текста (см. Примечание ниже)
при определении, применять ли режим пропуска чернил к заданному
диапазон содержания.
все: UA должен прерывать подчеркивание и наложение
где линия будет пересекать чернила глифа
и на некотором расстоянии по обе стороны от контура глифа.
нет: UA должен рисовать непрерывные подчеркивания и надстрочные линии,
без перерывов, когда они пересекают глиф.

Примечание. Опыт реализации показывает, что пропуск чернил часто
приводит к нежелательным результатам, если подчеркнутый текст содержит идеографические символы,
в качестве позиции подчеркивания (в зависимости от используемого шрифта и пользовательского агента)
часто сталкивается почти со всеми символами,
таким образом, что остаются только отдельные фрагменты линии.

В принципе, авторы могут решить эту проблему, используя text-underline-position: under (или, возможно, text-underline-offset)
чтобы переместить подчеркивание в нижнее положение, которое не конфликтует с глифами,
но это не всегда возможно, даже если пользовательский агент поддерживает эти свойства.
и автор осознает их потенциал.В частности, когда страница содержит произвольный пользовательский контент,
автор, ответственный за дизайн, может не знать, будет ли присутствовать контент CJK.
И с содержанием смешанного сценария,
положение подчеркивания, предназначенное для работы с контентом CJK
может выглядеть плохо, если большая часть текста написана не на основе CJK.

Следовательно, когда действует авто,
UA, который реализует пропуска чернил, должен, , воздерживаться от этого в контекстах CJK.
(Авторы, которые с по хотят, чтобы к контенту CJK применялся пропуск рукописного ввода, могут использовать
значение always для явного запроса.)

В первую очередь, это означает , а не , применяя пропуск чернил для символов, чьи
Свойство скрипта Unicode — это любой из скриптов CJK Han, Hiragana, Katakana, Bopomofo или Hangul,
или для персонажей, свойство Script которых имеет значение Inherited или Common,
и чье свойство ScriptExtensions включает один или несколько сценариев CJK.

Кроме того, символы со свойством сценария Unicode Common и Inherited
(в первую очередь общие знаки препинания и символы) необходимо учитывать,
поскольку они могут использоваться как часть запуска содержимого CJK-скрипта,
и желательно обрабатывать весь текст в рамках данного запуска скрипта согласованным образом.Следовательно, UA должен преобразовать текст в запуски сценария.
как описано в «Примечаниях к реализации» [UAX24] «Свойство сценария Unicode», в частности в подразделах 5.1 и 5.2.
После применения описанной эвристики (или аналогичного анализа скриптов),
UA должен отключать пропуск рукописного ввода для всех диапазонов текста
которые определены как CJK-скрипт.

Есть ли другие (не CJK) скрипты, где было бы предпочтительнее?
для отключения пропуска чернил по умолчанию
(когда действует авто)?
Возможно Йи? Арабский?
(См. Также обсуждение в выпуске 1288.)

2.10.6. Прерывания при формировании

Когда UA прерывает подчеркивание или наложение на границах глифа,
форма линии на этой границе должна
следуйте форме глифа.

Обратите внимание, что эта спецификация намеренно не требует определенного метода.
для «следования за формой» глифа
чтобы UA могли принять соответствующие меры для обработки
эстетические и эксплуатационные соображения.
Например,
UA может предполагать, что окончания квадратных линий ниже определенного порога размера
по соображениям производительности;
или используйте трапециевидные окончания для аппроксимации кривых,
особенно на украшениях с более тонкими линиями.С точки зрения эстетики,
UA может также учитывать, что происходит, когда граница глифа
пересекает только часть толщины линии
или наклонен близко к горизонтали — точно следует по кривой
может привести к появлению типографически неудобных клочков подчеркивания.
Показывать ли линию внутри замкнутых областей глифа еще предстоит.
другое соображение.

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

3. Дополнительные элементы управления для выделения знаков

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

Акцентный акцент (показан синим для ясности), примененный к японскому тексту

Сокращение выделения текста и его длинные символы стиля выделения текста и цвета выделения текста,
можно использовать для нанесения таких пометок на текст.
Свойство text-focus-position, которое наследуется отдельно,
позволяет установить положение акцентов по отношению к тексту.

См. Также вопрос о преемственности в размере / положении.

3.1. Стиль акцента: свойство

стиля выделения текста

Это свойство применяет метки выделения к тексту элемента.
Значения имеют следующие значения:

нет: Без упора.
с заполнением: Форма залита сплошным цветом.
открыто: Форма полая.
точка: Отобразите маленькие кружки как отметки.
Закрашенная точка — это U + 2022 ‘•’, а открытая точка — это U + 25E6 ‘◦’.
круг: Отобразить большие круги как отметки.
Закрашенный кружок — это U + 25CF ‘●’, а белый кружок — U + 25CB ‘○’.
двойной круг: Отобразить двойные кружки как отметки.
Закрашенный двойной круг — это U + 25C9 », а открытый двойной круг — это U + 25CE ».
треугольник: Отобразить треугольники как метки.
Закрашенный треугольник — это U + 25B2 ‘▲’, а открытый треугольник — это U + 25B3 ‘△’.
кунжут: Кунжуты отображать в виде знаков.
Кунжут с начинкой — U + FE45 », а открытый кунжут — U + FE46 ».
<строка>: Вывести данную строку в виде меток.
Авторы не должны указывать более одного символа в .UA может обрезать или игнорировать строки, состоящие из более чем одного кластера графем.

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

Отметки должны быть нанесены с использованием настроек шрифта элемента.
с добавлением рубина
и размер уменьшился на 50%.Однако, поскольку не все шрифты имеют все эти глифы,
и некоторые шрифты используют неподходящие размеры для выделения знаков в этих кодовых точках,
UA может выбрать использование шрифта, который, как известно, подходит для выделения акцентов,
или вместо этого метки могут быть синтезированы UA.
Знаки должны оставаться вертикальными в вертикальных типографских режимах:
как и символы CJK, они не поворачиваются в соответствии с режимом письма.
Ориентация меток в горизонтальных типографских режимах и вертикальных режимах письма на этом уровне не определена.
(но может быть определено на будущем уровне, если возникнут определенные варианты использования).

Примечание. Одним из примеров хороших шрифтов для выделения акцентов является шрифт Adobe Kenten Generic OpenType с открытым исходным кодом,
который специально разработан для выделения знаков.

Знаки наносятся один раз для каждой единицы типографских знаков.
Тем не менее, выделены отметки , а не , нарисованные для:

Разделители слов или другие символы, которые
принадлежат к классам разделителей Unicode (Z *).
(Но обратите внимание, что акцентные знаки — это , нарисованные для пробела.
который сочетается с любыми комбинированными персонажами.)

Пунктуация — в частности,
любые персонажи, принадлежащие
Unicode P * общая категория и
не NFKD нормализовать [UAX15] в
любой из следующих символов:

#	U + 0023	НОМЕРНЫЙ ЗНАК
%	U + 0025	ЗНАК ПРОЦЕНТ
‰	U + 2030	ЗНАК НА МИЛЬ
‱	U + 2031	НА ДЕСЯТЬ ТЫСЯЧ ЗНАК
٪	U + 066A	АРАБСКИЙ ЗНАК ПРОЦЕНТА
؉	U + 0609	АРАБСКИЙ ИНДИКАТОР НА МИЛЛЬНЫЙ ЗНАК
؊	U + 060A	АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
и	U + 0026	АМПЕРСАНД
⁊	U + 204A	ТИРОНИАНСКИЙ ЗНАК ET
@	U + 0040	КОММЕРЧЕСКИЙ НАБОР
§	U + 00A7	РАЗДЕЛ ЗНАК
¶	U + 00B6	ЗНАК ПИЛКРОУ
⁋	U + 204B	ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
⁓	U + 2053	SWUNG DASH
〽	U + 303D	ДЕТАЛИ ЗАМЕТКА ЗАМЕНА

Символы, принадлежащие классам Unicode для управляющих кодов
и неназначенные символы (Cc, Cf, Cn).

Примечание. Контроль над помеченными символами будет добавлен на уровне 4.
(Список знаков препинания также может быть уточнен,
особенно для знаков препинания, отличных от CJK.)

3.2. Цвет акцента: свойство

цвета выделения текста

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

Примечание: ключевое слово currentcolor вычисляет само для себя
и преобразуется в значение цвета после выполнения наследования.
Это означает, что цвет текста по умолчанию соответствует цвету текста даже при изменении цвета элементов.

3.3. Сокращение выделенного текста: свойство выделения текста

Это свойство является сокращением для установки стиля выделения текста и цвета выделения текста в одном объявлении.
Пропущенные значения устанавливаются на свои начальные значения.

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

3.4. Позиция акцента: свойство

позиции выделения текста

Это свойство описывает, где ставятся метки выделения.
Если [право | left] опускается, по умолчанию используется right.
Значения имеют следующие значения:

более: Нарисуйте отметки над текстом в горизонтальных типографских режимах.
под: Нарисовать метки под текстом в горизонтальных типографских режимах.
правый: Нарисуйте метки справа от текста в вертикальных типографских режимах.
левый: Нарисуйте метки слева от текста в вертикальных типографских режимах.

Знаки акцента рисуются точно так же, как если бы каждый символ был
назначил метку в качестве текста аннотации рубина с положением рубина
задано положением-акцентом текста и выравниванием рубина по центру.
Обратите внимание, что это положение может быть изменено, если оно противоречит
с подчеркиванием или надводным орнаментом.

Эффект акцента на высоте строки такой же, как и для
рубиновый текст.

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

Предпочтительный акцент и положение рубина
Язык	Лучшая позиция		Иллюстрация
Язык	По горизонтали	Вертикальный	Иллюстрация
японский	более	правый
корейский
монгольский
китайский	под	правый

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

Курсивные знаки, нанесенные на 4 символа, с рубином также на 2 из них

Некоторые редакторы предпочитают скрывать метки выделения, когда они конфликтуют с рубином.
В HTML это можно сделать с помощью следующего правила стиля:

 рубин {выделение текста: нет; }

Некоторые другие редакторы предпочитают скрывать рубин, когда они конфликтуют с отметками выделения.
В HTML это можно сделать с помощью следующего шаблона:

 em {выделение текста: точка; } / * Устанавливаем выделение текста для элементов  * /
em rt {дисплей: нет; } / * Скрываем рубин внутри элементов  * /

3.5. Выделение Mark Skip: свойство

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

Этот раздел находится в стадии мозгового штурма.
Также еще не ясно, нужно ли это свойство, несмотря на различия в желаемом поведении среди публикаций.

Это свойство описывает, для каких знаков рисуются метки.
Значения имеют следующие значения:

места

Пропускать разделители слов или другие символы, относящиеся к категории разделителей Unicode (Z *).(Но обратите внимание, что акцентные знаки — это , нарисованные для пробела.
который сочетается с любыми комбинированными символами.)

знаки препинания

Пропустить знаки препинания.
Пунктуация в этом определении включает символы, принадлежащие
категория Unicode P *
которые не определены как символы (см. ниже).

символа

Пропустить символы.
Символы в этом определении включают
все типографские символы, принадлежащие
общая категория Unicode S *, а также любые символы, эквивалентные NFKD [UAX15] следующим символам из категории Unicode Po:
# U + 0023 НОМЕРНЫЙ ЗНАК
% U + 0025 ЗНАК ПРОЦЕНТ
‰ U + 2030 ЗНАК НА МИЛЬ
‱ U + 2031 НА ДЕСЯТЬ ТЫСЯЧ ЗНАК
٪ U + 066A АРАБСКИЙ ЗНАК ПРОЦЕНТА
؉ U + 0609 АРАБСКИЙ ИНДИКАТОР НА МИЛЛЬНЫЙ ЗНАК
؊ U + 060A АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
и U + 0026 АМПЕРСАНД
⁊ U + 204A ТИРОНИАНСКИЙ ЗНАК E [[
@ U + 0040 КОММЕРЧЕСКИЙ НАБОР
§ U + 00A7 РАЗДЕЛ ЗНАК
¶ U + 00B6 ЗНАК ПИЛКРОУ
⁋ U + 204B ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
⁓ U + 2053 SWUNG DASH
〽️ U + 303D ДЕТАЛИ ЗАМЕТКА ЗАМЕНА

узкий

Пропускайте символы, если свойство East_Asian_Width [UAX11] базы данных Unicode [UAX44] не равно F (полная ширина) или W (широкая).

Символы, принадлежащие классам Unicode для управляющих кодов
и неназначенные символы (Cc, Cf, Cn) пропускаются
независимо от стоимости этого свойства.

Этот синтаксис требует, чтобы UA реализовал метки рисования для пробелов.
Есть ли для этого какой-нибудь вариант использования?
Если нет, должны ли мы изменить синтаксис, чтобы не позволять рисовать метки для пробелов?

См. Также обсуждение начального значения.

4. Text Shadows: свойство text-shadow

Это свойство принимает список эффектов тени, разделенных запятыми.
для применения к тексту элемента.Значения интерпретируются как тень блока [CSS-BACKGROUNDS-3].
(Но обратите внимание, что ключевое слово inset недопустимо.)
Каждый слой затеняет текст элемента и все его текстовые украшения.
(собраны вместе).
Если цвет тени не указан,
по умолчанию это currentColor,
т.е. цвет тени берется из свойства color элемента.

Эффекты тени применяются спереди назад:
первая тень сверху.
Таким образом, тени могут накладываться друг на друга,
но они никогда не перекрывают сам текст.Тень должна быть нарисована на уровне стека.
между границей элемента и / или фоном (если есть)
а также элементы текста и оформления текста.
UA следует избегать рисования теней текста поверх текста
в смежных элементах, принадлежащих к одному уровню стека и контексту стекирования.
(Это может означать, что точный уровень стека теней зависит от
от того, есть ли у элемента граница или фон:
Таким образом, точное поведение текстовых теней при наложении определяется UA.)
Не определено, затеняет ли данный теневой слой
каждый глиф или украшение независимо
или если текст и / или украшения сглаживаются, а затем затемняются.

В отличие от box-shadow, текстовые тени не обрезаются по затененной форме.
и может просвечивать, если текст частично прозрачен.
Как и box-shadow, текстовые тени не влияют на макет,
и не запускать прокрутку
или увеличьте размер прокручиваемой области переполнения.

Также в отличие от box-shadow,
расстояние распространения строго интерпретируется как исходное расстояние
из любой точки контура глифа,
и, следовательно, аналогично радиусу размытия,
создает закругленные, а не острые углы.

Примечание. Определенный здесь порядок рисования теней противоположный.
того, что определено в Рекомендации CSS2 1998 г.

Свойство text-shadow применяется как к псевдоэлементам :: first-line , так и к :: first-letter .

Уровень 4 добавляет аргумент радиуса распространения к текстовой тени,
используя тот же синтаксис и интерпретацию, что и для box-shadow,
за исключением того, что углы всегда закруглены
(поскольку геометрия глифа не так проста, как прямоугольник).

5. Окрашивание текста

5.1. Порядок написания текстовых украшений

Как и в [CSS2], текстовые украшения рисуются непосредственно над / под текстом, который они украшают,
в следующем порядке (сначала нижний):

Если линейные украшения нарисованы поперек декораций коробки или атомарных инлайнов,
они нарисованы поверх непозиционированного контента и чуть ниже любых позиционированных потомков
(непосредственно под слоем № 8 в CSS2.1 Приложение E).

5.2. Переполнение текстовых украшений

Текстовые украшения, выходящие за пределы коробки, считаются переполнением чернил:
они не расширяют прокручиваемую область переполнения. [css-overflow-3]

Приложение A: Благодарности

Эта спецификация была бы невозможна без помощи:
Айман Альдалех, Берт Бос, Тантек Челик, Стивен Дич, Джон Даггетт,
Мартин Дюрст,
Лори Анна Эдлунд, Бен Эррез, Янив Файнберг, Арье Гиттельман, Ян
Хиксон, Мартин Хейдра, Ричард Исида, Масаясу Исикава,
Майкл Йочимсен, Эрик Левин, Амброуз Ли, Хокон Виум Ли, Крис Лилли,
Кен Лунде, Нат Маккалли, Шинью Мураками, Пол Нельсон, Крис Пратли, Марчин Савицкий,
Арнольд Шрайвер, Рахул Соннад, Мишель Суиньяр, Такао Сузуки,
Фрэнк Танг, Крис Трэшер, Этан Векслер, Крис Уилсон, Масафуми Ябе
и Стив Зиллес.

Приложение B: Таблица стилей UA по умолчанию

Это приложение является информативным,
и призван помочь разработчикам UA реализовать таблицу стилей по умолчанию,
но разработчики UA могут игнорировать или изменять.

  / * типичный стиль HTML * /
blink {
  текст-украшение-строка: мигать;
}
s, strike, del {
  текстовое оформление: сквозное;
}
u, ins,: link,: посещено {
  текст-оформление: подчеркивание;
}
abbr [название], аббревиатура [название] {
  оформление текста: пунктирное подчеркивание;
}

/ * отключаем наследование меток выделения текста рубиновому тексту:
  Знаки выделения должны применяться только к основному тексту * /
rt {выделение текста: нет; }

/ * установка позиции акцента по умолчанию для соответствующего языка * /
: root: lang (zh), [lang | = zh] {положение выделения текста: внизу справа; }
[lang | = ja], [lang | = ko] {положение выделения текста: справа; }

/ * установить соответствующую языку позицию подчеркивания по умолчанию * /
: root: lang (ja), [lang | = ja],
: root: lang (mn), [lang | = mn],
: корень: язык (ko), [lang | = ko] {положение подчеркивания текста: справа; }
: корень: язык (zh), [язык | = zh] {положение подчеркивания текста: слева; }
/ * auto выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента * /

Если вы обнаружите какие-либо проблемы, рекомендации для добавления или исправления,
пожалуйста, отправьте информацию на www-style @ w3.org с [css-text-decor] в строке темы.

Хотя text-decoration-line: blink нельзя полностью воспроизвести с другими существующими свойствами,
авторы могут добиться очень похожего эффекта с помощью следующего CSS:

 @keyframes blink {
  0% {
    видимость: скрыта;
    функция-время-анимация: конец шага;
  }
  25%, 100% {
    видимость: видимая;
  }
}
blink {
  анимация: мигание 1с бесконечно;
}

Приложение C:
Изменения

Изменения по сравнению с рабочим проектом от 13 марта 2018 г.

Дополнения с уровня 3

Следующие функции были добавлены с уровня 3:

6.Вопросы конфиденциальности и безопасности

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

Требования к соответствию выражаются комбинацией
описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ»,
«НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,
«РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего
документ следует интерпретировать, как описано в RFC 2119.
Однако для удобства чтения эти слова не отображаются в верхнем регистре.
буквы в этой спецификации.

Весь текст данной спецификации является нормативным, кроме разделов
явно помечены как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации представлены словами «например»
или выделяются отдельно от нормативного текста с помощью class = "example" ,
примерно так:

Информационные заметки начинаются со слова «Примечание» и выделяются
нормативный текст с class = "note" , например:

Примечание, это информационное примечание.

Рекомендации — это нормативные разделы, призванные привлечь особое внимание.
отделяется от другого нормативного текста с помощью , например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.

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

Средство визуализации соответствует этой спецификации
если в дополнение к интерпретации таблицы стилей, как определено
соответствующие спецификации, он поддерживает все определенные функции
по этой спецификации, правильно проанализировав их
и соответствующим образом отрисовываем документ.Однако неспособность
UA для корректной визуализации документа из-за ограничений устройства
не делает UA несоответствующим. (Например, UA не
требуется для воспроизведения цвета на монохромном мониторе.)

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

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

Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для назначения резервных значений, обработчики CSS должны обрабатывать как недопустимые
(и игнорировать при необходимости)
любые at-правила, свойства, значения свойств, ключевые слова и другие синтаксические конструкции
для которых у них нет полезного уровня поддержки .В частности, пользовательские агенты не должны выборочно игнорировать
неподдерживаемые значения свойств и соблюдают поддерживаемые значения в одном объявлении многозначного свойства:
если какое-либо значение считается недопустимым (как и неподдерживаемые значения),
CSS требует, чтобы все объявление игнорировалось.

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

Для установления и поддержания взаимодействия CSS через
реализациях, рабочая группа CSS просит, чтобы неэкспериментальные
Средства визуализации CSS отправляют отчет о реализации (и, при необходимости,
тестовые примеры, использованные для этого отчета о реализации) в W3C перед
выпуск реализации каких-либо функций CSS без префикса. Тестовые наборы
отправленные в W3C могут быть проверены и исправлены CSS.
Рабочая группа.

Настроить подчеркивание с помощью оформления текста в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или
отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем!
Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.

Говорят, хороших вещей приходят к тем, кто ждет , и это оказывается правдой, когда дело доходит до оформления текста в сети. Модуль оформления текста CSS уровня 3 определяет несколько отличных новых способов украшения текста в Интернете, и браузеры, наконец, начинают их хорошо поддерживать. Времена использования border-bottom вместо правильного подчеркивания текста, чтобы получить другой цвет подчеркивания, наконец, могут прийти в норму.

Результаты могут отличаться: поддержка все еще ограничена, поэтому примеры в этом сообщении могут отображаться некорректно в зависимости от используемого вами браузера.

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

Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и text-decoration-line свойства. Например, вот цветное двойное подчеркивание:

 .изысканный {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}

Необычный подчерк

текст-украшение-цвет

Работает так, как вы можете себе представить. Наконец-то появился способ изменить цвет оформления текста!

текст-украшение-стиль

text-decoration-style используется для определения типа оформления текста, а новая рекомендация содержит два новых значения: double и wavy:

  .wavy {
  текст-оформление: подчеркивание;
  -webkit-text-decoration-color: лосось;
  текст-украшение-цвет: лосось;
  -webkit-text-decoration-style: волнистый;
  стиль оформления текста: волнистый;
}

Волнистое украшение

текст-украшение-строка

text-decoration-line принимает значения подчеркивания, overline, line-through и blink (однако мигание устарело):

 .забастовка {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная строка;
}

Ударьте

текст-украшение-пропустить

С помощью text-decoration-skip мы можем избежать того, чтобы украшение перешагнуло через части элемента, к которому оно применяется. Возможные значения: объекты, пробелы, чернила, края и украшение коробки.

ink: И, наконец, способ предотвратить наложение элементов нисходящих элементов глифов при оформлении текста:

 .чернила {
  -webkit-text-decoration: темно-бирюзовое сплошное подчеркивание;
  оформление текста: темно-бирюзовое однотонное подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропуск: чернила;
}

Бегемот

объекты: текстовое оформление пропускает элементы, отображаемые в виде встроенного блока. Это также начальное значение:

  
  Становится  очень  модным

  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  текст-оформление: перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}

Очень необычное

Остальные значения еще не поддерживаются браузерами:

пробел: в оформлении пропущены пробелы и знаки препинания.
кромок: создает зазор, когда два элемента с текстовым оформлением находятся рядом друг с другом.
box-decoration: украшение пропускает любые унаследованные поля, отступы или границы.

текст-подчеркивание-позиция

С помощью text-underline-position у нас есть еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

С авто, начальное значение , браузеры обычно размещают оформление рядом с базовой линией текста:

 .auto {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}

Бегемот

… а теперь обратите внимание, как нижняя граница размещается после нижних элементов текста:

  .under {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}

Бегемот

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

А теперь удивите нас красивым оформлением текста!

Поддержка браузера: Могу ли я использовать текстовое оформление с 2020 года? показывает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

оформление текста · Документы WebPlatform

Сводка

Свойство CSS text-decoration используется для установки форматирования текста на подчеркивание, надчеркнутый, сквозной или мигающий. Подчеркивание и надстрочное оформление располагаются под текстом, над ним — через линию.

Обзорная таблица

Начальное значение: нет
Относится к: Все элементы
Унаследовано: Нет
Медиа: визуальный
Расчетное значение: Как указано
Анимационный: Нет
Свойство объектной модели CSS: текст Украшение
В процентах: ???

Синтаксис

текст-украшение: мигание
оформление текста: сквозное
текст-украшение: нет
текст-украшение: надстрочный
текст-оформление: подчеркивание

Значения

нет: Без оформления текста.
подчеркивание: Каждая строка текста подчеркнута.
стр.: Каждая строка текста имеет строку над ней.
сквозной: Каждая строка текста проходит через линию посередине.
мигает: Текст мигает.

Примеры

 
 Подчеркнутый текст 
 Подчеркнутый текст 
 Строка через текст 
 Мигающий текст 
 Смешанный декоративный текст

[Посмотреть живой пример] (http: // code.webplatform.org/gist/7283381)

 . Под {текст-украшение: подчеркивание; }
.over {украшение текста: над чертой; }
.through {украшение текста: сквозное; }
.blink {украшение текста: мигать; }
.mixed {украшение текста: подчеркивание поверх строки; }

Использование

  CSS Text Decoration Level 3 преобразовал это свойство как сокращение для трех новых свойств CSS text-decoration-color, text-decoration-line и text-decoration-style. Как и любое другое сокращенное свойство, это означает, что оно сбрасывает их значение по умолчанию, если явно не установлено в сокращении.

Браузеры могут игнорировать значение blink (не делая объявление недействительным), как это делают Internet Explorer и Safari. Поддерживается Firefox (Gecko) и Opera. Обратите внимание, что отсутствие мигания текста — это один из способов удовлетворения контрольной точки 3.3 WAI-UAAG.

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

Например, в разметке:

   В этом тексте  несколько выделенных слов .

правило стиля:

  p {text-decoration: underline}

приведет к подчеркиванию всего абзаца. Однако правило стиля:

  em {text-decoration: none}

не вызовет никаких изменений; весь абзац все равно будет подчеркнут. (Однако правило em {text-decoration: overline} приведет к появлению второго украшения на «некоторых подчеркнутых словах».)

Значение по умолчанию для следующих тегов другое.

Значение по умолчанию подчеркнуто для a при использовании с href , u и ins .
Значение по умолчанию — сквозное для strike , s и del .

Если значение none помещается в конец значений, все значения очищаются. Например, установка {text-decoration: underline overline blink none} не приводит к визуализации декораций. Если объект не имеет текста (например, объект img в HTML) или является пустым объектом (например, ), это свойство не действует.Если вы установите для атрибута text-decoration значение none для объекта body , объекты все равно будут подчеркнуты. Чтобы удалить подчеркивание с объектов a, либо установите встроенный стиль, либо используйте a в качестве селектора в глобальной таблице стилей. Указание свойства text-decoration для блочных элементов влияет на всех встроенных дочерних элементов. Если он указан для встроенного элемента или влияет на него, он влияет на все блоки, генерируемые этим элементом.

Связанные спецификации

Модуль шрифтов CSS, уровень 3: Осадка рабочий
CSS, уровень 2 (редакция 1): Рекомендация
Уровень CSS 1: Рекомендация

См. Также

Внешние ресурсы

Атрибуции

Оформление текста — Попутный ветер CSS

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

Используйте утилиту underline для подчеркивания текста.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

   Быстрая коричневая лиса ...

Сквозная линия

Используйте утилиту сквозную , чтобы зачеркнуть текст.

Быстрая коричневая лисица перепрыгнула через ленивую собаку.

   Быстрая коричневая лиса ...

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

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

   Ссылка без подчеркивания

Адаптивный

Чтобы управлять оформлением текста элемента в определенной точке останова, добавьте префикс {screen}: к любому существующему утилита для оформления текста.Например, используйте md: underline , чтобы применить утилиту underline только для средних размеров экрана и выше.

  
  Быстрая, коричневая лиса, перепрыгнула через ленивого пса.

Дополнительную информацию о функциях адаптивного дизайна Tailwind можно найти в документации по адаптивному дизайну.

Hover

Чтобы управлять оформлением текста элемента при наведении курсора, добавьте префикс hover: к любой существующей утилите оформления текста.Например, используйте hover: underline , чтобы применить утилиту underline при наведении курсора.

   Ссылка

Утилиты Hover также можно комбинировать с адаптивными утилитами, добавив префикс {screen}: префикса перед префиксом hover: .

   Ссылка

Focus

Чтобы управлять оформлением текста элемента в фокусе, добавьте префикс focus: к любой существующей утилите оформления текста.Например, используйте focus: underline , чтобы применить утилиту underline к фокусу.

Утилиты Focus также можно комбинировать с адаптивными утилитами, добавив префикс {screen}: префикса перед префиксом focus: .

Настройка

Варианты

По умолчанию для утилит декорирования текста создаются только адаптивные варианты, варианты с групповым наведением, фокусом внутри, наведением и фокусом.

Вы можете контролировать, какие варианты генерируются для утилит оформления текста, изменив свойство textDecoration в разделе вариантов файла tailwind.config.js .

Например, этот конфиг также будет генерировать активные варианты:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ textDecoration: ['активный'],
      }
    }
  }

Если вы не планируете использовать утилиты оформления текста в своем проекте, вы можете полностью отключить их, установив для свойства textDecoration значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ textDecoration: false,
    }
  }

CSS-оформление текста — javatpoint

Это свойство CSS, которое украшает содержимое текста. Он добавляет строки под, сверху и сквозь текст. Устанавливает внешний вид декоративных линий на тексте. Это свойство CSS украшает текст несколькими видами строк. Это сокращение для text-decoration-line, text-decoration-color, и text-decoration-style.

Синтаксис этого свойства CSS имеет следующий вид:

Синтаксис

текст-украшение: текст-украшение-строка цвет-текст-украшение-стиль текста | начальный | наследование;

Давайте обсудим значения его свойств на примере.

текст-украшение-строка

Устанавливает тип оформления текста, например, над чертой, подчеркивание, или через строку. Может использоваться для добавления комбинации строк к выделенному тексту.

Пример

В этом примере мы собираемся использовать значения подчеркивания, надчеркивания и сквозной линии. Мы также увидим, как использовать эти значения одновременно.

оформление текста
<стиль>
h2 {
красный цвет;
}
h3 {
цвет синий;
}
тело {
выравнивание текста: центр;
}
п{
размер шрифта: 30 пикселей;
}
# p1 {
текст-оформление: подчеркивание;
}
# p2 {
текстовое оформление: сквозное;
}
# p3 {
текст-оформление: надстрочный;
}
# p4 {
текст-украшение: подчеркивание подчеркивание через строку;
}

Добро пожаловать в javaTpoint.com

украшение текста: строка украшения текста;

Это подчеркивание

Это сквозной

Это наверху

Это комбинация строк

Проверить это сейчас

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

Это свойство используется для установки стиля линии.Его значения: сплошной, пунктирной, волнистой, двойной, и штриховой.

В следующем примере это свойство объясняется более четко.

Пример

оформление текста
<стиль>
h2 {
красный цвет;
}
h3 {
цвет синий;
}
тело {
выравнивание текста: центр;
}
п{
размер шрифта: 30 пикселей;
}
# p1 {
оформление текста: двойное подчеркивание;
}
# p2 {
оформление текста: штриховой пунктир;
}
# p3 {
оформление текста: пунктирная линия поверх;
}
# p4 {
оформление текста: голубая волнистая линия подчеркивания сквозная линия;
красный цвет;
}

Добро пожаловать в javaTpoint.com

text-decoration: текст-украшение-строка текст-украшение-стиль;

Это двойное подчеркивание

Это сквозная пунктирная линия

Это пунктирная линия наверху

Это волнистое сочетание линий

Проверить это сейчас

текст-украшение-цвет

Это свойство используется для придания цвета декору.Его значение — любой цвет в допустимом формате.

Пример

оформление текста
<стиль>
h2 {
красный цвет;
}
h3 {
цвет синий;
}
тело {
выравнивание текста: центр;
}
п{
размер шрифта: 30 пикселей;
}
# p1 {
оформление текста: подчеркивание двойным голубым;
}
# p2 {
оформление текста: штриховой зеленый;
}
# p3 {
оформление текста: пунктирная линия поверх синего цвета;
}
# p4 {
оформление текста: голубая волнистая линия подчеркивания сквозная линия;
красный цвет;
}

Добро пожаловать в javaTpoint.com

text-decoration: текст-украшение-строка текст-украшение-стиль;

Это двойное подчеркивание

Это сквозная пунктирная линия

Это пунктирная линия наверху

Это волнистое сочетание линий

Проверить это сейчас

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

Свойство text-decoration-line используется для установки различных типов текстового оформления.Текстовое оформление может включать в себя множество значений, таких как подчеркивание, наложение, сквозная линия и т. Д. Можно комбинировать более одного свойства текстового оформления. Например, значения подчеркивания и надчеркивания для отображения строк как под текстом, так и над ним.

Синтаксис:

 text-decoration-line: none | underline | overline | line-through | initial | начало |
наследовать;

Значение по умолчанию:

Значения свойств:

нет: Это значение по умолчанию, используемое для указания отсутствия строки для текста для украшения текста.

Синтаксис:

 текст-украшение-строка: нет;

Пример:

html

< html > 000

000 < title > свойство text-decoration-line title >

< 000 0009 h2 {

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

текст-украшение-строка: нет;

}

.gfg {

текст-украшение-строка: нет;

font-weight: жирный;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 style = "text-align: center" >

< h2 > GeeksforGeeks

< h3 > текст-украшение-строка: нет; h3 >

< p класс " >

GeeksforGeeks: вычисление научный портал

p >

корпус >

0004

0005

000

0009

Вывод:

подчеркивание: Используется для отображения строки под или под текстом.

Синтаксис:

 текст-украшение-строка: подчеркивание;

Пример:

html

< html >

000 < титул >

текст, оформление, линия

заголовок >

000 000 000

000 000 стиль >

h2 {

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

текст-украшение-строка: подчеркивание;

}

.gfg {

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

font-weight: жирный;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 style = "text-align: center" >

< h2 > GeeksforGeeks

< h3 > текст-украшение-строка: подчеркивание; h3 >

< p класс = класс = " >

GeeksforGeeks: компьютер портал ter science

p >

body >

0004 000

0009

Вывод:

overline: Используется для отображения строки поверх текста.

Синтаксис:

 text-decoration-line: overline;

Пример:

html

< html >

000 < титул >

текст, оформление, линия

заголовок >

000 000 000

000 000 стиль >

h2 {

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

текст-украшение-строка: надстрочный;

}

.gfg {

text-decoration-line: overline;

font-weight: жирный;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 style = "text-align: center" >

< h2 > GeeksforGeeks

< h3 > text-decoration-line: overline; h3 >

< p class = класс = " >

GeeksforGeeks: вычисление научный портал

p >

корпус >

000

0004

000

0005

0004

Вывод:

сквозной Используется для отображения строки в тексте.

Синтаксис:

 текст-украшение-строка: сквозная строка;

Пример:

html

< html >

000 < титул >

текст, оформление, линия

заголовок >

000 000 000

000 000 стиль >

h2 {

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

text-decoration-line: сквозная строка;

}

.gfg {

текст-украшение-строка: сквозная строка;

font-weight: жирный;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 style = "text-align: center" >

< h2 > GeeksforGeeks

< h3 > текст-украшение-строка: сквозное; h3 >

< p класс = "gfg" >

GeeksforGeeks: A co портал о компьютерных науках

p >

корпус >

000

Вывод:

начальный: Используется для установки свойства по умолчанию.Это то же самое, что и none property.

Синтаксис:

 text-decoration-line: initial;

Пример:

html

< html >

000 < титул >

текст, оформление, линия

заголовок >

000 000 000

000 000 стиль >

h2 {

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

текст-украшение-строка: начальная;

}

.gfg {

text-decoration-line: initial;

font-weight: жирный;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 style = "text-align: center" >

< h2 > GeeksforGeeks

< h3 > текст-украшение-строка: начальная; h3 >

< p класс " >

GeeksforGeeks: вычисление научный портал

p >

корпус >

0004 0005

000

0009

Вывод:

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

Google Chrome 57.