Text decoration style css: text-decoration-style

Содержание

CSS text decoration style

Пример

Задайте различные типы стилей оформления текста:

div.a {
text-decoration-line: underline;
text-decoration-style: solid;
}

div.b {
text-decoration-line: underline;
text-decoration-style: wavy;
}

div.c {
text-decoration-line: underline;
text-decoration-style: double;
}

div.d {
text-decoration-line: overline underline;
text-decoration-style: wavy;
}

Определение и использование

Свойство text-decoration-style задает стиль оформления текста (например, сплошная, волнистая, пунктирная, пунктирная, двойная).

Совет: Кроме того, посмотрите на свойство Text-decoration ие, которое представляет собой свойство с короткими руками для текста, декорирования строк, текста и декора, а также текст-украшение-цвет.

Значение по умолчанию:	solid
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.textDecorationStyle=»wavy»

Поддержка браузера

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

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Свойство
text-decoration-style	57.0	Не поддерживается	36.0 6.0 -moz-	Не поддерживается	44.0

Синтаксис CSS

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

Значение	Описание
solid	Значение по умолчанию. Линия будет отображаться в виде одной строки
double	Линия будет отображаться как двойная линия
dotted	Линия будет отображаться как пунктирная линия
dashed	Линия будет отображаться как пунктирная линия
wavy	Линия будет отображаться как волнистая линия
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Свойство text-decoration-style | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-decoration-style устанавливает стиль декоративной линии, которая добавляется через свойство text-decoration.

Поддержка браузерами

CSS синтаксис:

text-decoration-style:"solid | double | dotted | dashed | wavy | initial | inherit";

JavaScript синтаксис:

object.style.textDecorationStyle = "double"

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

Значение	Описание
solid	Сплошная декоративная линия. Это значение по умолчанию.
double	Двойная декоративная линия.
dotted	Точечная декоративная линия.
dashed	Пунктирная декоративная линия.
wavy	Волнистая декоративная линия.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

Обращаю Ваше внимание, что свойство имеет ограниченную поддержку браузерами.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration-style</title>
<style> 
p {
text-decoration : underline; /* добавляем декорирование текста для абзацев (линия снизу) */
font-size : 24px; /* устанавливаем размер шрифта для абзацев */
}
.test {
-webkit-text-decoration-style : solid; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : solid; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : solid; /* добавляем стиль декоративной линии - сплошная */
}
.test2 {
-webkit-text-decoration-style : double; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : double; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : double; /* добавляем стиль декоративной линии - двойная */
}
 .test3 {
-webkit-text-decoration-style : dotted; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : dotted; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : dotted; /* добавляем стиль декоративной линии - точечная */
}
.test4 {
-webkit-text-decoration-style : dashed; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : dashed; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : dashed; /* добавляем стиль декоративной линии - пунктирная */
}
.test5 {
-webkit-text-decoration-style : wavy; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : wavy; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : wavy; /* добавляем стиль декоративной линии - волнистая */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration-style: solid ;</p>
		<p class = "test2">text-decoration-style: double ;</p>
		<p class = "test3">text-decoration-style: dotted ;</p>
		<p class = "test4">text-decoration-style: dashed ;</p>
		<p class = "test5">text-decoration-style: wavy ;</p>
	</body>
</html>

Результат нашего примера:

Пример использования свойства text-decoration-style(устанавливает стиль декоративной линии).CSS свойства

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

Свойство text-decoration устанавливает оформление текста.

В CSS3 оно является сокращенной формой записи для следующих свойств:

text-decoration-line
text-decoration-color
text-decoration-style

Если значение одного из них не указано, будет автоматически установлено значение по умолчанию. Text-decoration-line является обязательным.

В спецификации CSS1 text-decoration не считалось сокращенным свойством и имело следующие значения :

none
underline
overline
line-through
blink

Значение по умолчанию	none currentColor solid
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1, CSS3
DOM синтаксис	object.style.textDecoration = «dashed»;

Синтаксис¶

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .a {
      text-decoration: overline;
      }
      .b {
      text-decoration: line-through;
      }
      .c {
      text-decoration: underline;
      }
      .d {
      text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

Пример, где указан цвет текста:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

В данном примере использовано расширение -webkit- для Safari.

Пример, где указан стиль текста:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: underline;
      }
      div.t1 {
      text-decoration-style: dotted;
      }
      div.t2 {
      text-decoration-style: wavy;
      }
      div.t3 {
      text-decoration-style: solid;
      }
      div.t4 {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>

Попробуйте сами!

Значения¶

Значение	Описание
text-decoration-line	Указывает вид оформления текста.
text-decoration-color	Указывает цвет оформления текста.
text-decoration-style	Указывает стиль оформления текста.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

Свойство text-decoration-style — тип линии у текста

Свойство text-decoration-style меняет тип линии над текстом: одиночная линия, двойная, в виде точек, в виде тире, волнистая линия.

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

Синтаксис

селектор { text-decoration-line: solid | double | dotted | dashed | wavy; }

Значения

Значение	Описание
solid	Сплошная линия.
double	Двойная линия.
dotted	Линия в виде точек.
dashed	Линия в виде тире.
wavy	Волнистая линия.

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

Пример . Значение wavy

Сейчас текст станет подчеркнутым красной волнистой линией:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: wavy; text-decoration-color: red; text-decoration-line: underline; }

Пример . Значение dotted

Сейчас текст станет подчеркнутым красной линией в виде точек:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: dotted; text-decoration-color: red; text-decoration-line: underline; }

