Html подчеркнутый текст: text-decoration | htmlbook.ru


30.05.1972 Facebook Twitter LinkedIn Google+ Разное


Содержание

text-decoration | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

Версии CSS

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit
Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> a { text-decoration: none; /* Убираем подчеркивание у ссылок */ } a:hover { text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */ } </style> </head> <body> <p><a href="1.html">Стратегическое нападение</a></p> </body> </html>

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

[window.]document.getElementById(«elementID»).style.textDecoration

[window. ]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

text-decoration | CSS | WebReference

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

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

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется text-decoration-line: Нет
text-decoration-style: Нет
text-decoration-color: Да

Обозначения

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

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечёркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчёркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.

Песочница

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-decoration</title> <style> a { text-decoration: none; /* Убираем подчеркивание у ссылок */ } a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении курсора мыши на ссылку */ } </style> </head> <body> <p><a href=»page/1.html»>Стратегическое нападение</a></p> </body> </html>

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

Объект.style.textDecoration

Примечание

Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.

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

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

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

Браузеры

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

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

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

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

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

Последнее изменение: 02.03.2020

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

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

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

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

Вот CSS-код, с помощью которого это можно сделать:

a { text-decoration: none; }

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

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

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

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

Для этого нужно удалить подчеркивание и заменить его свойством border-bottom:

a { text-decoration: none; border-bottom:1px dotted; }

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

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed:

a { text-decoration: none; border-bottom:1px dashed; }

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }

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

a { text-decoration: none; border-bottom:3px double; }

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

a { border-bottom:1px double; }

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline:

a { text-decoration: none; } 
a:hover { border-bottom:1px dotted; }

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

Вадим Дворниковавтор-переводчик статьи «How to Change Link Underlines on a Webpage»

Параметры текста в HTML: шрифты, курсив, жирный и другие

Как запустить видеоурок:
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Приветствую вас в еще одном видеоуроке из курса по HTML от сайта info-line. net. В этом видеоуроке мы разберем еще несколько дополнительных параметров и стилей для текста. Не будем долго рассуждать и перейдем сразу к коду — там вы сами все увидите.

Как изменить шрифт?

Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка h3». Для начала, давайте изменим ему шрифт. Поставим «Verdana».  Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие шрифты. Зачастую их нет на компьютере у пользователя.

 <font face="Verdana, Arial" color="#CC0000"><h3>Текст заголовка h3</h3></font>
 

Как сделать текст курсивом?

Теперь давайте уберем тег <h3> и выделим текст курсивом. Используем теги <i></i>.

 <font face="Verdana" color="#CC0000"> <i>Текст курсивом<i><font>
 

Как сделать текст жирным?

Давайте текст, который прописан у нас курсивом, сделаем жирным, используя теги <b></b>.

 <font size="6" color="#0000FF"><b>Синий цвет</b></font>
 

Как сделать текст подчеркнутым?

А текст заголовка h4сделаем подчеркнутым, используя теги <u></u>.

 <h4><u>Текст заголовка h4</u> </h4>
 

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

Как сделать текст перечеркнутым?

Переходим обратно в код. Давайте сделаем наш центрированный текст перечеркнутым, применяя теги  <s></s>.

 <center><s>Центрированный текст без использования тега p</s> </center>
 

Как сделать текст моноширным?

А текст, помещенный в тег <div> сделаем моноширным (буквы одинаковой ширины), используя теги <tt></tt>.

 <div title="текст"><tt>Какой-нибудь текст, помещенный в тег div</tt> </div>
 

Сохраняем страницу и переходим в браузер.  Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.

Как написать текст в верхнем или нижнем индексе?

Давайте перейдем в код и еще поэкспериментируем с текстом. Допустим, мы хотим написать математическую задачку типа «два плюс два равно два в квадрате». Как нам написать «в квадрате»? Очень просто – используя теги <sup></sup>, что означает «верхний индекс». Если нам понадобится написать нижний индекс, то в этом случае мы воспользуемся тегами <sub></sub>. Они отличаются от предыдущих последней буквой.

 <div title="текст"><tt>2+2=2<sup>2</sup></tt></div>
 <h4><u>Текст заголовка H<sub>3</sub></u> </h4><font face="Verdana" color="#CC0000"> <i>Текст курсивом<i><font>
 

Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка h4»  цифра «3» изображена в нижнем индексе.

Как сделать текст большим и маленьким?

Есть еще два тега, изменяющие текст. Они довольно редко используются, однако я вам их покажу. Например, мы хотим сделать «Синий цвет» чуть меньше. Используем теги  <small></small>.

 <font size="6" color="#0000FF"><b><small>Синий цвет</small></b></font>
 

