Line through css: text-decoration-color

text-decoration-thickness — CSS — Дока

Кратко
Пример
Как пишется
Подсказки
На практике
1. Ярослав Лебеденко советует

Кратко

Скопировано

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

Пример

Скопировано

Для примера создадим три абзаца текста и зададим для них разные значения.

<p>Текст с красным подчёркиванием в 1px.</p><p>Текст с красным подчёркиванием в 3px.</p><p>Текст с красным подчёркиванием в 5px.</p>
          <p>Текст с красным подчёркиванием в 1px.</p>
<p>Текст с красным подчёркиванием в 3px.</p>
<p>Текст с красным подчёркиванием в 5px.</p>

. thin {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: red;  text-decoration-thickness: 1px;}.thick {  text-decoration-line: underline;  text-decoration-style: solid;  text-decoration-color: red;  text-decoration-thickness: 3px;}.shorthand {  text-decoration: underline solid red 5px;}
          .thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}
.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}
.shorthand {
  text-decoration: underline solid red 5px;
}

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

Открыть демо в новой вкладке

Как пишется

Скопировано

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

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

Обратите внимание, что толщина в процентах поддерживается не всеми браузерами. Подробнее на Can I use.

Подсказки

Скопировано

💡 Свойство text-decoration-thickness может менять толщину подчёркивания у ссылок (<a>), а также его можно анимировать при помощи transition.

На практике

Скопировано

Ярослав Лебеденко советует

Скопировано

🛠 На практике одного text-decoration-thickness может быть не достаточно поэтому стоит обратить внимание на такие свойства как text-decoration-skip-ink и text-underline-offset. Ниже приведён пример совместной работы этих свойств.

<nav>  <ul>    <li>      <a href="#">HTML</a>    </li>    <li>      <a href="#">CSS</a>    </li>    <li>      <a href="#">JavaScript</a>    </li>    <li>      <a href="#">Веб-платформа</a>    </li>  </ul></nav>
          <nav>
  <ul>
    <li>
      <a href="#">HTML</a>
    </li>
    <li>
      <a href="#">CSS</a>
    </li>
    <li>
      <a href="#">JavaScript</a>
    </li>
    <li>
      <a href="#">Веб-платформа</a>
    </li>
  </ul>
</nav>

.nav-list__links {  display: inline-block;  color: #fff;  font-size: 36px;  line-height: 48px;  padding: 6px 10px;  text-decoration-skip-ink: none;  text-decoration-thickness: 4px;  text-underline-offset: -40px;  transition: 150ms ease-in-out;}.  nav-list__link:hover,.nav-list__link:focus {  text-decoration-thickness: 2px;  text-underline-offset: 10px;  text-decoration-color: currentColor;}.orange {  text-decoration-color: #ff852e;}.blue {  text-decoration-color: #2e9aff;}.yellow {  text-decoration-color: #ffd829;}.green {  text-decoration-color: #40e746;}
          .nav-list__links {
  display: inline-block;
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  padding: 6px 10px;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 4px;
  text-underline-offset: -40px;
  transition: 150ms ease-in-out;
}
.nav-list__link:hover,
.nav-list__link:focus {
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  text-decoration-color: currentColor;
}
.orange {
  text-decoration-color: #ff852e;
}
.blue {
  text-decoration-color: #2e9aff;
}
.yellow {
  text-decoration-color: #ffd829;
}
.green {
  text-decoration-color: #40e746;
}

Открыть демо в новой вкладке

О значении currentColor читайте в статье «Цвета в вебе»

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-decoration-style

ctrl + alt + ←

→

text-decoration-skip-ink

ctrl + alt + →

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

CSS свойства

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

CSS свойство text-decoration добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом).

Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
text-decoration	1.0	1.0	3.5	1.0	3.0	12.0

CSS синтаксис:

text-decoration:"none | underline | overline | line-through | initial | inherit";
Допускается использование нескольких значений в одном объявлении:
text-decoration:"underline line-through overline";
В качестве короткой записи в CSS3:
text-decoration:"text-decoration-line text-decoration-style text-decoration-color  | initial | inherit";

