Css нижнее подчеркивание текста: text-decoration | htmlbook.ru

Как сделать подчёркивание заголовка? | WebReference

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

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

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h3>.

Пример 1. Использование text-decoration

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

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

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

Пример 2. Использование border-bottom

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

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

Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.

Рис. 3. Линия, созданная через ::after

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

Пример 3. Использование ::after

Линии и рамки

См. также

• border-bottom
• relative и absolute
• text-decoration
• text-decoration-color
• Аккордеон меню
• Добавление тени
• Начертание
• Не только текст
• Оформление ссылок
• Очистка float
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Свойства текста в CSS
• Точки между слов

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05. 10.2018

Редакторы: Влад Мержевич

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки

<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

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

<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Пунктирное подчёркивание

<style>
.  raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Стиль текста CSS</span>

none underline overline line-through spelling-error grammar-error solid double dotted dashed wavy

initial

none solid currentcolor

inherit

наследует значение родителя

unset

none solid currentcolor

Свойство text-decoration не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: none;

  

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
</style>

<div>Свойство <code>text-decoration</code> не наследуется, применяется ко всем элементам</div>

none

убрать от текста линии

underline

подчеркнуть текст (снизу)

overline

провести линию над текстом (сверху)

line-through

зачеркнуть текст (посередине)

spelling-error

оформить как при орфографической ошибке (не поддерживается браузерами)

grammar-error

оформить как при грамматической ошибке (не поддерживается браузерами)

initial

none

inherit

наследует значение родителя

unset

none

<style>
div {
  text-decoration-line: none;
}
</style>

<div>Свойство <code>text-decoration-line</code> не наследуется, применяется ко всем элементам</div>

Сделать линию над и под текстом

<style>
. raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>

solid

одинарная прямая линия

double

двойная прямая линия

dotted

линия точками

dashed

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

wavy

волнистая линия

initial

solid

inherit

наследует значение родителя

unset

solid

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

<style>
div {
  text-decoration: underline;
  text-decoration-style:  solid;
}
</style>

<div>Свойство <code>text-decoration-style</code> не наследуется, применяется ко всем элементам</div>

currentcolor

цвет черты что у текста

transparent

черта полностью прозрачная (невидимая)

red

цвет черты ключевым словом

#ff0000 или #ff0000ff

цвет черты в формате HEX

rgb(255,0,0) или rgba(255,0,0,1)

цвет черты в формате RGB или RGBA

hsl(0,100%,50%) или hsla(0,100%,50%,1)

цвет черты в формате HSL() или HSLA()

initial

currentcolor

inherit

наследует значение родителя

unset

currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.

objects

черта пропускает картинки и inline-block-элементы

none

черта ничего не пропускает

spaces

черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing

leading-spaces

trailing-spaces

edges

черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией

box-decoration

черта видна, если задана родителю, и пропускает области, созданные margin, padding и border

initial

objects leading-spaces trailing-spaces

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-decoration-skip наследуется, применяется ко всем элементам .

<style>
div {
  text-decoration: underline;
  text-decoration-skip: objects leading-spaces trailing-spaces;
}
code {
  display: inline-block;
}
</style>

<div>Свойство <code>text-decoration-skip</code> наследуется, применяется ко всем элементам <img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик">.</div>

auto

черта пропускает выступающие части символов (например, «хвостики» у букв «р» и «у»)

none

черта не пропускает выступающие части символов (например, «хвостики» у букв «р» и «у»)

initial

auto

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
</style>

<div>Свойство <code>text-decoration-skip-ink</code> наследуется, применяется ко всем элементам</div>

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

<style>
. raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span>Пример подчёркнутого текста</span>

Подчёркивание без пропусков выносных частей символов в Safari

<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span>Пример подчёркнутого текста</span>

auto

автоматически (положение черты близко к базовой линии)

under

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

left

right

initial

auto

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-underline-position наследуется (применяется ко всем элементам)

<style>
div {
  text-decoration: underline;
  text-underline-position: auto;
}
</style>

<div>Свойство <code>text-underline-position</code> наследуется (применяется ко всем элементам)</div>

Разница

<table>
  <tr>
    <tdvydelit">text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

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

Стилизация ссылок — Изучение веб-разработки

• Назад
• Обзор: Styling text
• Далее

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:	Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

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

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

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

• Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link.
• Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited.
• Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
• Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement. focus() (en-US)) — стилизуется используя псевдокласс :focus.
• Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

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

• Ссылки подчёркнуты.
• Не посещённые ссылки синие.
• Посещённые ссылки фиолетовые
• Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
• Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
• Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

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

• Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
• Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

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

• color (en-US) для цвета текста.
• cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
• outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}
p {
  line-height: 1.4;
}
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
a:link {
  color: #265301;
}
a:visited {
  color: #437A16;
}
a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}
a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}
a:active {
  background: #265301;
  color: #CDFEAA;
}

Также мы дадим некий пример HTML к которому применяется CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www. google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

• Первые два правила не так интересны в этом обсуждении.
• Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
• Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
• Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
  • Нижнее подчёркивание создано используя border-bottom, а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
  • Значение border-bottom установлено на 1px solid, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
• Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!

Активное изучение: Стилизуйте ссылки самостоятельно

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

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

<p>For more information on the weather, visit our <a href="weather. html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}
p {
  line-height: 1.4;
}
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:focus, a:hover {
  border-bottom: 1px solid;
}
a:active {
  color: red;
}
a[href*="http"] {
  background: url('external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы <a>, но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

А теперь наш CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: yellow;
}
a:hover {
  background: orange;
}
a:active {
  background: red;
  color: white;
}

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

• Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
• Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
• четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
  • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
  • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
  • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
  • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

• Назад
• Обзор: Styling text
• Далее

Last modified: 4 авг. 2022 г., by MDN contributors

Css как убрать подчеркивание ссылок : Радиосхема.

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

• Как убрать подчеркивание ссылки CSS
• Предостережение относительно удаления подчеркивания
• Не подчеркивайте текст, не связанный со ссылкой
• Измените сплошное подчеркивание точками или пунктиром
• Изменение цвета подчеркивания
• Как сделать двойное подчеркивание
• Не забывайте о различных состояниях ссылок

Как убрать подчеркивание ссылки CSS

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration . Вот CSS-код , с помощью которого это можно сделать:

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст ( с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание ( вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию ( линия « solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

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

• ссылки без подчёркивания;
• декоративное подчёркивание;
• выделение фоновым цветом;
• рамки;
• рисунок возле ссылки.

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

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

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

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

Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.

Как убрать нижнее подчеркивание у ссылок html?

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

• line-through — перечеркивает ссылку
• overline — добавляет верхнее подчеркивание
• underline — добавляет нижнее подчеркивание
• none — убирает подчеркивание
• initial — устанавливает значение по умолчанию
• inherit — наследует это свойство от родительского элемента

Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none . Если мы собираемся применить правило ко всем ссылкам на странице пишем:

Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.

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

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

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

На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3. 5+	1.0+	1.0+	1.0+	1.0+

Задача

Убрать подчёркивание у текстовых ссылок.

Решение

Используйте свойство text-decoration со значением none для селектора A .

Описание

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

Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none , как показано в примере 1.

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан ни рис. 1.

Рис. 1. Ссылка, у которой отсутствует подчёркивание

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

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

Убрать нижнее подчеркивание у ссылок очень просто, нужно прописать в CSS файле следующий код:

Это убирет подчеркивание у всех ссылок на сайте. Если вы хотите убрать или добавить некоторым ссылкам подчеркивание, то используйте разные классы.

Css как убрать подчеркивание ссылок

9. Свойства текста · Неожиданный HTML

Свойства текста интересны тем, что многие из них применяются не только к тексту, но и к inline-block элементам.

text-decoration — определяет будет или нет подчеркивание у текста
underline — нижнее подчеркивание
overline – линия над текстом
line-through – перечеркнутый текст
none – оформление отсутствует (попробуйте применить это значение к гиперссылке, чтобы получить ссылку без подчеркивания)

text-align – выравнивание текста и инлайн элементов по горизонтали.
center – по середине
left – влево
right – вправо

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

Например

<div>
Это текст, который должен быть выровнен по центру
</div>

Зададим css

.block {
    width:100%;
    height:300px;
    text-align:center;
}

vertical-align – выравнивание блока внутри строчки по вертикали
top – по верху
bottom – по низу
middle – по середине

В отличии от text-align, vertical-align применяется не к внутреннему содержимому блока, а непосредственно к самому блоку.

line-height — высота строки

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

Хак: в предыдущих разделах, выполняя задание, Вы могли столкнуться с тем, что между двумя рядами display:inline-block элементов могли появляться горизонтальные строчки. Это вызвано тем, что есть некоторая высота строки и inline-block элемент добавляется не в самый низ строки. Решить эту проблему можно, выставив line-height:0; для родительского блока.

Пример использования line-height в процентах https://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height

word-spacing — отступ между словами. Свойство можно применить к display:inline-block блокам, задав его для родительского блока

.parent {
    word-spacing:40px;
}

word-wrap — разбивает длинные слова и делает принудительный перенос

word-wrap: break-word;

http://shpargalkablog.ru/2013/02/word-wrap.html

white-space — определяет будет или не будет перенос слова при наталкивании на пробел.

normal — обычное поведение. При необходимости перенести слово, это делает по пробелу

nowrap — пробелы воспринимаются как буква и являются неделимыми символами

white-space:nowrap;

hyphens — дефисы

hyphens: none | manual | auto

https://css-tricks. com/almanac/properties/h/hyphenate/

letter-spacing — отступ между буквами

text-indent — отступ у абзаца

text-shadow — тень от текста, будет подробнее рассмотрена в CSS3 свойствах.

text-transform

none — значение по умолчанию capitalize — каждое слово начинается с большой буквы lowercase — приводим все буквы к нижнему регистру uppercase — приводим все буквы к верхнему регистру

https://www.w3schools.com/cssref/pr_text_text-transform.asp

text-overflow

clip — просто обрезает текст

ellipsis — ставит в конце текста три точки

кросс-браузерное решение

  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

Практика:

1. Выровнять три блока по центру по горизонтали

Задача: разместить блоки разной высоты в линию

1. Теперь попробуем добавить текст в один div’ов. Как видим один из блоков уезжает вниз. Его позиция кажется бесмысленной, но на самом деле всего блоки выровнены по так называемой базовой линии (baseline)

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

Задача: разместить блоки разной высоты в линию по верхнему краю

1. Делаем блоки со словами внутри. Выравниваем в нем текст по вертикали и горизонтали
2. Делаем блоки разной ширины с одинаковыми отступами между ними
3. Делаем блок и ставим длинное слово внутрь его. Обеспечиваем переносы.
4. Создаем шаблон, указанный ниже. Размеры блоков фиксированные
5. Есть блок с фоновой картинкой. На картинке есть небольшое затемнение. Поверх затемнения есть текст(одно слово), выровненный по вертикали и горизонтали.
6. Берем сетку из airbnb. Выстраиваем блоки со словами внутри них
7. Сделать верстку в стилистике pinterest

Интересное чтиво:
Пошаговое руководство как оформлять текст на сайте
http://jgthms. com/web-design-in-4-minutes/

Нижнее подчёркивание html или все хитрости оформления текста

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

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

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.

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

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

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

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

1. border- right (справа)
2. border- top (сверху)
3. border- left (слева)
4. border- bottom (снизу)

Также при помощи border можно задать:

• точечное (dotted)
• пунктирное (dashed)
• линейное (solid)
• двойное (double)
• объемное обрамление блокам (groove, inset, ridge и outset)

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

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

1. мигание (blink)
2. линия над текстом (overline)
3. зачеркнутые объекты (line-through)
4. наследование стилизации (inherit)
5. отмена всех дополнительных декораций (none)
6. необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание</title>
  <style>
   h2 {
   text-align:center;
   border-bottom:3px double green;
   padding-bottom: 4px;
   }
   . block {
    border: 5px groove green;
    padding: 40px;
    font-size:21px;
   }
   .one {
    text-decoration: none;
    border-bottom: 2px dashed green; 
     color: green;
   }
    .two {
    text-decoration: none;
    color: green;
    font-weight: 900;
   }
    a.two:hover, a.one:hover  {
    color: blue;
   }
  </style>
 </head> 
 <body>
   <h2>Озаглавим текст подчеркнутым названием</h2>
  <div>
    В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет.
   </div>
 </body>
</html>

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

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

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

С уважением, Роман Чуешов

Прочитано: 1639 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

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

❮ Назад Далее ❯

CSS Text Decoration

В этой главе вы узнаете о следующих свойствах:

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

Добавить декоративную линию к тексту

9Свойство 0011 text-decoration-line используется для добавления декоративная линия к тексту.

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

Пример

h2 {
  text-decoration-line: overline;
}

h3 {
  text-decoration-line: line-through;
}

h4 {
  text-decoration-line: underline;
}

p {
  строка-декорации текста: надчеркивание подчеркивание;
}

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

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

Укажите цвет для линии оформления

Свойство text-decoration-color используется для установить цвет декоративной линии.

Пример

h2 {
  text-decoration-line: overline;
 текстовый-декоративный-цвет: красный;
}

h3 {
  text-decoration-line: line-through;
 текстовый-декоративный-цвет: синий;
}

h4 {
  text-decoration-line: underline;
 текстовый-декоративный-цвет: зеленый;
}

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

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

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

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

Пример

h2 {
  text-decoration-line: underline;
  стиль оформления текста: твердый;
}

h3 {
  text-decoration-line: underline;
стиль оформления текста: двойной;
}

h4 {
  text-decoration-line: underline;
стиль оформления текста: пунктирный;
}

p.ex1 {
  text-decoration-line: underline;
стиль оформления текста: пунктир;
}

p.ex2 {
  text-decoration-line: underline;
стиль оформления текста: волнистый;
}

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

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

Укажите толщину линии оформления

Свойство text-decoration-thickness используется для установите толщину декоративной линии.

Пример

h2 {
  text-decoration-line: underline;
толщина оформления текста: авто;
}

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

ч4 {
строка оформления текста: подчеркивание;
text-decoration-толщина: 25%;
}

р {
строка оформления текста: подчеркивание;
  text-decoration-color: красный;
стиль оформления текста: двойной;
  толщина оформления текста: 5 пикселей;
}

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

Сокращенное свойство

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

• text-decoration-line (обязательно)
• цвет текста-декорации (опционально)
• стиль оформления текста (опционально)
• толщина оформления текста (опционально)

Пример

h2 {
  text-decoration: underline;
}

h3 {
оформление текста: подчеркивание красным;
}

ч4 {
  text-decoration: подчеркивание красный двойной;
}

р {
оформление текста: подчеркивание красным двойным 5px;
}

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

Маленький совет

Все ссылки в HTML по умолчанию подчеркнуты. Иногда вы обратите внимание, что ссылки оформлены без подчеркивания. Текстовое оформление : нет; используется для удаления подчеркивание из ссылок, например:

Пример

a {
  text-decoration: none;
}

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

Все свойства CSS text-decoration

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

текстовое оформление | CSS-Tricks — CSS-Tricks

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

 ч4 {
  оформление текста: подчеркивание;
} 

Значения

• нет : линия не рисуется, и любое существующее украшение удаляется.
• подчеркивание : рисует линию толщиной 1 пиксель поперек текста на его базовой линии.
• line-through : рисует линию толщиной 1 пиксель поперек текста в его «средней» точке.
• overline : рисует линию толщиной 1 пиксель поперек текста, прямо над его «верхней» точкой.
• наследовать : наследует украшение родителя.

Значение blink есть в спецификации W3C, но оно устарело и не будет работать ни в одном из текущих браузеров. Когда это сработало, текст «мигал», быстро переключаясь между 0% и 100% непрозрачностью.

Demo

Замечания по использованию

Вы можете комбинировать значения underline , overline или line-through в списке, разделенном пробелами, чтобы добавить несколько декоративных строк:

 p {
  text-decoration: надчеркивание, подчеркивание, перечеркивание;
} 

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

text-decoration можно использовать в сочетании с text-decoration-style и text-decoration-color в качестве сокращенного свойства:

 . f-underline .f {
  строка оформления текста: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
 
  /* можно сократить до */
  оформление текста: подчеркивание волнистым красным цветом;
} 

В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с - префикс webkit . Chrome также требуется префикс -webkit и экспериментальные функции веб-платформы, включенные в флагах Chrome.

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

Все браузеры поддерживают свойство CSS2.1 «длинная рука» text-decoration . Сокращенное свойство и подсвойства text-decoration-color , text-decoration-line и text-decoration-style поддерживаются без префикса в Firefox и с префиксом -webkit в Safari. Chrome также распознает эти значения с -webkit префикс и флаг экспериментальных веб-платформ включены.

Desktop

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
105	104	105	16. 1*

More Information

• text-decoration as a shorthand property in the W3C spec CSS Text Decoration Module Level 3 CR
• текстовое оформление в MDN

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

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

Альманах на 2 августа 2021 г.

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

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

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

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

. element {толщина украшения текста: 2 пикселя; }

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

1. Введение

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

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

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

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

Этот модуль заменяет и расширяет возможности оформления текста. функции, определенные в [CSS2], глава 16.

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

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

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

1.3. Терминология

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

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

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

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

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

Обратите внимание, что CSS 2.1 требовал всегда пропускать поля, границы и отступы. На этом уровне по умолчанию пропускаются только поля, границы и отступы декоративного блока. В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому умолчанию. Кроме того, на уровне 4 ожидается контроль над оформлением начальных/конечных пробелов. и будет применяться по умолчанию к элементам HTML ins и del .

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

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

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

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

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

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

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

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

 <цитата>
 <р>
  <диапазон>
   Помогите помогите!
    Я под шапкой! 
    —ГвиФ 
  
 


 

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

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

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

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

нет

Не производит и не запрещает оформление текста.

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

Каждая строка текста подчеркнута.

над чертой

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

проходной

Каждая строка текста имеет черту посередине.

мигает

Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут просто не мигать текстом. Обратите внимание, что не мигание текста является одним из методов выполнения контрольной точки 3.3 WAI-UAAG. Это значение равно устарел в пользу анимации [CSS-ANIMATIONS-1].

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

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

Это свойство определяет стиль линий, рисуемых для текстовое оформление, указанное на элементе. Ценности имеют то же значение, что и для стиля границы свойства [CSS-BACKGROUNDS-3]. волнистый указывает на волнистую линию.

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

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

Это свойство определяет цвет оформления текста (подчеркивание overlines и line-throughs), заданные для элемента с text-decoration-line.

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

2.4. Text Decoration Shorthand: свойство text-decoration

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

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

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

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

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

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

Это свойство задает позицию подчеркивания, указанную в элементе. (Это не влияет на подчеркивание, указанное элементами-предками.) Если указано только левое или правое, автоматически также подразумевается.

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

 :root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }
 

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

авто

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

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

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

под

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

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

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

: root { text-underline-position: under; } 

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

слева

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

справа

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

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

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

против

Правильное и неправильное отображение ABCD

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

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

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

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

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

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

3. Знаки выделения

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

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

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

3.1. Стиль метки выделения: свойство text-emphasis-style

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

нет

Без акцентов.

наполненный

Форма заполнена сплошным цветом.

открытый

Полая форма.

точка

Отображение маленьких кружков в качестве меток. Закрашенная точка — это U+2022 ‘•’, а открытая точка — это U+25E6 ‘◦’.

круг

Отображение больших кругов в качестве меток. Закрашенный кружок — U+25CF ‘●’, а незакрашенный кружок — U+25CB ‘○’.

двойной круг

Отображение двойных кругов в качестве меток. Закрашенный двойной кружок — это U+25C9 ‘◉’, а открытый двойной кружок — это U+25CE ‘◎’.

треугольник

Отображение треугольников в виде меток. Закрашенный треугольник — U+25B2 ‘▲’, а незакрашенный треугольник — U+25B3 ‘△’.

кунжут

Отображение кунжута в виде меток. Заполненный кунжут — U+FE45 ‘﹅’, а открытый кунжут — U+FE46 ‘﹆’.

<строка>

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

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

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

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

Метки рисуются один раз для каждой единицы типографского символа. Однако знаки ударения , а не нарисованы для:

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

3.2. Emphasis Mark Color: свойство text-emphasis-color

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

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

3.3. Emphasis Mark Shorthand: свойство text-emphasis

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

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

3.4. Emphasis Mark Position: свойство text-emphasis-position

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

свыше

Рисовать метки поверх текста в горизонтальных типографских режимах.

ниже

Рисовать метки под текстом в горизонтальных типографских режимах.

справа

Рисовать метки справа от текста в режимах вертикальной типографики.

слева

Рисовать метки слева от текста в режимах вертикальной типографики.

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

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

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

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

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

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

 ruby ​​{выделение текста: нет; } 

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

 em { text-emphasis: dot; } /* Установить выделение текста для элементов  */
em rt { дисплей: нет; } /* Скрыть ruby ​​внутри элементов  */
 

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

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

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

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

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

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

5. Рисование текстовых украшений

5.1. Покраска Заказ текстовых украшений

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

• тени (текст-тень)
• подчеркивания (украшение текста)
• надчеркивания (текстовое оформление)
• текст
• знаки выделения (выделение текста)
• сквозной (текстовый декор)

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

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

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

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

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

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

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

 /* типичный стиль HTML */
мигать {
  строка оформления текста: мерцание;
}
с, забастовка, дель {
  оформление текста: сквозное;
}
u, ins, :ссылка, :посетили {
  оформление текста: подчеркивание;
}
аббр [название], акроним [название] {
  оформление текста: подчеркивание пунктиром;
}
/* отключить наследование меток выделения текста на ruby-текст:
  знаки ударения должны применяться только к основному тексту */
rt {выделение текста: нет; }
/* установить соответствующую языку позицию метки акцента по умолчанию */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko] { text-emphasis-position: over right; }
/* установить соответствующую языку позицию подчеркивания по умолчанию */
:root:яз(я), [яз|=я],
:root:яз(мн), [язык|=мн],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left; }
/* auto выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента */
 

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

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

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

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

Изменения по сравнению с рекомендацией-кандидатом

от августа 2019 г.

Изменения включают:

• Уточнить, что text-shadow анимируется как список теней, как box-shadow. (выпуск 4375)
• Четко укажите свойства, применимые к тексту. (выпуск 5303)
• Мелкие редакционные исправления.

Изменения с июля 2018 г. Рекомендация-кандидат

Изменения включают:

• Уточнено, что переполнение оформления текста является переполнением чернил. (выпуск 3272)
• Исправлены несоответствия в примерах правил положения подчеркивания текста. (Выпуск 3441)
• Очищены строки «Вычисленное значение» в соответствии с новыми соглашениями.

Доступно расположение комментариев.

Изменения по сравнению с рекомендацией-кандидатом

от августа 2013 г.

Значительные изменения включают:

• Отложенное оформление текста — переход на уровень 4 для внесения серьезных изменений. Определенные поведенческие по умолчанию в прозе. (Выпуск 1, Выпуск 22, Выпуск 26)
• Указано, что функция пропуска чернил не влияет на проходные линии. (Выпуск 24)
• Рекомендуется, чтобы при пропуске чернил концы строк соответствовали форме глифа. (выпуск 30)
• Обновлены условия, чувствительные к режиму письма, чтобы они зависели от типографского режима, для учета добавления значений sideways-lr и sideways-rl к свойству режима письма. Отмеченная ориентация меток упора под sideways-lr и sideways-rl не определена. (Выпуск 10, Выпуск 20)
• Сделано [право | left ] опция text-emphasis-position необязательна, по умолчанию вправо. (Выпуск 17)
• Сделано text-underline-position подразумевающим auto вместо under когда указано только left или right. (Выпуск 18)
• Изменено оформление текста, чтобы пропустить начальные и конечные пробелы. (выпуск 6)
• Отмечено, что положение рубиновых аннотаций может быть скорректировано чтобы избежать конфликтов с оформлением текста. (Выпуск 21)
• Изменено начальное значение text-shadow на текущий цвет . (Выпуск 28)
• Исправлена ​​ошибка в строке «Расчетное значение» для text-shadow. (Выпуск 7)
• Исправлен канонический порядок значений text-shadow для соответствия реализациям. (выпуск 35)
• Определено расположение меток акцента относительно автоматически скрытых и пустых рубиновых аннотаций. (Выпуск 9)

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

• Выделение текста по умолчанию пропускает пунктуацию. (Выпуск 16)
• Добавлено правило для применения рубина к шрифту выделений. (Выпуск 13)
• Различные исправления и улучшения правил UA по умолчанию для text-emphasis-position и text-underline-position. (Выпуск 11, Выпуск 12, Выпуск 18, Выпуск 19, Выпуск 36)

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительная информация о представлении тестовых примеров и отчетов о внедрении можно найти на веб-сайте Рабочей группы CSS по адресу https://www. w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки [email protected].

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

Имя	Значение	Исходный	Относится к	Инга.	%возраст	Тип анимации	Канонический порядок	Расчетное значение
украшение текста	<'строка-украшения-текста'> || <'стиль оформления текста'> || <'text-decoration-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	на грамматику	см. отдельные свойства
цвет текста-декорации	<цвет>	текущий цвет	все элементы	нет	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
текст-декор-линия	нет | [подчеркнуть || надчеркивание || линейный || мигать]	нет	все элементы	нет (но см. прозу выше)	н/д	дискретный	на грамматику	указанные ключевые слова
стиль оформления текста	сплошной | двойной | пунктирная | пунктир | волнистый	твердый	все элементы	нет	н/д	дискретный	на грамматику	указанное ключевое слово
выделение текста	<'стиль выделения текста'> || <'text-emphasis-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	по грамматике	см. отдельные свойства
цвет выделения текста	<цвет>	текущий цвет	текст	да	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
положение акцента текста	[ более | под ] && [ справа | оставил ]?	справа	текст	да	н/д	дискретный	на грамматику	указанные ключевые слова
стиль выделения текста	нет | [[ заполнено | открыть ] || [ точка | круг | двойной круг | треугольник | кунжут ] ] | <строка>	нет	текст	да	н/д	дискретный	по грамматике	ключевое слово нет, пара ключевых слов, представляющих форму и заливку, или строка
тень текста	нет | [ <цвет>? && <длина>{2,3} ]#	нет	текст	да	н/д	как теневой список	на грамматику	ключевое слово none или список, каждый элемент которого состоит из трех абсолютных длин плюс вычисляемый цвет
подчеркивание текста	авто | [ под || [ слева | Правильно ] ]	авто	все элементы	да	н/д	дискретный	на грамматику	указанные ключевые слова

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

Веб-обзор
июнь 1998 г.

Вы, вероятно, украшали свой дом во время праздников или, возможно, для какой-то крупной вечеринки (выпускной вечер, кто-нибудь?), и поэтому вы знаете, какой серьезной болью могут быть такие проекты. Разворачивание безделушек, нанизывание огней или гофрированной бумаги, уборка … этого достаточно, чтобы вы больше никогда этого не делали.

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

Станция декорирования

Рассматриваемое свойство text-decoration . Его значение по умолчанию — none , что имеет смысл, поскольку нормой для большей части текста является отсутствие какого-либо специального оформления.

Первым рассматриваемым видом украшения является , подчеркивание . Как и следовало ожидать, это приведет к подчеркиванию текста. Если последние три слова в предыдущем предложении подчеркнуты, поздравляем, ваш браузер поддерживает text-decoration ! (Ну, во всяком случае, это большая часть.) Подчеркивание исторически редко использовалось в Интернете, если не считать подчеркивания ссылок.

До появления CSS1 единственным способом добиться подчеркивания было использование тега подчеркивания ( ), который время от времени поддерживался основными веб-браузерами и постоянно отклонялся от спецификации HTML. Начиная с HTML 4.0, тег подчеркивания устарел, что означает, что он полностью исключен из спецификации. Почему? Потому что CSS1 позволяет авторам подчеркивать все, что им нравится, без необходимости использования презентационного тега.

Допустим, у нас есть документ, в котором мы хотим, чтобы все заголовки 4-го уровня были подчеркнуты. Декларация достаточно проста:

 h5 {text-decoration: underline;} 

Это еще один h5

Вот и все — подчеркнутые заголовки 4-го уровня!

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

 h5 {украшение текста: наложение;} 

Это h5

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

 h5 {text-decoration: underline overlie;} 

Это еще один h5

Это демонстрирует один из самых больших моментов в text-decoration 9.0012 : тот факт, что вы можете использовать любое или все его значения в любой комбинации и перечислять их в любом порядке. Ну да ладно, почти все его значения. Если вы используете none , то это единственное значение, которое вы можете использовать. В противном случае используйте их все, если хотите.

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

Моргни, и ты можешь ударить

Поклонники Navigator ликуют: самый известный из когда-либо изобретенных Netscape тэгов попал в спецификацию CSS1. Правильно, одно из значений text-decoration is blink . Он имеет тот же эффект, что и тег , то есть Internet Explorer не поддерживает это значение text-decoration . Согласно спецификации это не требуется; в то время как браузеры должны распознавать значение, им не нужно ничего мигать.

Следовательно, только версии Netscape Navigator с поддержкой CSS1 увидят следующий эффект:

 h5 {text-decoration: blink;} 

Это может быть мигание h5

Мило, не так ли?

Хорошо, это подводит нас к окончательному значению text-decoration , которое равно line-through . Юридические библиотекари во всем мире обрадуются этому, потому что он обеспечивает эффект зачеркивания, столь любимый законодателями во всем мире. Для тех, кто не знаком с зачеркиванием, он просто рисует линию прямо через середину текста, например:

 h5 {text-decoration: line-through;} 

Это пораженный h5

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

Использование украшений в дизайне страницы

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

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

Приведенное выше правило придаст тегу дополнительный акцент .

Еще один способ использовать text-decoration — повлиять на способ отображения якорей. Как вы, наверное, знаете, у большинства людей браузеры настроены на подчеркивание всех гиперссылок, а у других нет. До CSS1 с этим ничего нельзя было поделать. Теперь, однако, вы можете, по крайней мере, попытаться навязать читателю свою особую эстетику гиперссылок, например, так:

 A {украшение текста: нет;}
 

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

Вывод

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

Стилизация подчеркивания с помощью CSS – Tempertemper

Если вы не подчеркиваете свои ссылки, вы должны это сделать. Есть несколько способов подчеркнуть ссылки; text-decoration: underline является наиболее очевидным, так как ссылки оформлены по умолчанию, а border-bottom предлагает нам немного больше гибкости. Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?

Хотя зачем заморачиваться, если у нас и так работает с границами? Что ж, оформление текста: подчеркивание лучше типографски , так как подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (биты букв, которые идут ниже базовой линии в таких буквах, как g , p , и y ), тогда как border-bottom underlines размещает под нижними элементами, что означает слишком большое расстояние между словами и их подчеркиванием, когда.

Мало того, браузеры теперь обнаруживают нисходящие элементы, а подчеркивание text-decoration аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому он включен по умолчанию.

Итак, как мы можем получить визуальное чутье с text-decoration: underline , которое мы всегда имели через border-bottom ?

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

Здесь мы говорим о подчеркивании, но стоит сделать небольшое предисловие: text-decoration-line , точно так же, как text-decoration , имеет 3 позиции:

• Под текст ( подчеркивание )
• Через текст ( через строку )
• Над текстом ( над чертой )

text-decoration-line также допускает несколько значений, поэтому у нас могут быть строки под, через и над одним и тем же блоком текста. Немного странно, но оно есть:

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

Как выглядит подчеркивание

Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:

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

Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. д. Просто добавьте объявление text-decoration-style :

 text-decoration: underline; 
 text-decoration-style: волнистый; 

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

Это здорово. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое нормальное значение цвета CSS, будь то ключевое слово, шестнадцатеричное число, RGB, RGBA, HSL и т. д. :

 украшение текста: подчеркивание; 
 цвет оформления текста: красный; 

Просто убедитесь, что подчеркивание соответствует нужному коэффициенту цветовой контрастности!

Увеличение толщины подчеркивания

Наконец, мы можем контролировать толщину подчеркивания с помощью text-decoration-thickness , например:

 text-decoration: underline; 
 толщина оформления текста: 5px; 

Комбинации

Конечно, мы можем сделать много одновременно:

 украшение текста: подчеркивание; 
 text-decoration-style: волнистый; 
 цвет оформления текста: красный; 
 толщина оформления текста: 5px; 

Или мы можем использовать text-decoration-line вместо text-decoration :

 text-decoration-line: underline; 
 text-decoration-style: волнистый; 
 цвет оформления текста: красный; 
 толщина оформления текста: 5px; 

Сокращение

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

 text-decoration: подчеркнутый волнистый красный; 

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

Постепенное усовершенствование

Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и Internet Explorer 11 и ниже, конечно) должны получить стандартное, но все же очень удобное для пользователя подчеркивание, если в вашем CSS reset нет ничего подобного:

 a { 
 украшение текста: нет; 
 } 