Пример . Значение double

Сейчас текст станет перечеркнутым красной двойной линией:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: double; text-decoration-color: red; text-decoration-line: line-through; }

Использование «text-decoration-color» не работает — CodeRoad

Я хочу раскрасить текстовое оформление. Я получил учебник от w3schools

И попробовал это сделать

text-decoration: underline;
text-decoration-color: #dddddd;

Но это не работает. Разве это не справедливо? Есть ли другой способ раскрасить подчеркивание?

css
Поделиться Источник Ranjit 31 августа 2017 в 08:05
4 ответа
” text-decoration “и”: after » псевдо-элемент, revisited
Я переспрашиваю этот вопрос , потому что его ответы не сработали в моем случае. В моей таблице стилей для printed media я хочу добавить url после каждой ссылки, используя псевдокласс :after . a:after { content: < attr(href) >; text-decoration: none; color: #000000; } В Firefox (и, вероятно,…
jquery. css(‘text-decoration’) не работает от родителей
Я должен получить необходимое свойство css элемента (свойства могут быть унаследованы от его родителя) Стандарт jquery. css() может это сделать. Так что у меня есть такой HTML: <div id=container> some text<br> <span id=some>Our element</span> <br> some text…

12

text-decoration-color имеет минимальную поддержку браузера
Вместо этого вы можете использовать что-то вроде промежутка, чтобы перекрасить текст:
p { color: red; /* colour of underline */ text-decoration: underline; } span { color: black; /* original colour of p */ }
<p><span>underline is red, text is black</span></p>
Поделиться Pete 31 августа 2017 в 08:09

2

Ваш код, скорее всего, повлияет на другой класс
p { text-decoration: underline; text-decoration-color: red!important; }
<p>test</p>
Поделиться Farhad Bagherlo 31 августа 2017 в 08:08

1

Обновление: он работает на Safari & Safari iOS с префиксом -webkit- !
p { text-decoration: underline; text-decoration-color: red; -webkit-text-decoration-color: red; }
<p>test</p>
Поделиться Ossip 22 марта 2019 в 18:09
Удаление подчеркивания в URL [text-decoration: none; не работает]
Я хочу удалить подчеркивание. Я уже поставил text-decoration: none; . Однако это не работает. Вот DEMO . HTML <a href=./index.php?sign_in=1> <div id=signup_button> Sign up </div> </a> CSS #signup_button { position: relative; max-width: 206px; min-height: 20px; max-height:…
css «text-decoration: none» не работает
Я не понимаю, почему text-decoration: none не работает в следующем коде. Он не может удалить подчеркивание слова yes . .button { color: black; text-decoration: none; } body { font-family: ‘Roboto’, ‘Microsoft JhengHei’, sans-serif; font-size: 24px; } <a href=www.example.com> <div…

0

Следующий метод для добавления под строкой в вашей строке.
1) Вы можете использовать текстовое оформление, чтобы добавить подчеркивание в нижней части строки, как показано ниже. Пожалуйста, добавьте свой CSS try в этот путь.
Следующие демо-версии хороши для работы со мной.
<style type="text/css"> .underline { text-decoration: underline; text-decoration-color: red; /*color: blue; border-bottom: 1px solid red;*/ } </style> <span>hello world</span>
2) Если попытаться подать файл на первом шаге таким образом, вы можете попробовать второй способ установить границу в нижней части строки
<style type="text/css"> .underline { /*text-decoration: underline; text-decoration-color: red;*/ color: blue; border-bottom: 1px solid red; } </style> <span>hello world</span>
Поделиться AddWeb Solution Pvt Ltd 31 августа 2017 в 09:33
Похожие вопросы:

Text-decoration-color не применяется
Действительно простая проблема, но она меня расстраивает. В навигационной панели для страницы я хочу, чтобы она была обычным цветом, а затем имела другой цветовой эффект наведения. При осмотре…

Text-decoration: line-through не работает в IE?
У меня есть это .strike{ text-decoration: line-through; } и каждый раз, когда вызывается мой disable() , он отключает <option> s из моего <select> и добавляет этот класс, но он не…

