» »

Зачеркнутый текст с помощью HTML и CSS

Зачеркнутый текст с помощью HTML и CSS

Иногда нам нужно зачеркнуть текст, чтоб визуально он был виден, что можете сделать двумя вариантами, это на стилях CSS с помощью HTML. Больше всего можно увидеть на информации, как раз на той, которая основном бывает актуальной информацией. Если говорить о продажах, это тематические площадки интернет магазинов, там идут цены, и как раз на них применяется. Здесь показано 2 варианта, они оба с чистым эффектом зачеркивая текста. С вашей стороны можно текст увеличить, где автоматически полоса будет увеличена.

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

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

Внимание:

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

При проверки все отлично выставляет:

Перечеркнутый текст в горизонтальном виде

Делаем зачеркнутый текст при помощи CSS



HTML

Код
<div class="strikethrougon-text">
<p>Как правильно сделать в CSS зачеркнутый текст?</p>
</div>

CSS

Код
.strikethrougon-text p{
  text-decoration:line-through;
}

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

Сделать зачеркнутый текст с помощью HTML


Код
<del>Здесь будет зачеркнутые знаки или текст</del>

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

Демонстрация
19.08.2018 Просмотров: 282 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Grician
Grician 20.08.2018 07:031
0
А не проще использовать стандартный код Зачеркнутый текст
-SAM-
-SAM- 20.08.2018 13:552
+1
В каком смысле проще? В статье всё же написано - разные стандарты, кто их придерживается и валидность делает. Представлено два вариант, а там уж в зависимости от ситуации самому принимать решение каким из них пользоваться. Если вносить в код исходный документа, перечеркивая так по месту - это как раз и будет на постоянной основе (ну да, ведь чтобы поменять - нужно делать правки документа); временно - в основном, когда речь касается вывода в код шаблона (как в статье писали - для привлечения внимания или в рекламных целях). Стилем - это на глобальном уровне, так сказать, что содержимое в блоках с заданным классом всегда перечеркнуто (чтобы весь текст снова сделать не перечеркнутым, то соответственно править документ уже не нужно, достаточно править стиль).
Kosten
Kosten 20.08.2018 14:293
0
Спасибо -SAM- за полный ответ. Просто в описание, повторюсь, по стандарту все описано.
avatar