JavaScript синтаксис:

object.style.textDecoration ="line-through"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

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

  
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration.</title>
<style> 
.test {
text-decoration : underline; /* добавляем декорирование текста (линия снизу) */
color : red; /* устанавливаем цвет шрифта */
}
.test2 {
text-decoration : overline; /* добавляем декорирование текста (линия сверху) */
color : green; /* устанавливаем цвет шрифта */
}
.test3 {
text-decoration : line-through; /* добавляем декорирование текста (перечеркивание) */
color : blue; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration: underline;</p>
		<p class = "test2">text-decoration: overline;</p>
		<p class = "test3">text-decoration: line-through;</p>
	</body>
</html>

Пример декорирования текста в CSS (свойство text-decoration).

CSS свойства

Свойство CSS text-decoration-line — GeeksforGeeks

Свойство text-decoration-line используется для установки различных видов оформления текста. Text-decoration может включать множество значений, таких как подчеркивание, надчеркивание, сквозная линия и т. д. Можно комбинировать более одного свойства text-decoration. Например, значения подчеркивания и надчеркивания можно использовать для отображения линий как под текстом, так и над ним.

Синтаксис:

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

Свойство text-decoration является сокращенным свойством для text-decoration-line(обязательно), text-decoration-color и text-decoration-style.

Значения свойств: Все свойства хорошо описаны в примере ниже.

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

Синтаксис:

 строка-декорация текста: нет;

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

HTML

< html >

< head >

< title >свойство text-decoration-line title >

< Стиль >

H2 {

40043 Color: Green;

text-decoration-line: нет;

}

. GFG {

Текстовый-схема: nom;

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

}

style >

head >

< body style = "text-align:center" >

< h2 >GeeksforGeeks h2 >

< h3 >text-decoration-line: none; h3 >

< p class = "GFG" >

Geeksforgeeks: портал компьютерных наук

P >> 43 P >> 444 P > P > P > . 0002

body >

html >

Output:

underline: It is used to display строку ниже или под текстом.

Синтаксис:

 text-decoration-line: underline;

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

HTML

< html >

< head >

< title > свойство text-decoration-line title >

< Стиль >

H2 {

Цвет: Грин;

text-decoration-line: underline;

}

. gfg {

Текстовый-Стоимость.

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

}

style >

head >

< body style = "text-align:center" >

< h2 >GeeksforGeeks h2 >

< h3 >text-decoration-line:underline; h3 >

< p class = "GFG" >

Geeksforgeeks: портал компьютерных наук

P > P > 49 P > P > P > P > P > P >0005

body >

html >

Output:

overline: It is used to отображать линию над текстом.

Синтаксис:

 text-decoration-line: overline;

Пример: В этом примере показано использование text-decoration-line Свойство, для которого установлено значение , надчеркивание.

HTML

< html >

< head >

< title > text-decoration-line property title >

< Стиль >

H2 {

Color: Green;

text-decoration-line: overline;

}

. GFG {

Текстовый-Стокол-Line-line: upline;

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

}

style >

head >

< body style = "text-align:center" >

< h2 >GeeksforGeeks H2 >

< H3 > Текстовая декорация: оберт; = "GFG" >

Geeksforgeeks: портал компьютерных наук

P > P > 49 P > P > P > P > P > P >0005

Body >

262626626363636363636363636363636639000 
3026363636363636363636363636363636363636363636366363639302.  62662626626266262662636636636636639000 2626626366366366366366393026. используется для отображения линии через текст. 
   Синтаксис:  
  text-decoration-line: line through; 
  Пример:  Этот пример демонстрирует использование  text-decoration-line  Свойство, значение которого установлено на  сквозное. 
 HTML 
   
  <   html   > 
  <   head   > 
         <   title   > свойство text-decoration-line   title   > 
       
         <   стиль   > 
         h2 { 
          4 цвет: зеленый ; 
             text-decoration-line: line-through; 
   } 
  
    . GFG {
    Текстовый-схема: Line-Throughtrough; 
             вес шрифта: полужирный; 
         } 
           style   > 
    head   > 
  
  <   body   style   =   "text-align:center"   > 
         <   h2   >GeeksforGeeks  h2   > 
         <   h3   >text-decoration-line:line-through;  h3   > 
         <   p   class   =   "GFG"  > 
    Geeksforgeeks: портал компьютерных наук 
      P >>     P >> > > >>  . 0005
  
  
    body   > 
    html   > 
  Output: 
  initial   :  It is используется для установки свойства CSS элемента в значение по умолчанию. Это то же самое, что отсутствие собственности.
  Синтаксис: 
 текст-декорация-строка: инициал; 
  Пример:   В этом примере показано использование свойства  text-decoration-line , для которого задано начальное значение . 
 HTML 
   
  <   html   > 
  <   head   > 
         <   title   > свойство text-decoration-line   title  > 
  
  
    < . 
             text-decoration-line: initial; 
         } 
         
         .gfg 9