‘Text-decoration: none’ не работает в Bootstrap
При наведении курсора мои текстовые ссылки имеют подчеркивание. Это значение по умолчанию в Bootstrap. Я хочу сохранить это, если только ссылка не находится в пределах определенного div. Код,…

” text-decoration “и”: after » псевдо-элемент, revisited
Я переспрашиваю этот вопрос , потому что его ответы не сработали в моем случае. В моей таблице стилей для printed media я хочу добавить url после каждой ссылки, используя псевдокласс :after ….

jquery. css(‘text-decoration’) не работает от родителей
Я должен получить необходимое свойство css элемента (свойства могут быть унаследованы от его родителя) Стандарт jquery. css() может это сделать. Так что у меня есть такой HTML: <div…

Удаление подчеркивания в URL [text-decoration: none; не работает]
Я хочу удалить подчеркивание. Я уже поставил text-decoration: none; . Однако это не работает. Вот DEMO . HTML <a href=./index.php?sign_in=1> <div id=signup_button> Sign up </div>…

css «text-decoration: none» не работает
Я не понимаю, почему text-decoration: none не работает в следующем коде. Он не может удалить подчеркивание слова yes . .button { color: black; text-decoration: none; } body { font-family: ‘Roboto’,…

CSS: text-decoration не удается удалить overline
Я пытаюсь удалить текстовое оформление из первой буквы с помощью селектора p::first-letter . Но по какой-то неизвестной причине я не могу этого сделать. p::first-line { font-weight: bold;…

text-decoration-color не работает на IE
Есть ли какая-нибудь альтернатива для text-decoration-color для IE? Я гуглю, но у меня нет никакого решения для этого. Заранее спасибо.

‘text-decoration-line: подчеркивание’ не работает
В файле css я дал код для подчеркивания моего текста с помощью, text-decoration-line: подчеркивание Но это не работает. Он даже не работает для сквозной линии. Я использовал этот стиль для тега h2 и…
Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)
По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения «underline», «overline», «line-through», «none». Рассмотрим последовательно эффект от каждого.
Рассмотрим ссылку:
<a href="/">MouseDC.ru</a>
Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):
MouseDC.ru
overline ставит линию над текстом
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
line-through перечёркивает текст посередине
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
underline подчёркивает текст снизу (это значение по умолчанию в браузерах)
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
none убирает подчёркивание:
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
Состояния ссылок
Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: «:hover» — это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:
a:hover{ font-size: 30px; color: red; }
Псевдокласс «:hover» есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.
«:active» — указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.
«:visited» — указывает на то, что пользователь уже переходил по этой ссылке.
«:link» — псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.
К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса «:visited«.
a:visited { color: green; }
Настроить подчеркивание с помощью оформления текста в CSS
Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.
Говорят, хороших вещей приходят к тем, кто ждет , и это оказывается правдой, когда дело доходит до оформления текста в сети.Модуль оформления текста CSS уровня 3 определяет несколько отличных новых способов украшения текста в Интернете, и браузеры, наконец, начинают их хорошо поддерживать. Времена использования border-bottom вместо правильного подчеркивания текста, чтобы получить другой цвет подчеркивания, наконец, могут прийти в норму.
Результаты могут отличаться: поддержка все еще ограничена, поэтому примеры в этом сообщении могут отображаться некорректно в зависимости от используемого вами браузера.
текст-оформление
Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и свойства text-decoration-line.Например, вот цветное двойное подчеркивание:
.fancy { -webkit-text-decoration: двойное подчеркивание горячим розовым цветом; оформление текста: двойное подчеркивание горячим розовым цветом; }
Необычный подчерк
текст-украшение-цвет
Работает так, как вы можете себе представить. Наконец-то появился способ изменить цвет оформления текста!
стиль оформления текста
text-decoration-style используется для определения типа оформления текста, и новая рекомендация содержит два новых значения: double и wavy:
.волнистый { оформление текста: подчеркивание; -webkit-text-decoration-color: лосось; текст-украшение-цвет: лосось; -webkit-text-decoration-style: волнистый; стиль оформления текста: волнистый; }
Волнистое украшение
текст-украшение-строка
text-decoration-line принимает значения подчеркивания, overline, line-through и blink (однако мигание устарело):
.strike { -webkit-текст-украшение-цвет: красный; цвет оформления текста: красный; -webkit-text-decoration-line: сквозная строка; текст-украшение-строка: сквозная строка; }
Ударь этот
текст-украшение-пропустить
С помощью text-decoration-skip мы можем избежать того, чтобы украшение перешагнуло через части элемента, к которому оно применяется.Возможные значения: объекты, пробелы, чернила, края и украшение коробки.
ink: И, наконец, способ предотвратить наложение элементов нижнего положения глифов при оформлении текста:
.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% браузеров по всему миру хотя бы частично поддерживают это свойство.
CSS Text Decoration: Пошаговое руководство
Когда вы разрабатываете текст для веб-страницы, вы можете захотеть добавить в текст украшения. Например, вы можете захотеть добавить подчеркивание к важной работе или линию через старый текст.
Найди свой матч на тренировочном лагере