А «Центрированный текст без использования тега p» — чуть больше. Используем теги <big></big>.

 <center><s><big>Центрированный текст без использования тега p</big></s> </center>
 

В переводе «big» означает «большой», а «small» — «маленький».

Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.

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

SVG. Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>
Этот кот в SVG

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

Как и в HTML, лишние пробелы игнорируются.

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

Атрибуты

  • direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
  • dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
  • fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
  • font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
  • font-size — Размер шрифта. Значение по умолчанию 12 пт.
  • font-size-adjust — Значение по умолчанию — none
  • font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  • font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
  • font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
  • glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
  • kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
  • letter-spacing — Интервал между буквами. Возможные значения: normal | число
  • text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
  • text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
  • unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
  • word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
  • writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
  • x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
  • y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>
Подчеркнутый кот средствами SVG

Частичная стилизация через <tspan>

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


<svg xmlns="http://www. w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan>Жирный кот</tspan>, 
  <tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>.</text>
</svg>
Жирный кот, наклонный кот и подчеркнутый кот.

Цвет

Цвет текста задаётся через свойство fill.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>
Цветной кот

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.


<svg xmlns="http://www.w3.org/2000/svg">
  <text x="70" y="20">Неко - японский кот</text>
</svg>
Неко — японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:


header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}

<header>
    <svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

SVG будет автоматически подстраиваться под размеры контейнера.

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

SVG-текст можно сделать ссылкой.


<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

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

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


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>
Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>
Градиентный кот

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>
Кот вдоль кривой

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Реклама

Оформление текста — Yandex Wiki. Справка

Выделение текста

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

Разметка Результат
**Полужирный текст**
*Курсив*
_Курсив_
__Подчеркнутый текст__
~~Зачеркнутый текст~~
??Выделенный текст??
!!(син)Текст синего цвета!!

Поддерживаются цвета:

  • red / крас / красный;

  • green / зел / зеленый;

  • blue / син / синий;

  • grey / gray / сер / серый;

  • yellow / жел / желтый;

  • cyan / голуб / голубой;

  • orang / оранж / оранжевый;

  • violet / фиолет / фиолетовый.

Разметка Результат
**Полужирный текст**
*Курсив*
_Курсив_
__Подчеркнутый текст__
~~Зачеркнутый текст~~
??Выделенный текст??
!!(син)Текст синего цвета!!

Поддерживаются цвета:

  • red / крас / красный;

  • green / зел / зеленый;

  • blue / син / синий;

  • grey / gray / сер / серый;

  • yellow / жел / желтый;

  • cyan / голуб / голубой;

  • orang / оранж / оранжевый;

  • violet / фиолет / фиолетовый.

Сочетание элементов оформления

К одному фрагменту текста можно применить сразу несколько элементов оформления:

Разметка Результат
_**Полужирный курсив**_
*!!Красный курсив!!*
Разметка Результат
_**Полужирный курсив**_
*!!Красный курсив!!*

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

