Css подчеркнуть текст: text-decoration-color | htmlbook.ru

Узнаем как изготовить зачеркнутый текст в CSS

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

Присвоение

Подчеркнуть и зачеркнуть текст в CSS можно с помощью команды «text-decoration». Эффект будет зависеть от того, какое указано значение. CSS был придуман, чтобы разделить логическую и структурную часть веб-страницы. Но до появления каскадных таблиц стилей использовались HTML-теги, которые имели аналогичное значение. К примеру, такой элемент, как <strike> позволяет вывести зачеркнутый текст. Сейчас данный тег признан нежелательным, и его применение автоматически сделает ваш код страницы невалидным. Хотя при этом элемент <strike> до сих пор поддерживается всеми современными браузерами и используется некоторыми разработчиками. Но вернемся к CSS. Команда «text-decoration» может иметь следующие значения:

Узнаем как изготовить в CSS жирный шрифт?

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

• Underline. Назначив данное значение, вы получите подчеркнутый текст.
• Overline. Линия будет проходить над определенным фрагментом страницы.
• Line-through. Создает перечеркнутый или зачеркнутый текст.
• Blink. Выделенный фрагмент документа будет периодически исчезать и снова появляться.
• Также есть значения «none» и «inherit». Первое отменяет все эффекты, а второе приказывает наследовать свойство у родительского элемента.

Предназначение

Казалось бы, что в CSS зачеркнутый текст и подобные эффекты служат только для украшения текста. В большинстве случаев это утверждение правдивое. Но иногда стоит задуматься над вопросом: для чего создавались такие элементы? К примеру, уже устаревший тег «strike» использовался для обозначения неверной или старой информации. Читатели, увидев перечеркнутый текст, понимают скрытое значение такого обозначения. Подчеркнутые слова всегда сразу же выделяются из общего потока. Поэтому такой эффект необходимо использовать для выделения важной информации. Значение «blink», которое делает текст мигающим, используется довольно редко, так как среди программистов принято считать такой эффект неприемлемым. Ведь мало кому из ваших читателей нравятся мелькающие символы, которые будут постоянно их отвлекать. Ну а значение «overline» используется только для украшения текста.

Горячие клавиши Excel (сочетание клавиш)

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

Особенности

Хотя все значения свойства «text-decoration» входят в спецификацию версий каскадных таблиц, все же некоторые значения не поддерживаются современными браузерами. Например, мигающий текст не будет виден в IE. Браузер Google Chrome не воспринимает некоторые значения. Мобильные платформы неполноценно поддерживают данное свойство.

Заключение

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

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные «декоративные эффекты». Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h2> подчёркнуты, <h3> — имеют черту над текстом, а <h4> — перечёркнуты.

h2 {

text-decoration: underline;

}

h3 {

text-decoration: overline;

}

h4 {

text-decoration: line-through;

}

• Показать пример

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение — нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px — в заголовках <h2>, то используется такой код:

h2 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

• Показать пример

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово «headline» можно показать «HEADLINE» или «Headline». Имеются четыре возможных значения text-transform:

capitalize

Капитализирует каждое слово. Например: «john doe» станет «John Doe».

uppercase

Конвертирует все символы в верхний регистр. Например: «john doe» станет «JOHN DOE».

lowercase

Конвертирует все символы в нижний регистр. Например: «JOHN DOE» станет «john doe».

none

Трансформации нет — текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

h2 {

text-transform: uppercase;

}

li {

text-transform: capitalize;

}

• Показать пример

Резюме

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

Урок 6: Ссылки

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.

Что такое псевдокласс?

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

Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.  В CSS мы также можем использовать a в качестве селектора:

a {

color: blue;

}

Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.

a:link {

color: blue;

}

a:visited {

color: red;

}

Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель — над ссылкой.

Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.

Псевдокласс: link

Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.

В примере кода непосещённые ссылки — синие.

a:link {

color: #6699CC;

}

• Показать пример

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки — фиолетовые.

a:visited {

color: #660099;

}

• Показать пример

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.

В примере активные ссылки имеют жёлтый фон.

a:active {

background-color: #FFFF00;

}

• Показать пример

Псевдокласс: hover

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

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