0042             text-decoration-line: initial; 
             вес шрифта: полужирный; 
         } 
           style   > 
    head   > 
  
  <   body   style   =   "выравнивание текста: по центру"   > 
         <   h2   >GeeksforGeeks  h2   > 
         <   h3   >text-decoration-line:initial;  h3   > 
    <  P   Класс   =   "GFG"  > 
    Geaksforgeeks: Actondce Ncover     Geaksforgeeks: Actondcece Ncover 444444449930005
           p   > 
  
  
    body   > 
    html   > 
  Output : 
  Поддерживаемые браузеры:  Ниже перечислены браузеры, поддерживаемые свойством  text-decoration-line : 
 Google Chrome 57. 0
 Microsoft Edge 79.0
 Firefox 36.0
 Apple Safari 12.1 
 Opera 44.0
 
 css – Как установить стиль «текстовое оформление: сквозной» для метки, которая находится внутри элемента? 
 спросил  1 год, 2 месяца назад 
 Изменено
 1 год, 2 месяца назад
 Просмотрено
 392 раза
 У меня есть -
 foo
 
 Мне нужно установить стиль "text-decoration: line-through" (в файле.css) для метки, которая находится внутри элемента. Я попытался написать следующее в файле .css, но это мне не помогает.
 метка> ввод [тип = флажок]: отмечен {
    оформление текста: сквозное;
}
 
 css
 флажок
 стили
 сквозной
 0
 CSS не может "вернуться вверх" так, как вы хотели бы сделать здесь, поэтому проверенный статус ввода не может повлиять на общую метку.
 
 Есть несколько способов обойти это. Вы можете просто поменять местами ввод с метки, чтобы он был перед ней, но, конечно, это изменило бы внешний вид. Вместо этого этот фрагмент помещает содержимое метки в элемент span, а затем состояние ввода может повлиять на его стиль, поскольку новый элемент является следующим родственным элементом.
 ввод: проверено+* {
  оформление текста: сквозное;
} 
 <метка для="1640801145364">

  фу
 
 0
 Я вижу ваш CSS, вы думали, что текст  foo  будет внутри ввода, , но не совсем , потому что:    не нужен закрывающий тег, поэтому они не могут внутри  foo  текст
 , поэтому сначала текст  foo  в диапазоне  , поэтому с помощью CSS мы можем легко выбрать его
, затем я использовал CSS COMBINATOR   ~   https://developer.
 Категории: Разное
Навигация по записям
Назад
Вперед
 Оставить комментарийДобавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
© 2019 Штирлиц Сеть печатных салонов в Перми
Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.
 Карта сайта

Штирлиц — Сеть печатных салонов в Перми

Line through css: text-decoration-color | htmlbook.ru

text-decoration-thickness — CSS — Дока

Кратко

Пример

Как пишется

Подсказки

На практике

Ярослав Лебеденко советует

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

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

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

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

Версия CSS

Наследуется

Анимируемое

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

Свойство CSS text-decoration-line — GeeksforGeeks

HTML

HTML

HTML

HTML

HTML

css – Как установить стиль «текстовое оформление: сквозной» для метки, которая находится внутри элемента?

Добавить комментарий Отменить ответ