Разметка Результат
**[Полужирная ссылка](http://example. com)**
>Цитата с *курсивом*
Разметка Результат
**[Полужирная ссылка](http://example.com)**
>Цитата с *курсивом*

Всплывающая подсказка

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

Разметка Результат
(?Термин Определение термина?)
(?Термин с пробелами==Определение термина?)
Разметка Результат
(?Термин Определение термина?)
(?Термин с пробелами==Определение термина?)

Фразовые теги в HTML.

Размечем тексты с помощью фразовых… | by Tatiana Fokina

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

К тегам визуального форматирования относятся:

  • <span>;
  • <mark>;
  • <br> и <wbr>;
  • <i>;
  • <b>;
  • <sup> и <sub>;
  • <ruby>;
  • <u>;
  • <s>.

А это список тегов логического форматирования:

  • <a>;
  • <em>;
  • <strong>;
  • <cite>;
  • <code>;
  • <abbr>;
  • <dfn>;
  • <ins>;
  • <del>;
  • <q>;
  • <kbd>;
  • <samp>;
  • <var>;
  • <time>;
  • <small>;
  • <bdi> и <bdo>.

Сейчас расскажу подробнее о каждом фразовом элементе.

<span></span>

span — это контейнер для текста.

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

Со span можно использовать атрибуты class="", title="", lang="" и xml:lang="". Последний — это аналог lang в XHTML-документах.

-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в <span>страшное насекомое</span>.-- CSS --
.scary {
color: tomato;
}

Так отобразится этот текст в браузере:

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

Это исключение — трюк с атрибутом lang="". Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

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

<html lang="ru">
...
<body>
...
...
<p>Я больше не мёрджу бездумно. Как говорится, <span lang="en"> enough is enough</span>.
</p>

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

<br> и <wbr>

br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.

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

Это одиночный тег и его не нужно закрывать.

Я сидел на пустом берегу.<br>Голубая вода Онтарио отражала череду моих мыслей —<br>Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.

В браузере этот текст выглядит так:

wbr (word break opportunity) ставит потенциальный разрыв строки.

Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr. Он подходит для случаев, когда вы не уверены в месте переноса строки.

wbr тоже одиночный тег.

Сэло не удивился, узнав, что солнечные пятна действуют на его друзей, попавших в хроно<wbr>-синкластический инфундибулум.

Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.

Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса &shy; (-):

Эйя&shy;фьядла&shy;йёкюдль

Перенос сработает, когда ширина контейнера уменьшится.

<a></a>

a — ссылка.

С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.

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

<a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибар</a>

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

Автоматический стиль ссылки в ChromeСтиль ссылки в FirefoxСсылка в Internet Explorer 11Ссылка в Microsoft Edge

Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.

Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:

<a href="/speaking-engagements/">
<b>A List of My</b>
Speaking
<b>Engagements</b>
</a>

В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden;.

При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target="".

В примере ссылке задано значение _blank. Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel="noopener noreferrer". Это поможет пользователям избежать фишинговых атак.

Якорные ссылки — это ссылки внутри одного документа.

Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id="". Для якоря укажите путь через атрибут href="#нужный-id". Ссылку для скринридеров можно описать в атрибуте aria-label="". Закрепим на примере:

В следующем <a href="#fat-cat" aria-label="Стрижка котов">параграфе</a> я подробнее расскажу о том, как правильно стричь кошек в теле. <a>Грумминг толстых котов</a>

Тег a — важная часть логической разметки.

<em></em> и <i></i>

em (emphasis) — эмфатическое ударение.

Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.

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

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

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

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

-- Пример 1 --
Нет, это <em>он</em> выложил релиз в прод (не я).-- Пример 2 --
Да, мне <em>определённо</em> не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. <em>Нам нужно срочно эвакуироваться!</em>

Текст внутри em выделяется курсивом.

Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.

i (italic) делает текст наклонным.

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

-- Пример 1 --
<i>Низкоуровневый язык программирования</i> — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора. -- Пример 2 --
Пришлось читать документацию, <i lang="fr">c'est la vie</i>.

Такой текст выделяется курсивом:

Если пишите слова на иностранном языке, то для i можно задать атрибут lang="" или xml:lang="" в XHTML-документах. Это поможет скринридерам и поисковым роботам.

Я работаю простым <i lang="en">cleaning manager</i>.

👉 Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using <em> wrong».

<strong></strong> и <b></b>

strong — логическое ударение.

Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.

С помощью strong подчёркивают важность слов и предложений.

Придумайте пароль. Не 1234 или qwerty.  <strong>Никому не сообщайте его!</strong>

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

b (bold) делает текст полужирным.

Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong.

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

Играю в <b>The Elder Scrolls</b> со времён пылевых бурь и скальных наездников.

В браузере строчка отобразится так:

👉 strong нужен для логического форматирования, а b — для визуального.

<mark></mark>

mark — контекстное выделение текста.

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

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

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

-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая <mark>фосфоресценция</mark>, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «<mark>Все мои знакомые говорят</mark>, что пользуются YotaPhone и ездят на ё-мобилях».

Хотя с точки зрения семантики mark более значим, чем span, это всё равно тег визуального форматирования.

mark автоматически заданы стили background-color: yellow; и color: black;.

<s></s>

s зачёркивает текст.

Используйте s, когда нужно зачеркнуть неправильный или устаревший текст. Это может быть старая цена или неактуальное предложение. Олдскульные любители форумов и Хабра используют перечёркивание в шутках, построенных на оговорке.

2+2=<s>5</s> 4

К s применяется свойство text-decoration: line-through;.

Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content.

Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through;.

-- HTML --
Невероятное предложение! Коробок спичек всего за <span>1000 $</span> 999 $.-- CSS --
.crossout {
text-decoration: line-through;
}

В браузере строка отображается так:

Раньше тексты можно было зачеркнуть с помощью тега strike. Сейчас он исключён из спецификации.

👉 s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del.

<u></u>

u (underline) подчёркивает текст.

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

Во втором случае в тег взято название страны 德國 — Германии.

-- Случай 1 --
Мышь (кр<u>о</u>дётся).-- Случай 2 --
我來自<u>德國</u>。

К содержимому u применяется свойство text-decoration: underline;.

Этот тег отвечает за визуальное форматирование.

👉 Не используйте u, если подчёркнутый текст можно перепутать со ссылкой.

<ins></ins> и <del></del>

ins (insert) определяет добавленный в документ текст.

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

С этим тегом можно использовать атрибуты cite="" и datetime="". Вcite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.

<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.</ins>

Браузер подчеркнёт этот текст.

del (delete) определяет удалённый или потерявший актуальность текст.

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

Для del доступны те же атрибуты, что и для ins: cite="" и datetime="".

<del>Маск не запустит Falcon Heavy. </del>

В браузере текст отобразится как зачёркнутый.

Когда в документе заменяют часть содержимого, то ins используют вместе с del.

<del>Маск вряд ли запустит Falcon Heavy.</del> 
<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.</ins>

Этот код глазами браузера.

ins и del нужны для логического форматирования.

<q></q>

q (quote) — короткая цитата.

Используйте q, когда дословно цитируете кого-то в предложении.

Для q можно задать атрибут cite="", в котором указывается источник цитаты.

Митник прав: <q cite="https://www.livelib.ru/book/1000092721-iskusstvo-obmana">Это естественно — стремиться к абсолютной безопасности, но это желание заставляет многих людей соглашаться с ложным чувством защищённости</q>. 

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

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

q {
display: inline;
}q:before {
content: open-quote;
}q:after {
content: close-quote;
}

Так браузер отобразит текст внутри q.

Отображение <q></q> в Chrome

Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.

q {
quotes: "\201c" "\201d";
}

Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».

Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”;.

q {
quotes: "\00ab" "\00bb";
}

Вуаля.

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

<cite></cite>

cite — источник цитаты.

Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b.

Аарон Густафсон написал книгу <cite>Adaptive Web Design</cite> в 2011 году. В ней он …

Содержимое тегаcite отображается по умолчанию курсивом.

Тег cite семантический.

<abbr></abbr>

abbr (abbreviation) — аббревиатура или акроним.

Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.

Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.

В abbr можно можно раскрыть аббревиатуру в атрибуте title="".

<abbr title="Hypertext Markup Language">HTML</abbr> — это стандартизированный язык разметки документов в вебе. 

Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.

В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title="".

<dfn>Hypertext Markup Language (HTML)</dfn> — это стандартизированный язык разметки документов в вебе.

Тег abbr семантический.

Помните, одна аббревиатура — один abbr. Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.

👉 Раньше для акронимов использовали отдельный тег acronym, но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.

<dfn></dfn>

dfn (definition) — термин.

Используйте этот тег для терминов, которые упоминаете впервые.

В dfn можно вкладывать abbr, если это термин-аббревиатура.

<dfn><abbr>HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

Вместе с dfn можно использовать атрибут title="". В нём приводится определение термина.

Во втором примере в dfn вложен abbr. В этом случае аббревиатура раскрывается в атрибуте title="".

-- Пример 1 --
<dfn>Капибара</dfn> — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

В браузере текст станет наклонным.

dfn — тег логического форматирования.

<code></code>

code — фрагмент компьютерного кода.

Используйте code для названий элементов языков программирования или целых строк кода.

Тег <code>code</code> используется для того, чтобы показать фрагмент JS-кода.

Отображается как текст, написанный моноширинным шрифтом.

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

<pre>
<code> ul
each val in [1, 2, 3, 4, 5]
li= val
</code>
</pre>

Получим такое форматирование:

Тег code нужен для логического форматирования.

<samp></samp>

samp (sample) — результат вывода компьютерной программы или скрипта.

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

<p>Поиск выполнен.</p>
<p>
<samp>Обработано объектов: 82.<br>
Найдено подходящих объектов: 2.
</samp>
</p>

Браузеры сделают текст моноширинным.

samp можно комбинировать с pre и code.

<pre>
<code>console.log(2.3 + 2.4)<br></code>
<samp>4.699999999999999</samp>
</pre>

Получим такой текст:

samp — тег логического форматирования.

👉 Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.

<kbd></kbd>

kbd (keyboard) — названия клавиш.

Используйте kbd, если пишите названия клавиш и голосовые команды.

Чтобы выйти, нажмите сначала <kbd>Esc</kbd>, потом <kbd>:</kbd>, затем <kbd>q</kbd> и <kbd>Enter</kbd>.

Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.

Скопируйте, нажав <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.

Текст внутри kbd написан моноширинным шрифтом.

kbd может содержать тег samp или быть вложенным в него.

В kbd вкладывают samp, если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:

Найдите пункт с настройками по пути
<kbd>
<kbd><samp>File</samp></kbd> →
<kbd><samp>Settings</samp></kbd>
</kbd>

Так отобразит текст браузер.

В samp вкладывают kbd, когда нужно показать как система интерпретировала пользовательский ввод.

<p>
<samp>yarn start:theproject does not exist, did you mean:</samp>
</p>
<blockquote>
<samp>
<kbd>yarn start:the-project</kbd>
</samp>
</blockquote>

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

Тег kbd нужен для логического форматирования.

<var></var>

var (variable) — переменная.

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

-- Пример 1 --
У нас есть <var>число 1</var> и <var>число 2</var>.-- Пример 2 --
Она написала <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Браузеры выделят var курсивом.

👉 Для сложных математических формул и расчётов используйте специальный язык разметки MathML.

<small></small>

small — дополнительная информация.

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

<p><small>© 2013-2018, команда капибар</small></p>

Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller;, которое уменьшает шрифт на одну условную единицу.

Можно вкладывать один тег small в другой.

<p>Всем, всем, всем!
</p>
<p>
<small> У нас самая выгодная ставка по ипотеке.
<small>Предложение действительно, если ваш доход выше 100 веточек в месяц.
</small>
</small>
</p>

В этом случае размер текста будет меньше с каждым уровнем вложенности.

👉 Раньше small использовался для физического форматирования вместе с big. В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.

<sup></sup> и <sub></sub>

sup (superscript) — надстрочный текст.

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

-- 1 пример --
В день нужно платить всего 0,666 % <sup>*</sup>-- 2 пример --
a<sup>n</sup> × a<sup>k</sup>= a<sup>n+k</sup>

Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller;.

sub (subscript) — подстрочный текст.

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

H<sub>2</sub>SO<sub>4</sub>

Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller;.

👉 Для сложных математических формул используйте язык разметки MathML.

<ruby></ruby>

ruby — верхняя или нижняя текстовая аннотация.

Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.

В теге указывается, как произносятся иероглифы в китайском, японском и других восточно-азиатских языках.

Внутрь ruby вкладываются теги rt и rp.
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby. Если браузер поддерживает ruby, то текст не отобразится.

<ruby>  
東 <rt>tō</rt>
京 <rt>kyō</rt>
</ruby>

Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.

Токио!

Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.

<ruby>
<ruby>東
<rt>とう</rt>南
<rt>なん</rt>
</ruby>
<rt lang=en>Southeast</rt>
</ruby>の方角

Текст в браузере отобразится так:

«Юго-восточное направление»

Тег ruby нужен для визуального форматирования.

<bdo></bdo> и <bdi></bdi>

bdo (bi-directional override) — изменение направления текста.

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

В bdo обязательно нужно указывать атрибут dir="", который задаёт направление текста:
rtl — справа налево;
ltr — слева направо.

<bdo dir="rtl">קביברה</bdo> в переводе с иврита означает «капибара».

В браузере предложение выглядит так:

bdi (bi-directional isolate) — отмена изменения направления текста.

Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.

В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.

-- HTML --
<div><bdi>C++</bdi> היא שפת תכנות מרובת פרדיגמות המבוססת על שפת התכנות C‏, שפותחה בשנות ה־80.-- CSS --
.content-rtl {
direction: rtl;
}

По умолчанию для bdi задан атрибут dir="auto".

Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate;. Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi.

👉 На сентябрь 2018 bdi поддерживается браузерами частично.

<time></time>

time — дата и время в машиночитаемом формате.

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

Этот тег не стоит использовать, если:

Внутри time можно использовать несколько атрибутов:
datetime="" — дата и время в машиночитаемом формате;
pubdate="" — дата публикации документа;
title="" — дополнительная информация.

Время указывается внутри time или в атрибуте datetime. Во втором примере в datetime указаны число и месяц.

-- Пример 1 --
<time>2 ноября 2018 года</time>.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в <time datetime="09-07">в эту пятницу</time>.-- Пример 3 --
Мем опубликован <time title="Понедельник, 12-50">7 часов назад</time>.

Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.

Формат времени в datetime="" жёстко определён.

  • Год: 1985.
    Должен состоять из четырёх и более цифр.
  • Год и неделя: 1984-W38.
    W — номер недели.
  • Год и месяц: 1985-10.
  • Год, месяц, день: 1985-10-25.
  • Месяц и день: 10-25.
  • Часы и минуты: 1:15.
  • Часы, минуты, секунды: 1:15:39.
  • Часы, минуты, доли секунд: 1:54:39.929.
    Доли нужно округлять до трёх знаков.
  • Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
  • Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
    Двоеточие можно не использовать.
  • Местная дата и время: 1985-10-25T1:15Z.
  • Временной интервал: P2T4h28M3S.
    P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать.
  • Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
    w — недели, d — дни, h — часы, m — минуты, s — секунды.
    Можно писать слитно, а буквы могут быть в любом регистре.

В спецификации есть полный список форматов записи времени.

time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.

Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет <time>16:00</time> как «16:00時». «時» означает «час».

И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.

Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.

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

Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.

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

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

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

HTML Underline Text – как использовать тег с кодом примера

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

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

Что такое тег

?

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

Стиль по умолчанию для этого элемента — одинарное подчеркивание.

Давайте рассмотрим несколько примеров использования тега .

Как использовать тег

для слов с ошибками

Обычно этот тег используется для указания слов с ошибками.

  

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

Вы также можете использовать тег , если хотите пометить китайский текст как знак имени собственного. Согласно Википедии,

a знак имени собственного (упрощенный китайский: 专名号, zhuānmínghào; традиционный китайский: 專名號) — это подчеркивание, используемое для обозначения имен собственных, таких как имена людей, мест, династий, организаций.
  

Это пример знака имени собственного:书名号

Как использовать CSS для изменения стиля тега

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

  

В этом предложении так мэнни написаны ошибки.

  body {
  семейство шрифтов: Verdana, без засечек;
}
u.правописание {
  оформление текста: подчеркивание красной волнистой линией;
}  

Избегайте использования тега

в целях стилизации

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

  Этот текст был оформлен с помощью CSS.  
  .underline {
  оформление текста: подчеркивание;
}  

Не используйте тег

для названий книг

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

  

В старшей школе мне нравилось читать Великого Гэтсби.

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

Заключение

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

Менее распространенным примером может быть использование тега в знаках имени собственного на китайском языке.

Никогда не используйте тег для стилизации.Вместо этого вы должны использовать text-decoration:underline; в вашем CSS.

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

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

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

Свойство text-decoration-line используется для подчеркивания текста. Это свойство имеет три значения: надчеркнутое, подчеркнутое, или сквозное . Итак, значение underline используется для подчеркивания текста в CSS. Это значение рисует подчеркивание под встроенным текстом.

Пример

<голова> украшение текста <стиль> ч2 { цвет синий; } тело { выравнивание текста: по центру; } п{ размер шрифта: 25px; } # р1 { оформление текста: подчеркивание; цвет оформления текста: синий; } <тело>

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

<дел>

Привет! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. Никто не совершенен в этом мире, и нет ничего вечно лучшего. Но мы можем попытаться стать лучше.

Протестируйте сейчас

Выход

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

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

Пример

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

<голова> украшение текста <стиль> ч2 { красный цвет; } тело { выравнивание текста: по центру; } п{ размер шрифта: 25px; } охватывать { оформление текста: подчеркивание; цвет оформления текста: красный; стиль оформления текста: двойной; } <тело>

Добро пожаловать в

javaTpoint. ком <дел>

Привет! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На сайте javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. В этом мире нет совершенных людей, и нет ничего лучшего навечно. Но мы можем попытаться стать лучше.

Протестируйте сейчас

Выход


HTML u Tag — Изучите HTML

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

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

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

Текст в теге подчеркнут (если вы не присвоите ему другой стиль).

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

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

Если вы хотите добавить текстовые аннотации, используйте тег .

Синтаксис¶

Элемент идет парами. Содержимое записывается между открывающим () и закрывающим () элементами.

Пример тега HTML

: ¶
  

  <голова>
    Название документа
  
  <тело>
    

Здесь мы использовали символ <u> элемент.

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

Результат¶

Пример свойства CSS text-decoration: ¶

  

  <голова>
    Заголовок документа.
    <стиль>
      охватывать {
        оформление текста: подчеркивание;
      }
    
  
  <тело>
    

Здесь мы использовали свойство CSS text-decoration:underline.

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

Атрибуты¶

Тег поддерживает глобальные атрибуты и атрибуты событий.

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром и регистром текста.
  • Свойство CSS text-decoration задает украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге

:
  • Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о неотображаемом переполненном содержимом.
  • Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства тега

, на которые стоит обратить внимание:

Обманите свой текст — создайте свои первые веб-страницы с помощью HTML и CSS

https://vimeo.com/270703355

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

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

font-weight

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

Эй! Разве во второй части этого курса мы не узнали, что для выделения текста жирным шрифтом достаточно обернуть содержимое HTML-тегами ?

Верно! Однако помните, что HTML является семантическим маркером p для вашего контента, а CSS управляет его внешним видом . Элементы по умолчанию выделены полужирным шрифтом, но их следует использовать только в том случае, если контент, который вы пишете, носит выразительный характер. Иногда вам может потребоваться более крупный шрифт только для внешнего вида, а не для выразительного содержания.Вместо этого используйте свойство font-weight!

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

  <навигация>
    <ул>
        
  • Главная
  • О нас
  • Блог
  • Контакты
  • Панели навигации иногда кодируются как списки в формате HTML, иногда нет.Быстрый поиск в Google покажет множество способов создания навигации.

    вес шрифта можно установить несколькими способами. Это может быть:

    • слово типа «обычный» или «жирный»

    • числовое значение, например 400 (для нормального начертания), 700 (для полужирного) или число между

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

      а {
        вес шрифта: нормальный;
    }  

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

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

    Как упоминалось выше, вы также можете установить числовое значение толщины шрифта (где 400 = обычный, а 700 = полужирный). Вы также можете установить размер шрифта менее 400, что часто дает хороший результат, но зависит от используемого шрифта:

      a {
        вес шрифта: 200;
    }  
    стиль шрифта

    Мы не можем говорить о полужирном тексте, не говоря о курсиве! Чтобы выделить текст курсивом, вы будете использовать свойство font-style. Его также можно комбинировать со свойством font-weight, если хотите:

      a {
        стиль шрифта: курсив;
        вес шрифта: 200;
    }  

    Свойство font-style имеет еще два возможных значения: normal и oblique.Наклонный текст отдаленно напоминает курсив, но занимает больше места по горизонтали. Вы будете редко использовать его.

    text-decoration

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

    Вы должны использовать CSS для выполнения этого, несмотря ни на что. Вам поможет свойство text-decoration.

    Может принимать несколько значений:

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

    • нет

    • сквозной

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

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

    Нарисуйте линию через текст, используя свойство line-through (причудливо!):

      a {
        оформление текста: сквозное;
    }  

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

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

    Еще один полезный визуальный прием — изменить все буквы на прописные или строчные. Это может быть достигнуто без изменения вашего HTML. Обработайте это в CSS, используя свойство text-transform.

    При использовании свойство text-transform чаще всего принимает одно из следующих значений:

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

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

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

    приятный визуальный эффект:

      {
        вес шрифта: 200;
        семейство шрифтов: Helvetica;
        текстовое оформление: нет;
        преобразование текста: верхний регистр;
        цвет: #151814;
    }  
      а {
        вес шрифта: 200;
        семейство шрифтов: Helvetica;
        текстовое оформление: нет;
        преобразование текста: нижний регистр;
        цвет: #151814;
    }  
    Стили на основе статуса

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

    Введите псевдоклассы CSS . Несмотря на научно-фантастическое название, их синтаксис прост! Просто добавьте двоеточие и имя псевдокласса к выбранному элементу.

    В этой главе мы рассмотрим лишь несколько псевдоклассов, которые обычно применяются к ссылкам:

    Полный список псевдоклассов можно найти здесь: https://developer.mozilla.org/en-US/ docs/Web/CSS/Pseudo-classes 

    :visited

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

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

    Давайте применим новый цвет посещенной ссылки к приведенному выше примеру навигации, где пользователь уже щелкнул ссылку «Контакты»:

      a:visited {
        цвет: #858C7B;
    }  

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

    :hover

    Когда пользователь наводит курсор на такие элементы, как кнопки или ссылки, может быть полезно визуальное изменение элемента. Используйте псевдокласс «hover», чтобы применить это изменение к любому элементу!

    В следующем примере панели навигации, когда пользователь наводит курсор на ссылку, цвет ее фона изменится, а ее текст будет прописным (это снимок экрана, сделанный при наведении курсора на кнопку «Домой»):

      a :наведите {
        цвет: #151814;
        цвет фона: #DFFFD6;
        преобразование текста: верхний регистр;
        вес шрифта: нормальный;
    }  

    :active

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

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

      a:active {
        цвет фона: #F3FFE1;
    }  

    Правило CSS: если вы их используете, вы должны указывать псевдоклассы в определенном порядке.Этот порядок :visited, :hover, а затем :active.

    Практика!
    Упражнение 1

    Сначала поэкспериментируйте с этим примером в CodePen!

    Упражнение 2

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

    1. В коде CSS добавьте свойство text-transform к элементам li , чтобы сделать весь текст прописным или строчным.

    2. Добавьте font-weight по вашему выбору к элементам li . Он должен отличаться от обычного веса шрифта, например 300 или обычный .

    Продвигайтесь дальше с формами и таблицами

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

    Подчеркивание текста или пробелов

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

    Вы можете подчеркивать пустые места, нажимая Shift+Дефис (-), но выровнять подчеркивания – сложно, например, если вы создаете заполняемую форму.Кроме того, если включен параметр автоформатирования для преобразования символов подчеркивания в линии границ, нажатие Shift+дефис (-) три или более раз подряд приведет к созданию линии, которая расширяет ширину абзаца, что может быть не так, как вы хотели. хотеть.

    Лучший способ подчеркнуть пустые места в печатном документе — использовать клавишу Tab и применить форматирование подчеркивания к символам табуляции.

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

    Подчеркивание пробелов в печатном документе

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

    1. Перейдите к Домашняя страница > Показать/скрыть ¶ , чтобы вы могли видеть метки, обозначающие пробелы и позиции табуляции.

    2. Нажмите клавишу Tab.

    3. Выберите символы табуляции, которые вы хотите подчеркнуть. Символ табуляции выглядит как маленькая стрелка.

    4. Выполните одно из следующих действий:

      • Нажмите Ctrl+U, чтобы применить простое подчеркивание.

      • Чтобы применить другой стиль подчеркивания, перейдите на Главная и выберите Шрифт средство запуска диалогового окна.

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

    Подчеркивание пробелов для онлайн-документа

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

    1. Щелкните или коснитесь того места, где вы хотите вставить пустое подчеркивание.

    2. Перейти к Вставить > Таблица .

    3. Выберите левое верхнее поле, чтобы вставить таблицу 1x1 .

      Если вы хотите добавить вводный текст, например, имя или номер социального страхования, перед подчеркиванием вставьте Таблицу 2x1 .

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

    4. Щелкните или коснитесь таблицы (или второй ячейки таблицы, если вы создали таблицу 2x1).

    5. Появится Табличные инструменты . На вкладке Design выберите Borders > Borders and Shading .

    6. В разделе Настройка выберите Нет .

    7. В разделе Стиль выберите нужный тип линии, цвет и ширину.

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

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

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

    Удалить подчеркивание

    Чтобы убрать одиночное подчеркивание слов и пробелов, выделите подчеркнутый текст и нажмите Ctrl+U.

    Чтобы удалить другие стили подчеркивания, дважды нажмите Ctrl+U.

    10 фрагментов CSS для создания потрясающих анимированных эффектов подчеркивания текста

    Подчеркивание CSS по умолчанию отлично работает.Кто мог ненавидеть это?

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

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

    Набор инструментов веб-дизайнера

    Неограниченные загрузки: шаблоны HTML и Bootstrap, темы и плагины WordPress и многое, многое другое!

    1.Чередующееся подчеркивание

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

    Не только это, но и динамическое перемещение по навигации, чтобы создать иллюзию, что это один единственный блок. Довольно круто, верно?

    Вы можете сделать все это самостоятельно с помощью CSS, добавив подчеркнутый блок в элемент HTML. Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS).

    2. Объединение нескольких строк

    Стили разрыва строки в CSS

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

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

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

    3. Скользящее подчеркивание

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

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

    4. Лучшее подчеркивание текста

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

    В лучшем подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

    5.Стили анимации

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

    Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых общих переходах CSS:

    • Справа налево
    • Слева направо
    • Анимация наружу
    • Анимация внутрь

    Вы заметите, что это работает с обычными переходами CSS3, которые работают как при наведении на ссылку, так и при перемещении курсора за пределы ссылки.

    Определенно есть классные эффекты, и их довольно легко портировать в ваши собственные проекты.

    6. Дополнительные стили анимации

    Вот еще один набор пользовательских анимаций подчеркивания, созданных разработчиком Kseso.

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

    7. Просто зашел

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

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

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

    8. Расширение анимации

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

    Обратите внимание, что он использует функцию cube-bezier() для создания уникальной анимации при наведении.

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

    9. Пользовательские подчеркивания CSS

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

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

    Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди остальных, этот набор — отличное начало.

    10. Установка между спусковыми устройствами

    Ранее я упоминал о настройке стилей подчеркивания, чтобы они соответствовали выносным элементам шрифта.Эта ручка Джонатана Нила делает именно это и использует только HTML5 и CSS3.

    Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

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

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

    11. Пользовательские градиенты

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

    Градиент проходит через CSS3, так что вы можете менять цвета на любые, какие захотите. И если вы можете в это поверить, эта штука не требует без дополнительного HTML для работы. Просто выберите нужные якорные ссылки и скопируйте/вставьте коды CSS, чтобы получить свои собственные градиентные подчеркивания.

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

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

    Подчеркнутый текст - Веб-руководство

    Воспроизведение видео с подчеркнутым текстом

    Стенограмма видео

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

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

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

    Так что же вы можете сделать вместо этого?

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

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

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

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

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

    Вот два шага, чтобы реализовать эту концепцию на практике.

    Шаг 1: Решите, что важно!

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

    Шаг 2. Добавьте сильный заголовок в начало важного раздела

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

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

    Чтобы узнать больше о доступности веб-сайтов, посетите веб-руководство штата Бойсе, отправьте электронное письмо по адресу [email protected] или позвоните нам по телефону (208) 426-5628.

    .
    Comments