В этом руководстве с примерами будет обсуждаться, как использовать свойство text-decoration и три его вспомогательных свойства для добавления украшения к блоку текста в CSS. К концу чтения этого руководства вы станете экспертом в декорировании текста с помощью свойства text-decoration.
Это связано с тем, что использование только визуальных индикаторов, таких как цвета, будет доступно не всем пользователям, например тем, кто страдает дальтонизмом или имеет аналогичное нарушение зрения. Добавление подчеркивания, зачеркивания или надчеркивания повысит вероятность того, что пользователь сможет заметить, что часть текста была выделена.
Эти свойства можно комбинировать при использовании свойства text-decoration, чтобы сделать код более удобным эффективный. Вместо того, чтобы указывать каждый по отдельности, вы можете использовать следующий синтаксис для определения стиля оформления текста:
Теперь, когда мы знаем основы сокращенного свойства text-decoration, давайте рассмотрим пример того, как оно работает. В этом уроке мы будем использовать пример местной пекарни, которая хочет создать свой собственный веб-сайт.
Например, на странице About заголовок About Us должен быть подчеркнут, чтобы привлечь внимание пользователя к заголовку.У каждого заголовка должно быть синее подчеркивание, а ширина каждой строки должна быть 2 пикселя. Мы могли бы создать такой заголовок, используя следующий код:
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
В нашем HTML-коде мы определили заголовок с помощью тега
, который показывает текст
About Us на веб-странице.Затем в нашем коде CSS мы создали правило, которое применяется ко всем элементам
на нашей веб-странице. Это правило использует свойство text-decoration для создания подчеркивания:

Отображается светло-голубым (обозначается светло-голубым )
Имеет одну линию (обозначается сплошным )
Используется стиль подчеркивания (обозначается подчеркиванием )
Это простой пример подчеркивания создается с использованием свойства text-decoration.Теперь давайте исследуем каждое из свойств, составляющих свойство text-decoration.
Строка оформления текста (строка оформления текста)
Свойство text-decoration-line позволяет вам установить тип линии, которая будет отображаться в тексте, к которому это свойство применяется. Это свойство принимает следующие значения:
.
подчеркивание: создает строку, которая появляется под блоком текста.
overline: создает строку, которая появляется над блоком текста.
сквозная линия: создает зачеркнутую линию, которая появляется в середине блока текста.
мигание: заставляет мигать текст, к которому применяется стиль (этот стиль устарел).
Если это свойство используется без какого-либо другого оформления текста, появится сплошная одиночная черная линия подчеркивания.
Вернемся к примеру с пекарней, чтобы проиллюстрировать, как работает это свойство. Предположим, пекарня, которая называется Jefferson’s Family Bakery, попросила нас стилизовать текст на их странице About Us .Они попросили нас подчеркнуть определенные части их текста.
Мы могли бы использовать свойство text-decoration-line для выполнения этой задачи. Вот код, который мы будем использовать:

Семейная пекарня Джефферсона, основанная в 1899 году, - это семейная пекарня, которая предлагает вкусную выпечку жителям Сиэтла, штат Вашингтон. Наша пекарня наиболее известна своими рогаликами , которые были высоко оценены рядом местных изданий с тех пор, как мы начали их продавать в 1950 году.Сегодня в Jeffersons работают десять человек, которые неустанно трудятся над приготовлением хлеба, булочек и различных хлебобулочных изделий, которыми пользуются наши клиенты. Если вы хотите съесть хороший рогалик, хлеб или испеченный пирог, приходите в Джефферсонс !
<стиль> .underline { текст-украшение-строка: подчеркивание; }
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
Давайте разберем наш код. В нашем HTML-коде мы создали абзац текста, заключенный в теги
.
Внутри этого абзаца находится описание семейной пекарни Джефферсона. Кроме того, два термина — , наиболее известные из наших бубликов и , пришли к Jeffersons — заключены в теги , которые используются для отделения заключенного внутри текста от остальной части абзаца.
В нашем коде CSS мы определяем правило, которое применяется ко всем элементам с классом , подчеркивание . Итак, в нашем случае все наши теги используют стиль, который мы определили, потому что каждый тег также назначен классу , подчеркивание .В определенном нами правиле используется text-decoration-line для добавления одного черного подчеркивания к тексту, который мы хотели выделить.
Цвет оформления текста (цвет оформления текста)
Свойство text-decoration-color позволяет определить цвет оформления текста, применяемого к стилю. Предположим, мы хотим, чтобы подчеркивание, которое мы определили в нашем последнем примере, было зеленым. Мы могли бы сделать это, используя следующий стиль:

