Подчеркивание текста в css: Нестандартное подчёркивание текста на чистом CSS. Свойство text-decoration — журнал «Доктайп»

Изменение свойств текста

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

---

Стиль этого текста изменен при помощи свойств форматирования текста. В заголовке используются свойства text-align, text-transform и color. У параграфа заданы отступы, выравнивание и расстояние между символами.

---

Цвет текста

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

Цвет можно задать как

• имя цвета — например, «red»,
• HEX значение — например, «#ff0000»,
• RGB значение — например, «rgb(255,0,0)»,
• HSL значение — например, «hsl(0,100%,50%)»,

Цвет текста страницы по умолчанию определяется в селекторе body.

body {
  color: blue;
}
h2 {
  color: green;
}

Цвет текста и фона

В следующем примере мы определяем цвет текста при помощи свойства color и цвет фона при помощи свойства background-color:

body {
  background-color: lightgrey;
  color: blue;
}
h2 {
  background-color: black;
  color: white;
}
div {
  background-color: blue;
  color: white;
}

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

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

Изменение регистра букв текста

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

• text-transform: capitalize — переводит первые буквы всех слов в верхний регистр.
• text-transform: uppercase — переводит все буквы в верхний регистр.
• text-transform: lowercase — переводит все буквы в нижний регистр.
• text-transform: none — попробуйте сами это значение.

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

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

К этому разделу относятся следующие свойства:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

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

Свойство text-align

выравнивает текст внутри элемента по горизонтали.

Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

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

h2 {
  text-align: center;
}
h3 {
  text-align: left;
}
h4 {
  text-align: right;
}

Когда свойству text-align установлено значение justify, то строки растягиваются таким образом, чтобы их ширина была одинаковой (как в газетах и журналах):

div {
  text-align: justify;
}

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

p.a {
  text-align-last: right;
}
p.b {
  text-align-last: center;
}
p.c {
  text-align-last: justify;
}

Направление текста

Свойства direction и unicode-bidi используются для изменения направления текста элемента:

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

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

Свойство vertical-align определяет вертикальное выравнивание элемента.

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

img.a {
  vertical-align: baseline;
}
img.b {
  vertical-align: text-top;
}
img.c {
  vertical-align: text-bottom;
}
img.d {
  vertical-align: sub;
}
img.e {
  vertical-align: super;
}

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

К свойствам декоративного оформления текста относятся

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

---

Добавление декоративной линии

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

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

• overline — помещает горизонтальную линию над текстом
• line-through — помещает горизонтальную линию через текст, создавая эффект перечеркивания
• underline — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст — ссылка.

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

h2 {
  text-decoration-line: overline;
}
h3 {
  text-decoration-line: line-through;
}
h4 {
  text-decoration-line: underline;
}
p {
  text-decoration-line: overline underline;
}

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

Определение цвета декоративной линии

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

h2 {
  text-decoration-line: overline;
  text-decoration-color: red;
}
h3 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}
h4 {
  text-decoration-line: underline;
  text-decoration-color: green;
}
p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Определение стиля декоративной линии

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

h2 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
h3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}
h4 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
p.  ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Определение толщины декоративной линии

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

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}
h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}
h4 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}
p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Короткая форма записи

Свойство text-decoration позволяет объединить следующие свойства:

• text-decoration-line (обязательно)
• text-decoration-color
• text-decoration-style
• text-decoration-thickness

h2 {
  text-decoration: underline;
}
h3 {
  text-decoration: underline red;
}
h4 {
  text-decoration: underline red double;
}
p {
  text-decoration: underline red double 5px;
}

Совет: Все ссылки в HTML по умолчанию имеют подчеркивание.

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

a {
  text-decoration: none;
}

Разбивка текста

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

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

---

Текстовый отступ

Свойство text-indent используется, чтобы определить отступ первой строки текстового абзаца.

Значением может быть число в любых единицах измерения:

p {
  text-indent: 50px;
}

Расстояние между символами

Свойство letter-spacing используется, чтобы определить расстояние между символами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

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