Но имейте в виду, что поддержка браузерами зависит от:

• используемого свойства
• значения в свойстве

Префиксы, необходимые для стенографии

Если вы используете стенографию, вам потребуются префиксы поставщиков для Safari:

 text-decoration: подчеркните волнистой красной линией; 
 -webkit-text-decoration: подчеркивание волнистым красным цветом; 

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

text-decoration-thickness поддерживается не так хорошо, как другие

Поддержка браузером text-decoration-line , text-decoration-style и text-decoration-color довольно хороша . Каждый браузер реализовал все три одновременно, но управление толщиной подчеркивания было введено намного позже. Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).

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

 text-decoration: подчеркивание сплошным красным цветом; 
 text-decoration: подчеркивание сплошным красным 5px; 

text-decoration-thickness и проценты не работают хорошо

Также будьте осторожны, используя процентные значения для толщины, так как их поддерживает только Firefox.

Хорошей новостью является то, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-thickness: 0.1em совпадает с text-decoration-thickness: 10% , поэтому вы можете придерживаться em s, поскольку они делают одно и то же.

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

text-decoration-thickness беспорядка

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

Вопросы удобства использования

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

Так что вы, вероятно, в порядке, если вам нужно:

• подчеркивание другого цвета
• постепенно усиливающееся жирное подчеркивание
• может даже двойное подчеркивание

