Зачеркивание в css: подчеркивание, зачеркивание текста — учебник CSS

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

1. Кратко
2. Пример
3. Как пишется

Кратко

Скопировано

Свойство text-decoration-color определяет цвет декоративной линии (подчёркивания, зачёркивания и других), заданной при помощи text-decoration-line.

Кстати, декоративные линии можно интересно стилизовать при помощи text-decoration-style 😎

Пример

Скопировано

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

span {  text-decoration-line: underline;  text-decoration-style: double;}.red {  text-decoration-color: red;}.yellow {  text-decoration-color: yellow;}.white {  text-decoration-color: white;}
          span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
. red {
  text-decoration-color: red;
}
.yellow {
  text-decoration-color: yellow;
}
.white {
  text-decoration-color: white;
}

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

Как пишется

Скопировано

Значение text-decoration-color по умолчанию — currentColor, то есть цвет такой же, что и у текста.

body {  color: #735184;}span {  text-decoration-line: underline;  text-decoration-style: double;}
          body {
  color: #735184;
}
span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
 

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

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

Это можно легко поменять: text-decoration-color принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff.

Раскрасить можно не только text-decoration-line, но и линии, обозначенные в HTML-разметке тегами, например <u> или <del>. У text

-decoration-color краски хватит на всех!

del {  text-decoration-color: orange;}
          del {
  text-decoration-color: orange;
}

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

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

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

Предыдущий материал

←

text-decoration

ctrl + alt + ←

Следующий материал

→

text-decoration-line

ctrl + alt + →

Свойства CSS для работы с текстом

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

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

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

text-indent — абзац с «красной строки», назначить любому абзацу отступ

letter-spacing — регулируем расстояние между буквами в слове (можно увеличить или уменьшить)

word-spacing — регулируем расстояние между словами в предложении

text-decoration — подчеркивание, зачеркивание, надчеркивание текста

text-align — выравнивание текста

line-height — расстояние между строками в тексте (но не меньше величины текста)

text-transform — различные изменения в тексте

Самое используемое свойство css, связанное с текстом, это выравнивание текста. Например, текст страницы, которую вы сейчас читаете, выровнен по левому краю.

В html для выравнивания текста применяли атрибут align.

В CSS тоже есть свойство, которое отвечает за выравнивание текста — text-align. Это свойство может принимать четыре значения:

left — выравнивание текста по левому краю (по умолчанию)

right — выравнивание текста по правому краю

center — выравнивание текста по центру

justify — выравнивание текста по левому и правому краю (растягивание текста)

Давайте в нашем CSS-файле пропишем новый стиль для работы с текстом. Пусть это будет стиль text.

Пример:

.text {

text-align:right;

}

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

Пример:

<p>Текст абзаца</p>

 

Следующее свойство CSS — отступ, так называемая «красная строка».

text-indent — свойство, отвечающее за написание абзаца с «красной строки». В значении этого свойства прописываем величину отступа в пикселях или других единицах измерения.

Пример:

.text {

text-align:left;

text-indent:30px;

}

 

Далее рассмотрим свойство css

text-decoration:line-through; — зачеркивание текста

Это свойство применяется, например, при написании цен. При изменении цены старое значение зачеркиваем и прописываем новое.

Но как же нам прописать это свойство одному слову из текста, а не всему абзацу. Для этого будем использовать тег <span>. Сам по себе этот тег никаких изменений в тексте не производит, но если ему прописать какой-либо стиль… Вот для этого и необходим этот тег — для придания какого-либо стиля отдельному объекту.

Давайте создадим новый стиль (например — cherta) и пропишем ему это свойство:

Пример:

. cherta {

text-decoration:line-through;

}

Теперь в абзаце зачеркнем любое слово:

<p>Цена: <span>150руб</span>120руб</p>

 

Изучим следующее свойство css — text-transform. Это свойство позволяет проделывать абзацам некоторые трансформации.

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

Значения свойства text-transform:

capitalize — первая буква каждого слова абзаца будет заглавной

uppercase — весь текст будет написан заглавными буквами

lowercase — весь текст будет написан прописными буквами

Создадим новый стиль со свойством text-transform

Пример:

.tr {

text-transform: capitalize;

}

Пропишем абзацу этот стиль:

<p>Первая Буква Каждого Слова Абзаца — Заглавная</p>

Можно изменять расстояние между словами в тексте. Для этого применяем свойство css:

word-spacing — величина расстояния между словами в тексте

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

}

Можно изменять расстояние между буквами в словах применяя свойство:

letter-spacing — величина расстояния между буквами в словах

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

}

И последнее свойство css, которое мы изучим, свойство применяемое для изменения расстояния между строк в тексте. Это свойство:

line-height — величина расстояния между строками в тексте

Расстояние между строками — это не расстояние от нижнего края верхней строки до верхнего края нижней строки. Здесь учитывается и высота букв, так что это расстояние между верхними (или нижними) краями строк. Имейте это ввиду.

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

line-height: 25px;

}

CSS strike through

CSS strike through  не является точным свойством, но вы можете достичь этой цели с помощью text-decoration .

Это пример зачеркивания css.

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

 
Это пример зачеркивания css.
 

Кроме того, вы можете использовать имя класса , чтобы применить оформление  text-decoration: line-through; свойство.

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

  
Это пример css зачеркнуть.
 

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

Consectetur adipisicing elit  necessitatibus  sit quaerat liquid.

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

 
Consectetur adipisicing elit necessitatibus sit quaerat aliquid.
  
 