h2 {
  letter-spacing: 5px;
}
h3 {
  letter-spacing: -2px;
}

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

Свойство line-height используется, чтобы определить расстояние между строками, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, «2» означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Расстояние между словами

Свойство word-spacing используется, чтобы определить расстояние между словами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

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

p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Пробельные символы

Свойство white-space определяет, как обрабатываются пробельные символы внутри элемента. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.

Возможные значения:

• normal

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

• nowrap

  Последовательность пробельных символов сворачивается в один пробел. Текст никогда не переносится на новую строку и выводится в одну линию. Перенос происходит только по тегу <br>.

• pre

  Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Действует аналогично тегу <pre>.

• pre-line

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

• pre-wrap

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

• inherit

  Значение наследуется от родительского элемента.

• initial

  Устанавливает значение по умолчанию.

p {
  white-space: nowrap;
}

Тень у текста

Свойство text-shadow добавляет к тексту тень.

При самом простом использовании определяется только горизонтальная (2px) и вертикальная (2px) тень:

Text shadow effect!

h2 {
  text-shadow: 2px 2px;
}

Можно добавить цвет:

Text shadow effect!

h2 {
  text-shadow: 2px 2px red;
}

Также, можно добавить размытие:

Text shadow effect!

h2 {
  text-shadow: 2px 2px 5px red;
}

Еще примеры эффекта тени у текста

Text shadow effect!

h2 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Text shadow effect!

h2 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

CSS свойства форматирования текста

Свойство	Описание
color	Определяет цвет текста
letter-spacing	Устанавливает расстояние между символами в тексте
line-height	Устанавливает межстрочный интервал текста
text-align	Устанавливает горизонтальное выравнивание текста
text-align-last	Устанавливает выравнивание последней строки текста
text-decoration	Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом в одной декларации
text-decoration-color	Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line	Устанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом
text-decoration-style	Устанавливает стиль декоративной линии оформления текста
text-intend	Устанавливает величину отступа первой строки текстового блока
text-transform	Управляет преобразованием текста элемента в заглавные или прописные символы
verical-align	Выравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-space	Устанавливает, как отображать пробелы между словами
word-spacing	Устанавливает расстояние между словами
direction	Определяет направление текста
unicode-bidi	Вместе со свойством direction определяет, как должен располагаться текст используемого языка
text-shadow	Добавляет тень к тексту

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

Да и не только ссылок

Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Content/ Нестандартное подчеркивание ссылок. Да и не только ссылок

Дата публикации: 19.12.2009

Задача

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

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

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

налепленные ссылки на europages.com

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

приглушенное подчеркивание на livejournal.ru

пунктирное подчеркивание на b2b-club. ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром. Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

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

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

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

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

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

<a href="#"><span>Авто</span></a>

.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

• IE 6-7
• Firefox 3
• Opera 9.5 — 10
• Safari 4.0

Заметки

• В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
• Такой прием можно применять не только к ссылкам.

Теги: оформление контента

Оформление внешних ссылок

Вставка стрелок

Свойство CSS: text-underline-position: `left` и `right`

Могу ли я использовать

Поиск ?

Свойство CSS: text-underline-position: `left` и `right`

• global»>

  Глобальное использование

  74,47% + 0% «=» 74,47%

IE

1. 6–10: не поддерживается
2. 11: не поддерживается

Edge

1. 12–18: не поддерживается
2. 79–113: поддерживается
3. 114: поддерживается

Firefox

1. 2–73: не поддерживается
2. 74 — 112: Поддерживается
3. 113: Поддерживается
4. 114 — 115: Поддерживается

Chrome

1. 4 — 70: Не поддерживается
2. 71 — 113: Поддерживается
3. 07% — Supported»> 114: Поддерживается
4. 115 — 117: Поддерживается 90 014

Safari

1. 3.1–16.4: не поддерживается
2. 16.5: не поддерживается
3. 16.6 — 17: не поддерживается
4. TP: поддержка неизвестна

Opera