Но будьте осторожны со всем остальным:

• text-decoration-line: line-through в основном так выглядят элементы с перечеркнутым
• text-decoration-line: overline выглядит странно и может сделать текст над ссылкой вместо ссылки
• волнистый , пунктирный или пунктирный подчеркивания могут выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки

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

Что бы я сделал

В сокращении используются префиксы поставщиков и хитрые двойные объявления, поэтому я бы начал с классического оформления текста : подчеркивание; и улучшить его. Я склонен избегать чего-либо, кроме простого подчеркивания, которое пользователи хорошо знают, поэтому text-decoration-line отсутствует; что оставляет мне всплеск цвета и хороший em 9Толщина на основе 0012 для браузеров, отличных от Chromium:

 a { 
 text-decoration: underline; 
 цвет оформления текста: красный; 
 text-decoration-thickness: 0.1em; 
 } 

Подчеркивание текста CSS | Как использовать свойство положения подчеркивания текста

В этой статье мы узнаем о подчеркивании текста в CSS. Каскадная таблица стилей предназначена для презентации. Чем лучше мы используем стиль, тем более совершенной будет презентация. Сказав это, нужно знать, что существует множество деталей, о которых нужно позаботиться при стилизации с помощью CSS. В качестве простого примера возьмем подчеркивание текста. Теперь простое подчеркивание текста можно выполнить с помощью свойства text-decoration. Но чтобы исправить детализацию, мы должны вникнуть в ее тонкости и исправить свойства позиционирования и смещения. Именно об этом мы и поговорим в этой статье. text-underline-position и text-underline-offset — это улучшенные функции для добавления к подчеркиванию, предоставляемому свойством text-decoration: underline.

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