a:hover {

color: orange;

font-style: italic;

}

• Показать пример

Пример 1: Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.

Пример 1a: Расстояние между буквами

Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

• Показать пример

Пример 1b: UPPERCASE и lowercase

В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

}

• Показать пример

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

underline-offset — CSS: Каскадные таблицы стилей

Свойство CSS text-underline-offset задает расстояние смещения линии оформления подчеркивания текста (применяется с использованием text-decoration ) от исходного положения.

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько строк text-decoration

, text-underline-offset влияет только на подчеркивание и вместо другие возможные варианты оформления строки, такие как поверх линии или сквозная линия .

Синтаксис

 /* Одно ключевое слово */
смещение подчеркивания текста: авто;
/* длина */
смещение подчеркивания текста: 0,1 em;
смещение подчеркивания текста: 3 пикселя;
/* процент */
смещение подчеркивания текста: 20%;
/* Глобальные значения */
смещение текста-подчеркивания: наследовать;
смещение подчеркивания текста: начальное;
смещение подчеркивания текста: не установлено;
 

Свойство text-underline-offset указывается как одно значение из списка ниже.

Значения

авто

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

<длина>

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

<процент>

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

Формальное определение

Начальное значение	авто
Относится ко всем элементам	. Это также относится к ::first-letter и ::first-line .
Унаследован	Да,
Проценты	См. Размер шрифта самого элемента
Вычисленная стоимость	AS DEPID
. Вычисленная стоимость	AS DEPID
. Вычисленная стоимость	AS DEPID

8.

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

 авто | <длина> | <процент> 

Примеры

 
Вот текст со смещенным волнистым красным подчеркиванием!


В этом тексте есть строки как сверху, так и снизу. Смещен только нижний.
 

 р {
  оформление текста: подчеркивание волнистым красным цветом;
  смещение подчеркивания текста: 1em;
}
.twolines {
  цвет оформления текста: фиолетовый;
  text-decoration-line: подчеркивание над чертой;
} 

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

Спецификация	Статус	Комментарий
Модуль оформления текста CSS, уровень 4 Определение ‘text-underline-offset’ в этой спецификации.	Рабочий проект	Исходное определение.

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

Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari на iOS	Samsung Internet
text-underline-offset	Chrome Без поддержки №	Край Без поддержки №	Firefox Полная поддержка 70 Полная поддержка 70 Полная поддержка 69 Инвалиды Disabled Начиная с версии 69: эта функция находится за предпочтением layout. css.text-underline-offset.enabled (должно быть установлено значение true ). Чтобы изменить настройки в Firefox, посетите страницу about:config.	ИЭ Без поддержки №	Опера Без поддержки №	Сафари Полная поддержка 12.1	Веб-просмотр Android Без поддержки №	Chrome Android Без поддержки №	Firefox Android Без поддержки №	Opera Android Без поддержки №	Safari iOS Полная поддержка 12,2	Самсунг Интернет Android Без поддержки №
Процентное значение	Хром Без поддержки №	Край Без поддержки №	Firefox Полная поддержка 74	ИЭ Без поддержки №	Опера Без поддержки №	Сафари Без поддержки №	WebView Android Без поддержки №	Chrome Android Без поддержки №	Firefox Android Без поддержки №	Опера Android Без поддержки №	Safari iOS Без поддержки №	Samsung Интернет Android Без поддержки №

Легенда

Полная поддержка

Полная опора

Без поддержки

Нет поддержки

Пользователь должен явно включить эту функцию.

Пользователь должен явно включить эту функцию.

См. также

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

Семейство элементов оформления текста CSS (не только для подчеркивания ссылок)

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

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

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

Во-первых, давайте взглянем на эти свойства:

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

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

text-decoration — основной ярлык (и основная проблема)

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

text-decoration:

 <'text-decoration-line'> ||
<'стиль оформления текста'> ||
<'text-decoration-color'> 

Например:

 /* Подчеркнутый текст: */
оформление текста: подчеркивание;
/* Подчеркнутый пунктиром текст: */
оформление текста: подчеркивание пунктиром;
/* Ничего, потому что мы не определили text-decoration-line: */
оформление текста: пунктир; 

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

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