1. 10 — 57: не поддерживается
2. 58 — 98: Поддерживается
3. 99: Поддерживается

Safari вкл. iOS

1. 3.2–16.4: не поддерживается
2. 16.5: не поддерживается
3. 16.6–17: не поддерживается

Opera Mini

1. 89% — Support unknown»> все: поддержка неизвестна 900 14

Android-браузер

1. 2.1–4.4.4: не поддерживается
2. 114: поддерживается

Opera Mobile

1. 12–12.1: не поддерживается
2. 73: поддерживается

900 12 Chrome для Android

1. 114: поддерживается

Firefox для Android

1. 113: поддерживается

UC Browser для Android

1. 13.4: поддержка неизвестна

Samsung Internet

1. 4–9.2 : не поддерживается
2. 10.1 — 20: поддерживается
3. 41% — Supported»> 21: Поддерживается

Браузер QQ

1. 13.1: Поддержка неизвестна

Браузер Baidu

1. 13.18: Поддержка неизвестна

KaiOS Browser

1. 2.5: поддержка неизвестна
2. 3: поддержка неизвестна

css text-underline-position — CodeProject Reference

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

Синтаксис  

CSS

Код копии

/* Значения ключевых слов */
позиция подчеркивания текста: авто;
позиция подчеркивания текста: под;
позиция подчеркивания текста: слева;
позиция подчеркивания текста: справа;
позиция подчеркивания текста: слева;
позиция подчеркивания текста: прямо под;

/* Глобальные значения */
позиция подчеркивания текста: наследовать;
позиция подчеркивания текста: начальная;
положение подчеркивания текста: не установлено; 

Значения

авто

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

под

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

слева

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

справа

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

автопост

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

.

выше

Это ключевое слово размещает строку над текстом. При использовании восточноазиатского текста использование ключевого слова auto приведет к аналогичному эффекту.

ниже

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

Формальный синтаксис

CSS

Код копии

auto | [ под || [ left | право ] ] 

Описание  

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

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

CSS

Код копии

:root { /* Лучшее значение по умолчанию для документа с большим количеством химических формул */
  позиция подчеркивания текста: под;
} 

Исходное значение	auto
Применяется ко всем элементам
Унаследовано 9 0286	да
Медиа	визуальное
Расчетное значение	как указано
Анимируемый	нет
Канонический порядок	порядок появления в формальной грамматике значений

Совместимость с браузером  

• Настольный
• Мобильный

Особенность	Хром	Firefox (Геккон)	Internet Explorer	Опера	Сафари
Базовая опора ( авто )	33,0	Нет поддержки	6 [1]	Нет поддержки	Нет поддержки
ниже	33,0	Нет поддержки	Нет поддержки	Нет поддержки	Нет поддержки
слева , справа	Без поддержки [2]	Нет поддержки	Нет поддержки	Нет поддержки	Нет поддержки
выше , ниже	Нет поддержки	Нет поддержки	5 [1]	Нет поддержки	Нет поддержки
автопост	Нет поддержки	Нет поддержки	6 [1]	Нет поддержки	Нет поддержки

Особенность	Андроид	Chrome для Android	Firefox Mobile (Геккон)	Мобильный IE	Опера Мобайл	Мобильный сафари
Базовая опора	Нет поддержки	Нет поддержки	Нет поддержки	?	Нет поддержки	Нет поддержки

[1] Internet Explorer реализует другие значения с несколько иными эффектами для этого значения. От IE 5 до IE 7 включительно существовала только версия без префикса. Начиная с IE 8 можно использовать префикс.

[2] См. выпуск Chrome 313888

См. также  

• Свойства CSS, связанные с оформлением текста: text-decoration , text-decoration-line , text-decoration-style , text-decoration-color .
• Документация по нестандартным значениям Microsoft.

Технические характеристики  

Спецификация	Статус	Комментарий
Оформление текста в CSS, уровень 3 Определение позиции подчеркивания текста в этой спецификации.	Кандидат в рекомендации	Исходное определение

Лицензия

© Mozilla Contributors, 2016 г.