1. Положение подчеркивания текста: Это свойство определяет положение подчеркивания относительно текста.

Синтаксис для этого:

 положение подчеркивания текста: авто| под | слева| правильно| выше 

Объяснение приведенного выше синтаксиса: Здесь значение автоматически выбирает положение для подчеркивания, а использование значения ниже гарантирует, что строка не пересекает нижние элементы, например, в случае нижних индексов, тогда как значение выше пересекает над спусками. Левое и правое положение подчеркивания такое же, как и в случае, если режим письма для текста горизонтальный. Они используются, когда режим текста переключается на вертикальный. Мы можем решить, будет ли подчеркивание лежать слева или справа от текста.

2. Text-underline-offset:  Это не подсвойство свойства text-decoration. Это свойство устанавливает расстояние смещения подчеркивания относительно его исходного положения. Расстояние смещения здесь означает расстояние от определенного пути.

Синтаксис для этого может быть:

 text-underline-offset: length 

Объяснение к приведенному выше синтаксису:  Здесь длина может быть указана в таких единицах, как em или cm. Они будут определять длину расстояния смещения. Однако это свойство не поддерживается многими браузерами, включая Chrome. Так что лучше обойти это при стилизации текста.

Пример реализации в CSS Text Underline

Ниже приведены примеры реализации для одного и того же:

Пример № 1

Демонстрация положения контура текста со значениями выше и ниже и наблюдение за различиями.

• В этом примере мы проверим text-underline-position с двумя значениями, то есть выше и ниже. Мы можем наблюдать тонкую разницу между двумя значениями свойства в соответствующем выводе.
• Во-первых, мы создадим файл CSS, так как мы используем внешний CSS.
• Мы создадим класс, в котором мы будем использовать сокращенное свойство text-decoration для оформления подчеркивания. Далее мы будем использовать text-underline-position и определим его отдельно. Мы можем добавить другие функции по своему усмотрению. Код класса CSS должен выглядеть так:
.

Код:

 .class1{
оформление текста: подчеркивание двойное зелёное;
позиция подчеркивания текста: под;
семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
} 

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

Код:

 . class2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный код CSS должен быть примерно таким:

Код:

 .класс1{
text-decoration: подчеркивание двойное зелёное;
text-underline-position: под;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Далее мы создадим HTML-страницу. Кроме того, обязательно вызовите внешний файл CSS на странице. Поскольку мы определили классы CSS, мы можем использовать их с любым элементом HTML для применения стиля к этому конкретному элементу. В этом примере мы будем использовать его с элементом заголовка, то есть

  . Окончательный HTML-код должен выглядеть примерно так:

Код:

 
<голова>

 css">

<тело>
Тестирование позиции подчеркивания текста: под
Проверка положения подчеркивания текста: выше

 

Вывод:

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

Пример #2

Демонстрация положения контура текста с режимом письма и наблюдение за разницей значений слева и справа

• В этом примере мы должны четко понимать, что такое режим письма. По сути, это также свойство CSS, которое определяет, как текст должен быть выровнен, то есть по горизонтали слева направо или по вертикали сверху вниз. Теперь, чтобы продемонстрировать значения слева и справа для позиции подчеркивания, мы будем использовать режим вертикального письма.
• Как и в первом примере, мы определим классы CSS для стиля для двух разных значений положения. Первый класс будет закодирован для положения подчеркивания слева. Код должен выглядеть примерно так, как показано ниже:
.

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
} 

• Второй класс должен иметь подчеркивание справа от вертикально выровненного текста. Код должен быть похож на следующий:

Код:

 .class2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный файл CSS должен выглядеть примерно так:

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
. класс2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Конечная HTML-страница должна вызывать внешний CSS и включать оба класса при стилизации элементов. Код HTML-страницы должен выглядеть следующим образом:
.

Код:

 
<голова>



<тело>
Проверка положения подчеркивания текста: слева
Проверка положения подчеркивания текста: выше

 

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

Вывод:

Пример #3

Использование позиции подчеркивания текста во встроенном стиле CSS

• некоторые тексты.

  No related posts.