Семейная пекарня Джефферсона, основанная в 1899 году, - это семейная пекарня, которая предлагает вкусную выпечку жителям Сиэтла, штат Вашингтон.Наша пекарня наиболее известна своими рогаликами , которые были высоко оценены рядом местных изданий с тех пор, как мы начали их продавать в 1950 году. Сегодня в Jeffersons работают десять человек, которые неустанно трудятся над приготовлением хлеба, булочек и различных хлебобулочных изделий, которыми пользуются наши клиенты. Если вы хотите съесть хороший рогалик, хлеб или испеченный пирог, приходите в Джефферсонс !
<стиль> .underline { текст-украшение-строка: подчеркивание; цвет оформления текста: зеленый; }
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
В наш код CSS мы добавили правило стиля text-decoration-color, которое имеет значение green . Это устанавливает цвет подчеркивания, который мы определили с помощью text-decoration-line, на зеленый.
Мы также указали значение для text-decoration-line, которое требуется для создания нашего стиля линии.
Стиль оформления текста (стиль оформления текста)
Свойство text-decoration-style позволяет вам установить стиль, в котором текстовое оформление будет отображаться в блоке текста.Свойство text-decoration-style принимает любое из следующих значений:
сплошной: Создает одну линию.
double: создает двойную линию.
пунктир: создает пунктирную линию.
пунктирная линия: образует пунктирную линию.
волнистая: создает волнистую линию.
Вернемся к примеру с пекарней. Предположим, пекарня попросила нас добавить пунктирное подчеркивание к заголовку About the Jeffersons на странице About Us .Это подчеркивание должно быть светло-голубым и должно быть пунктирным. Мы могли бы создать это подчеркивание, используя следующий код:

О Джефферсонах
<стиль> h3 { текст-украшение-строка: подчеркивание; цвет-оформления-текста: светло-голубой; стиль оформления текста: пунктирная; }
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
В нашем коде мы использовали стили text-decoration-line и text-decoration-color для определения нашего подчеркивания и установки цвета подчеркивания на голубой, соответственно.Затем мы использовали свойство text-decoration-style, чтобы установить стиль подчеркивания пунктирным.
Удаление подчеркивания в гиперссылке
Свойство text-decoration обычно используется для удаления подчеркивания, которое появляется в традиционной ссылке HTML. Это связано с тем, что свойство text-decoration принимает значение none , которое используется для удаления стилей текста по умолчанию, примененных к элементу.
По умолчанию, когда вы определяете ссылку с помощью тега , появляется подчеркивание.Однако не все веб-сайты хотят отображать подчеркивание под своими ссылками.
Предположим, на веб-сайте Jefferson’s Family Bakery есть гиперссылка с меткой Свяжитесь с нами , которая ведет на страницу /contact.html на их сайте. Вот HTML-код гиперссылки:
Свяжитесь с нами
Когда мы визуализируем этот компонент, возвращается следующий ответ: Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
Как видите, ссылка отображается синим цветом с подчеркиванием. Если бы мы хотели удалить это подчеркивание, мы могли бы использовать следующий код:
Свяжитесь с нами <стиль> a { текстовое оформление: нет; }
Нажмите кнопку
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
Как видите, в нашем втором примере подчеркивание под нашей ссылкой было удалено.В нашем коде CSS мы использовали правило text-decoration: none и применили его к каждому тегу . Это удаляет любое текстовое оформление из элементов, к которым оно применяется, в данном случае это каждый тег .
Заключение
Оформление текста — это один из способов привлечь внимание к определенному тексту на веб-странице и сделать его более эстетичным.
Свойство CSS text-decoration и связанные с ним свойства позволяют определять оформление, используемое блоком текста на веб-странице.
В этом руководстве со ссылкой на примеры обсуждается, как использовать свойство text-decoration и связанные с ним свойства для украшения текста на веб-странице. Теперь у вас есть необходимые знания, чтобы начать украшать текст, как профессиональный веб-дизайнер!
Оформление текста 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 стиль оформления текста
Пример <стиль> h2 { шрифт: 100 3em без засечек; текст-украшение-строка: над чертой; стиль оформления текста: волнистый; }
Пример
Свойство CSS text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе.
Свойство text-decoration-style можно использовать в сочетании со свойствами text-decoration-line и text-decoration-color для определения стиля оформления линии (т. Е. Сплошной, двойной, пунктирной, пунктирной, волнистые). Если text-decoration-style не указан, линия будет сплошной.
Синтаксис
стиль оформления текста: сплошной | двойной | пунктирная | пунктирная | волнистый
Возможные значения
цельный
Однолинейный сегмент.
двойной
Задает две параллельные сплошные линии с некоторым промежутком между ними.
с точками
Задает линию, состоящую из точек.
штриховая
Задает линию, состоящую из тире.
волнистый
Задает волнистую линию.
Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:
начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
отключено
Это значение действует как наследует или как начальный , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
Основная информация об имуществе
Начальное значение
цельный
Относится к
Все элементы
Унаследовано?
Нет
Медиа
Визуальный
Анимационный
Нет
Пример кода
Базовый CSS
Вот пример базовой декларации.Объявление состоит из свойства и его значения.
стиль оформления текста: волнистый;
Значит, его можно использовать так:
h2 { текст-украшение-строка: подчеркивание; стиль оформления текста: волнистый; цвет оформления текста: желто-зеленый; }
Рабочий пример в HTML-документе
Пример <стиль> h2 { шрифт: 100 3em без засечек; текст-украшение-строка: над чертой; стиль оформления текста: волнистый; }
Пример
Попробуй
Спецификации CSS
Поддержка браузера
Следующая таблица предоставлена Caniuse.com показывает уровень поддержки этой функции браузером.
Префиксы поставщиков
Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.
W3C не рекомендует эту практику, однако во многих случаях единственный способ проверить свойство — это включить расширение CSS, совместимое с вашим браузером.
Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.
Многие разработчики используют Autoprefixer, который представляет собой постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.
Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.
Подчеркивание с помощью CSS — tempertemper
Если вы не подчеркиваете ссылки, то должны. Есть несколько способов подчеркнуть ссылки; text-decoration: подчеркивание является наиболее очевидным, поскольку именно так оформляются ссылки по умолчанию, а border-bottom предлагает нам немного больше гибкости.Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?
Зачем вообще беспокоиться, если это уже работает для нас с границами? Что ж, text-decoration: подчеркивание лучше типографически , поскольку подчеркивание хорошо сочетается с базовой линией слов, проходя через нисходящие элементы (части букв, которые идут ниже базовой линии в таких буквах, как g , p и y ), тогда как нижняя граница подчеркивает под нижними нижними элементами, что означает слишком большое расстояние между словами и их подчеркиванием, когда.
Не только это, но браузеры теперь обнаруживают нисходящие элементы, а текстовое оформление , подчеркивание аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому по умолчанию он включен.
Итак, как мы можем добиться этого визуального чутья с text-decoration: подчеркивание , которое у нас всегда было через border-bottom ?
Подчеркнутый, надстрочный
Здесь мы говорим о подчеркивании, но стоит сделать это заранее с помощью небольшого тангенса: text-decoration-line , как и text-decoration , имеет 3 позиции:
Под текстом ( подчеркивание )
Через текст ( через строку )
Над текстом ( над текстом )
text-decoration-line также допускает несколько значений, поэтому мы можем иметь строки под, сквозь и над одним и тем же блоком текста.Немного странно, но оно есть:
текст-оформление: подчеркивание; text-decoration-line: подчеркивание поверх;
Как выглядит подчеркивание
Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:
штриховая
двойной
с точками
цельный
волнистый
Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. Д.Просто добавьте объявление text-decoration-style:
текст-оформление: подчеркивание; стиль оформления текста: волнистый;
Цвет подчеркивания
Отличный. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое обычное значение цвета CSS, будь то ключевое слово, шестнадцатеричное, RGB, RGBA, HSL и т. Д .:
текст-оформление: подчеркивание; цвет-оформления-текста: красный;
Просто убедитесь, что подчеркивание соответствует желаемой цветовой контрастности!
Утолщение подчеркиваний
Наконец, мы можем контролировать толщину подчеркивания с помощью text-decoration-Thickness , например:
текст-оформление: подчеркивание; толщина украшения текста: 5 пикселей;
Комбинации
Конечно, мы можем делать лоты одновременно:
текст-оформление: подчеркивание; стиль оформления текста: волнистый; цвет-оформления-текста: красный; толщина украшения текста: 5 пикселей;
Или мы можем использовать text-decoration-line вместо text-decoration :
текст-украшение-строка: подчеркивание; стиль оформления текста: волнистый; цвет-оформления-текста: красный; толщина украшения текста: 5 пикселей;
Сокращение
Превращается в CSS! К счастью, как и поля, отступы, радиус границы и множество других свойств CSS, text-decoration теперь является сокращением, в котором мы можем объявить несколько значений:
текст-оформление: подчеркивание волнистым красным;
Обратите внимание, что в этом примере я не добавил свойство text-decoration-Thickness .Для этого есть веская причина: поддержка браузера.
Постепенное улучшение
Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и Internet Explorer 11 и ниже, разумеется) должны получить стандартный, но все же очень удобный для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:
a { текстовое оформление: нет; }
Но имейте в виду, поддержка браузером зависит от:
имущество, которое вы используете
ценности в собственности
Префиксы, необходимые для сокращения
Если вы используете стенографию, вам понадобятся префиксы поставщиков для Safari, чтобы делать ставки:
текст-оформление: подчеркивание волнистым красным; -webkit-text-decoration: подчеркивание волнистым красным цветом;
Достаточно просто сделать, если вы автоматизируете что-то с помощью Autoprefixer, и не слишком много дополнительной работы, если вы пишете его от руки.Опять же, браузеры, которые не поддерживают сокращение text-decoration , должны просто вернуться к этому подчеркиванию по умолчанию.
text-decoration-Thickness не так хорошо поддерживается, как другие
Браузер поддерживает text-decoration-line , text-decoration-style и text-decoration-color довольно хорошо. В каждом браузере все три реализованы одновременно, но управление толщиной подчеркивания было введено намного позже.Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).
Более того, Firefox в настоящее время является браузером only для поддержки толщины в сокращении, поэтому, если вы хотите использовать толщину в сокращении, вам нужно будет сделать классическое двойное объявление, чтобы другие браузеры получили значение, которое они понимают:
оформление текста: сплошной красный подчеркивание; text-decoration: подчеркивание сплошным красным цветом 5 пикселей;
текст-украшение-толщина и проценты не играют хорошо
Также будьте осторожны при использовании процентных значений толщины, поскольку их поддерживает только Firefox.
Хорошая новость заключается в том, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-Thickness: 0,1em совпадает с text-decoration-Thickness: 10% , так что вы также можете придерживаться em s, поскольку они фактически делают то же самое.
Всегда есть пиксели ( пикселей, ), но с точки зрения типографики лучше сохранить толщину линии относительно текста, который она подчеркивает, поэтому, если пользователь увеличивает размер текста на экране, подчеркивание увеличивается пропорционально.
толщина текстового оформления беспорядок
Будьте осторожны при объединении text-decoration-style с text-decoration-Thickness . Все, кроме сплошной линии по умолчанию (и, возможно, двойной линии ), может выглядеть неаккуратно, если толщина установлена слишком большой. Эти волнистые , пунктирные и пунктирные почти всегда обычно обрезаются в неопрятных местах, когда они пропускают нижние элементы, и в конце слова.
Рекомендации по удобству использования
Как и в случае с большинством CSS, помните: с большой мощностью приходит большая ответственность, и с точки зрения удобства использования я бы опасался использовать что-либо, кроме сплошного подчеркивания для стилизации ссылки.
Значит, у вас все в порядке, если вам нужно:
другой цвет подчеркивание
прогрессивно увеличивающаяся толстая линия подчеркивания
может быть даже двойное подчеркивание
Но будьте осторожны со всем остальным:
text-decoration-line: line-through — это в основном то, как выглядят элементы с зачеркиванием
text-decoration-line: overline выглядит странно, и текст над ссылкой может выглядеть как ссылка
волнистый , пунктирный или пунктирный подчеркивание может выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки
Я думаю, что , волнистый, , , пунктирный, или , пунктирный, могут работать нормально, однако, это для состояний наведения.
Что бы я сделал
Shorthand поставляется с префиксами поставщиков и изворотливыми двойными объявлениями, поэтому я бы начал с классического text-decoration: underline; и улучшите его. Я был бы склонен избегать чего-либо, кроме прямого подчеркивания, которое хорошо известно пользователям, поэтому text-decoration-line отсутствует; что оставляет у меня всплеск цвета и приятную толщину на основе em для браузеров, отличных от Chromium:
a { оформление текста: подчеркивание; цвет-оформления-текста: красный; толщина украшения текста: 0.1em; }
Модуль оформления текста 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 выбирает подходящую толщину для линий оформления текста; см. ниже.
from-font
Если первый доступный шрифт имеет показатели, указывающие предпочтительную ширину подчеркивания, используйте эту ширину, в остальном ведет себя как авто.
<длина>
Задает толщину линий оформления текста как фиксированную длину.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.
ссылка { цвет синий; оформление текста: подчеркивание; оформление текста: темно-синяя пунктирная линия; / * Игнорируется в UA CSS1 / CSS2 * / }
Примечание. В сокращении намеренно опущено свойство 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-бокса, как описано ниже, может быть более подходящим.
Типичное «буквенное» подчеркивание располагается чуть ниже буквенной базовой линии
from-font
Если первый доступный шрифт имеет показатели, указывающие предпочтительное смещение подчеркивания, используйте это смещение, в остальном ведет себя как авто.
под
Подчеркивание располагается под текстовым содержанием элемента. В этом случае подчеркивание обычно не пересекает нижние элементы.(Это иногда называют «бухгалтерским» подчеркиванием.) Это значение можно комбинировать с левым или правым, если конкретная сторона предпочтительнее в вертикальных типографских режимах. Поскольку положение подчеркивания текста наследуется и не сбрасывается сокращенно 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 приведет к лучшей типографике.
Из-за выравнивания вертикального текста по центру базовой линии, левое подчеркивание небольшого вертикального текста прорезает текст ребенка с большим размером шрифта.Подчеркивание не допускается, но изменяя свое положение дальше влево правильно вмещает весь подчеркнутый текст.
UA должны отрегулировать положение линии чтобы соответствовать смещенным метрикам украшающих коробок сдвинутым со значениями вертикального выравнивания, отличными от baseline [CSS2], или с нижним / верхним индексом через font-variant-position [CSS-FONTS-3], но не должен регулировать положение линии или толщину в ответ на потомков , украшающих коробку , которые так стилизованы (хотя это может отрегулировать положение для размещения потомков, которые не имеют такого стиля, например, те, которые просто набраны другим размером шрифта, как указано выше).Это позволяет правильно оформить надстрочные и подстрочные индексы. (подчеркнут, зачеркнут и т. д.) но мешает им исказить или нарушить расположение таких украшений на своих предках.
Пример подчеркивания, примененного к надстрочному тексту по сравнению с подчеркиванием, примененным к тексту, содержащему надстрочный индекс
2.10. Непрерывность линии оформления текста: сокращение text-decoration-skip и его вспомогательные свойства
CSSWG решила разделить функцию пропуска на отдельные свойства. по линиям текст-украшение-скип-тушь, для улучшения его каскадного поведения.См. Обсуждение и решение. Этот раздел является черновым вариантом и еще не прошел проверку Рабочей группой CSS
.
Свойство text-decoration-skip и его вложенные свойства (текст-украшение-пропустить-сам, текст-украшение-пропустить-поле, текст-украшение-пропустить-вставку, текст-украшение-пропускать-пробелы, текст-украшение-пропустить-чернила) контролировать прерывания в оформлении линии для которого элемент или предок является украшающей коробкой. Значение нет устанавливает для всех подсвойств значение none, и авто значение устанавливает для всех вложенных свойств их начальные значения.
Совместимо ли это определение с Интернетом? Нужно ли нам также добавлять значение рукописного ввода для веб-совместимости?
Обратите внимание, что эти свойства наследуют и у дочерних элементов могут быть разные настройки.
В таблицу стилей 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, т.е. цвет тени берется из свойства цвета элемента.
Эффекты тени применяются спереди назад: первая тень сверху. Таким образом, тени могут накладываться друг на друга, но они никогда не перекрывают сам текст.Тень должна быть нарисована на уровне стека. между границей элемента и / или фоном (если есть) а также элементы текста и оформления текста. 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. Рабочая группа.
Свойство CSS3 text-decoration-style — Tutorial Republic
Тема: Справочник по свойствам CSS3 Пред. | След.
Описание
Свойство CSS text-decoration-style определяет стиль строк, заданный свойством text-decoration-line .
В следующей таблице приведены контекст использования и история версий этого свойства.
Синтаксис
Синтаксис свойства задается следующим образом:
стиль оформления текста:
[сплошной | двойной | пунктирная | пунктирная | волнистый] ^{одно или несколько значений} | начальная | наследовать
В приведенном ниже примере показано свойство text-decoration-style в действии.
п { оформление текста: подчеркивание; -moz-text-decoration-style: пунктирная; /* Fire Fox */ стиль оформления текста: пунктирная; / * Стандартный синтаксис * / }
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение Описание
цельный Строка отображается как отдельная строка.Это значение по умолчанию.
двойной Линия отображается как двойная линия.
пунктирная Линия отображается пунктирной линией.
штриховая Линия отображается пунктирной линией.
волнистый Линия отображается в виде волнистой линии.
начальный Устанавливает для этого свойства значение по умолчанию.
наследство Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента text-decoration-style.
Совместимость с браузером
Свойство text-decoration-style не поддерживается в большинстве браузеров.
Базовая поддержка -
Firefox 6+ ^-moz-, 36+
Google Chrome ×
Internet Explorer ×
Apple Safari ×
Опера ×
Предупреждение: Свойство text-decoration-style в настоящее время не поддерживается большинством браузеров.Вам лучше избегать использования этого свойства.
Дополнительная литература
См. Руководство по теме: Текст CSS, Граница CSS.
Связанные свойства: текст-украшение , текст-украшение-строка , текст-украшение-цвет .
.

Text decoration style css: text-decoration-style | htmlbook.ru

CSS text decoration style

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

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

Похожие страницы

Свойство text-decoration-style | CSS справочник

Определение и применение

Поддержка браузерами

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

Версия CSS

Наследуется

Анимируемое

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

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

Синтаксис¶

Пример¶

Пример¶

Пример¶

Значения¶

Свойство text-decoration-style — тип линии у текста

Синтаксис

Значения

Пример . Значение wavy

Пример . Значение dotted

Пример . Значение double

Использование «text-decoration-color» не работает — CodeRoad

4 ответа

Похожие вопросы:

Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)

Состояния ссылок

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

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

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

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

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

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

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

CSS Text Decoration: Пошаговое руководство

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

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