HTML 

 по сравнению с зачеркиванием CSS ( text-decoration: line-through )

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

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

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

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

Базовый пакет	Премиум пакет
Индивидуальный дизайн	Индивидуальный дизайн 9 0072
SEO	SEO

 <таблица>

Базовый пакет
Премиум-пакет


Индивидуальный дизайн 
Индивидуальный дизайн


SEO
SEO

 

CSS для нескольких других ударов по стилям

Стоимость стиля	CSS
Consectetur	Text-Decoration: Line-Throw;
Adipisicing	декорирование текста: сквозное; стиль оформления текста: волнистый;
Incididunt	оформление текста: сквозное; стиль оформления текста: пунктирный;
Упражнение	оформление текста: сквозное; стиль оформления текста: пунктир;
Reprehenderit	оформление текста: сквозное; стиль оформления текста: двойной;
Voluptate	украшение текста: сквозное; стиль оформления текста: двойной; цвет оформления текста: #EA4335;

CSS для нескольких других стилей, как сквозной штрих

Стиль линии	CSS
Consectetur	-webkit-text-decoration-line: overline; строка оформления текста: надчеркивание;
Adipisicing	-webkit-text-decoration-line: подчеркивание; строка оформления текста: подчеркивание;
Инцидент	-webkit-text-decoration-line: надчеркивание подчеркивание; text-decoration-line: надчеркивание, подчеркивание;

См.

также:

1. Какую внештатную работу вы можете выполнять, зная только HTML и CSS?
2. В чем разница между CSS и CSS3?
3. Как работают позиции CSS?
4. Вертикальное центрирование с помощью CSS
5. Граница в CSS

Шихаб Уль Хак

Вы можете звать меня Шихаб. Я веб-разработчик и много работаю с PHP и WordPress.
У меня есть степень магистра, и я оставил свою обычную работу, чтобы полностью посвятить себя области, в которой я люблю работать. Я живу в Бангладеш и помогаю владельцам бизнеса создавать потрясающее присутствие в Интернете.

Профиль автора »

Поиск недействительных, переопределенных, неактивных и других стилей CSS

В этом руководстве предполагается, что вы знакомы с проверкой CSS в Chrome DevTools. См. Просмотр и изменение CSS, чтобы узнать об основах.

# Проверьте созданный вами CSS

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

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

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

# Понимание CSS на панели «Стили»

Панель « Стили» распознает многие виды проблем CSS и выделяет их по-разному.

# Неверные значения и объявления

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

• Полное объявление CSS (свойство и значение), если свойство CSS недействительно или неизвестно.
• Просто значение, когда свойство CSS допустимо, но значение недействительно.

# Переопределено

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

В этом примере ширина : 300px; Атрибут стиля элемента переопределяет ширину : 100% в классе .youtube .

# Неактивно

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

Эти бледные свойства неактивны из-за логики CSS, а не каскадного порядка.

• Свойства бледного неактивного вещества отличаются от ненаследственных свойств бледного цвета. Неактивные свойства имеют значки.

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

В этом примере дисплей : блок; Свойство отключает justify-content и align-items , которые управляют гибкими или сеточными макетами.

# Унаследованные и неунаследованные

На панели Стили перечислены свойства в разделах Унаследовано от в зависимости от их наследования по умолчанию:

• Унаследовано по умолчанию в виде обычного текста.
• Неунаследованные по умолчанию выделены бледным текстом.

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

# Сокращение

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

На панели Стили отображаются сокращенные свойства в виде раскрывающихся списков, содержащих все сокращенные свойства.

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

# Недоступно для редактирования

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

• таблица стилей пользовательского агента — таблица стилей Chrome по умолчанию.

• Связанные со стилем HTML-атрибуты элемента, например высота, ширина, цвет и т. д. Вы можете редактировать их в дереве DOM, и это обновит CSS на панели Стили , но не наоборот .

  В этом примере для атрибута height="48" элемента установлено значение 50 . Это обновляет соответствующее свойство в разделе svg[Attributes Style] на панели Styles .

# Проверьте элемент, который все еще не оформлен так, как вы думаете

Чтобы понять, что пошло не так, откройте панель Computed , чтобы увидеть «окончательный» CSS, примененный к элементу, и сравните с ним вы заявили.

Панель Элементы > Стили отображает точный набор правил CSS, записанных в различных таблицах стилей. С другой стороны, на панели Elements > Computed перечислены разрешенные значения CSS, которые Chrome использует для рендеринга элемента:

• CSS, полученный из наследования
• Победители каскада
• Полнотекстовые свойства (точные), а не сокращенные (краткие)
• Вычисляемые значения, например, font-size: 14px вместо font-size: 70% 9 0020

# Понимание CSS на панели вычислений

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

# Объявлено и унаследовано

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

Чтобы просмотреть объявление на панели Стили , наведите указатель мыши на развернутое свойство и нажмите кнопку со стрелкой.

Чтобы увидеть объявление на панели Sources , щелкните ссылку на исходный файл.

Для свойств с несколькими источниками на панели Вычислено сначала отображается победитель каскада.

# Runtime

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

В этом примере Chrome вычислил следующее для

элемент:
• ширина относительно его родителя,
• высота относительно его дочерних элементов, двух
• элементов 9019 0

# Ненаследуемый и custom

Чтобы панель Computed отображала все свойства и их значения, установите флажок Show all .