Это различие связано с реализацией в разных веб-браузерах. В то время как Firefox, Chrome и его подбраузеры принимают оформление текста «по-новому» как ярлык, Safari и Explorer понимают его «по-старому» как отдельную функцию.

Итак, если мы хотим сделать подчеркнутую зеленым пунктиром ссылку иначе, чем обычно (но не правильно) с границей объекта, это не будет работать так:

 .сокращенно a {
  оформление текста: подчеркивание зеленым пунктиром;
} 

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

 .individuals a {
  строка оформления текста: подчеркивание;
  стиль оформления текста: пунктирный;
  цвет оформления текста: зеленый;
} 

CodePen: cdpn.io/e/abzPKNB

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

Рисунок: Матрица свойств оформления текста и возможные значения в соответствии с CSS Text Decoration Level 3.

text-decoration-line – типы декоративных подчеркиваний

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

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

 строка оформления текста: нет |
  [подчеркнуть || надчеркивание || линейный || мигать ] 

В Центральной Европе вы, вероятно, захотите часто использовать опцию подчеркивания. Значение мигания blink считается устаревшим и не поддерживается современными веб-браузерами. Хвала Господу.

Обозначение с блочными скобками и знаками логического оператора или ( || ), которое я взял из спецификации, говорит о возможности использования нескольких значений, например text-decoration-line: underline overline< эм>. Значение line-through устанавливается в значениях HTML в стилях веб-браузеров по умолчанию , или .

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

text-decoration-style — стиль подчеркивания

Задает стиль оформления текста — например, одна линия, двойная линия, пунктирная линия или волнистая линия:

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

Используется только во время и только если некоторые из них определены text-decoration-line .

Значение wavy отлично подходит, например, для выделения ошибок в словах.

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

text-decoration-color — цвет оформления

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

 text-decoration-color:  

может быть текущим цветом или любым цветом по вашему выбору.

Это то, что могут делать все современные веб-браузеры.

Давайте рассмотрим возможности последней спецификации CSS для оформления текста.

Рисунок: последние функции CSS Text Decoration Level 4, которые не будут работать везде.

text-decoration-skip-ink — для предотвращения пересечения строк

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

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

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

Первоначально он работал в спецификации как text-decoration-skip , но теперь функция удалена - она ​​будет разделена на дополнительные подфункции.

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

text-underline-position — позиция декоративной строки

Где появляется декоративная линия:

 text-underline-position: auto |
  [ под || [ слева | right ] ] 

Значения left и right предназначены для азиатских языков, которые записаны вертикально вниз (китайский, японский, корейский,…)

Для нас интересно значение под , оно выдаст подчеркивание под контуром буквы (часть буквы, которая идет ниже обычной линии, такой как p, y или j).

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

Эта функция не поддерживается Safari.

text-underline-offset – смещение оформления

Определяет смещение линии оформления от исходного положения:

 text-underline-offset: auto |  

Действует по-разному в соответствии с text-underline-position . Когда дело доходит до нижнее подчеркивание движение идет вниз, а с зачеркнутым движение вверх.

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

Эта функция поддерживается Safari и Firefox, но не Chrome.

text-decoration-width & text-decoration-thickness — ширина линии оформления

Чтобы установить ширину линии оформления, у нас есть два свойства:

 text-decoration-width: auto | <ширина>;
толщина оформления текста: авто | <ширина>; 

Хотя:

• text-decoration-width является стандартным в соответствии с модулем оформления текста CSS уровня 4, но на самом деле ни один браузер не может этого сделать.
• text-decoration-thickness не соответствует стандарту. Однако он поддерживается Safari и Firefox, но не Chrome. Если вы хотите попробовать это, рекомендуется снова в em , чтобы адаптироваться к размеру текста.

text-emphasis – положение ударения (не интересно для западных стран)

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

Эти функции относятся сюда: text-emphasis-style , text-emphasis-color , text-emphasis-position и text-emphasis .

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

• оттенков (свойство text-shadow )
• подчеркивание (функция text-decoration-line )
• надстрок (функция text-decoration-line )
• сам текст
• знаки выделения (функция выделение текста )
• сквозная строка (функция text-decoration-line )

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