Зачеркивание текста html: Делаем текст зачеркнутым с помощью HTML — Вебджем.рф

Содержание

Как сделать зачеркнутый текст в html

Категория: Сайтостроение, Опубликовано: 2016-07-29
Автор: Юлия Гусарь

Приветствую вас, дорогой читатель, случайно или умышленно зашедший на мой блог!

В данной статье я покажу несколько способов как сделать в html зачёркнутый текст.

Навигация по статье:

Использование тегов stike и s для зачёркивания текста
Использование html тега del для зачёркнутого текса
Как сделать зачеркнутый текст на css?

Выглядеть он будет вот так: ~~зачеркнутый текст в html~~

Для чего это может понадобится?

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

Для создания такого зачёркнутого текста можно воспользоваться одним из специальных тегов.

Использование тегов

stike и s для зачёркивания текста

Тег strike

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

Сам код для зачёркнутого текста будет выглядеть так:

<strike>html тег для зачеркнутого текста</strike>

Вот что получится в итоге:

html тег для зачеркнутого текста

Тег s

Тот же тег stike, но в сокращённом виде.
html код зачеркнутого текста будет выглядеть так:

<s>html тег для зачеркнутого текста</s>

Результат этого кода выглядит так:

~~html тег для зачеркнутого текста~~

В последней спецификации HTML данные теги не рекомендованы к использованию, так как они относятся к классу форматирования текста, а не к классу разметки страницы.

Конечно, в их использовании нет ничего критичного. Просто всё оформление текста лучше задавать через CSS. Данные теги считаются уже устаревшими так как сейчас для создания подчёркнутого текста стараются использовать не их, а стилизацию через CSS или тег del.

Использование html тега

del для зачёркнутого текса

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

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

Для того чтобы сделать зачёркнутый текст при помощи html можно воспользоваться следующим кодом:

<del>html тег для зачеркнутого текста</del>

Результат его использования будет выглядеть так:

~~html тег для зачеркнутого текста~~

Как видите полученный результат ничем не отличается от того что мы получили при использовании тегов strike и s.
Использование тега del более предпочтительно для использования при вёрстке сайтов.

Как сделать зачеркнутый текст на css?

Самым оптимальным вариантом для создание зачёркнутого текста на html странице будет использование CSS. Правда этот способ немного дольше и длиннее, поэтому его применение не всегда оправдано.

Для создания зачёркнутого текста в CSS существует специальное CSS свойство text-decoration со значением line-through
Для того чтобы сделать зачёркнутый текст нужно его заключить в тег span или любой другой и присвоить этому тегу определённый класс, а затем в CSS для этого класса указать свойство text-decoration:line-through;

html код зачёркнутого текста будет выглядеть так:

<span class=”strike-text”>html тег для зачеркнутого текста</span>

А вот CSS код:

. strike-text { text-decoration:line-through; }

.strike-text {

text-decoration:line-through;

}

Также можно задать это CSS свойство в самом теге при помощи атрибута style:

<span style=”text-decoration:line-through;”>html тег для зачеркнутого текста</span>

Правда этот вариант тоже не всегда приветствуется. Но в любом случае выбирать вам!

Для создания зачёркнутого текста у нас есть аж целых 5 способов! Так что выбирайте любой из них и смело используйте у себя на сайте.

На этом у меня всё. Подписывайтесь на обновления блога и заходите на мой канал YouTube. Там много полезных видео уроков.
Желаю вам хорошего настроения и до встречи в следующих статьях!

С уважением Юлия Гусарь

Эффекты текста в HTML: подчеркивание, зачеркивание и другие

Форматирование текста и визуальные эффекты — это база HTML. В этом небольшом туториале вы можете найти коды HTML, которые видоизменяют визуально ваш текст. Итак, поехали.

Зачеркивание текста
Подчеркивание текта
Жирный текст

Увеличенный текст
Наклоненный текст
Верхний и нижний регистр
Текст разного размера
Подчеркивание пунктиром
Текст с цветным фоном
Двойное подчеркивание
Текст в 3D рамке
Разбитие текста на колонки
Буквица

Зачеркивание текста

Что мы сделаем: ~~Ваш текст будет здесь.~~

Зачем это может понадобиться — решать вам, а я приведу код, который поможем вам отобразить текст таким образом:

 <s>Ваш текст будет здесь</s>

Подчеркивание текта

Что мы сделаем: Ваш текст будет здесь.

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

 <u>Ваш текст будет здесь</u>

Жирный текст

Жирный текст будет выглядеть таким образом: Ваш текст будет здесь.

И вот код HTML которым можно вывести такой тип текста:

<b>Ваш текст будет здесь</b>

Увеличенный текст

Вот как такой текст можно сделать:

 <big>Ваш текст будет здесь</big>

Наклоненный текст

Один из базовых типов изменений текста выглядит так: Your text.

Выводится в HTML он таким образом:

 <i>Ваш текст будет здесь</i>

Верхний и нижний регистр

Верхний регистр: Какой-то текст ^{тут тоже текст}

Нижний регистр: Какой-то текст _{^{тут тоже текст}}

Верхний регистр на HTML можно вывести таким образом:

Здесь будет основной текст<sup>а тут верхний регистр</sup>

А нижний можно сделать так:

Здесь будет основной текст<sub>а тут нижний регистр</sub>

Текст разного размера

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

 <font size="+3">Ваш текст будет здесь</font>

Число можно изменить на свое. Можно вставить и отрицательное значение — это допустимо и, как не сложно догадаться, уменьшает размер вашего текста.

Подчеркивание пунктиром

Тоже довольно распространенный эффект, который выводится в HTML таким образом:

 <span>Текст, подчеркнутый пунктиром</span>

Текст с цветным фоном

Код будет выглядеть таким образом:

<span>Цветной текст с цветным фоном</span>

Результат исполнения кода будет таким:

Цветной текст с цветным фоном

Двойное подчеркивание

Код такого текста выглядит таким образом (значения можно менять на свои):

<span>Текст, подчеркнутый двойной чертой</span>

Исполнение кода:

Текст, подчеркнутый двойной чертой

Текст в 3D рамке

Очень интересный визуальный эффект и мне кажется он может найти свое применение на вашем сайте:

<span> Ваш текст в объемной 3D-рамке</span>

Результат исполнения будет выглядеть так:

Ваш текст в объемной 3D-рамке

Разбитие текста на колонки

Код выглядит таким образом:

<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>

Исполнение кода:

текст левой колонки

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

Примечательно, что WordPress, на котором работает этот блог, в этом случае добавляет таблицу.

Буквица

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

 <font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>

Вот исполнение:

Внекотором царстве…

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом ~~, с синтаксисом и примерами.~~

Описание

Тег HTML придает тексту вид перечеркнутого текста, который рисует горизонтальную линию над текстом. Этот тег также часто называют элементом .

ПРЕДУПРЕЖДЕНИЕ: Тег ~~был удален из HTML5. Вместо этого вы можете попробовать использовать тег ~~или тег .~~~~

Синтаксис

~~В HTML синтаксис тега :~~

 
Зачеркнутый текст здесь, но не здесь

Пример вывода

Атрибуты

~~К тегу ~~применяются только глобальные атрибуты. Нет атрибутов, специфичных для тега .~~~~

Примечание

~~HTML-элемент ~~находится внутри тега.~~~~
Тег используется для рисования горизонтальной линии над текстом ( также называется зачеркиванием

).
~~См. также тег ~~и тег .~~~~

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

~~Тег ~~имеет базовую поддержку со следующими браузерами:~~~~

~~Chrome~~
~~Андроид~~
~~Firefox (Геккон)~~
~~Firefox Mobile (Геккон)~~
~~Internet Explorer (IE)~~
~~Пограничный мобильный~~
~~Опера~~
~~Опера Мобайл~~
~~Сафари (веб-кит)~~
~~Сафари Мобильный~~

Пример

Мы обсудим тег ~~ниже, исследуя примеры использования тега ~~в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.~~~~

~~HTML5~~
~~HTML4~~
~~XHTML~~

Документ HTML5

~~Вы не можете использовать тег ~~в HTML5.~~~~

~~Вместо этого вы можете попробовать использовать тег ~~или тег .~~~~

HTML 4.01 Transitional Document

~~Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег ~~может выглядеть следующим образом:~~~~

 
  
<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
 Заголовок 1 
Мы хотим вычеркнуть этот текст.

В этом примере переходного документа HTML 4.01 мы создали тег , который заключает в себе текст «этот текст», который будет отображать горизонтальную линию через текст ( , т.е.: зачеркивание ).

Документ XHTML 1.0 Transitional

~~Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег ~~может выглядеть следующим образом:~~~~

  0 Transitional// RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<голова>

<center><ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
 Заголовок 1 
Мы хотим вычеркнуть этот текст.

В этом примере переходного документа XHTML 1.0 мы создали тег , заключающий в себе текст «этот текст», который отображает горизонтальную линию через текст ( т.е. зачеркнуто ).

XHTML 1.0 Strict Document

~~Вы не можете использовать тег ~~в XHTML 1.0 Strict.~~~~

Документ XHTML 1.1

~~Вы не можете использовать тег ~~в XHTML 1.1.~~~~

~~Поделись:~~

~~Рекламные объявления~~

Тег HTML

~~❮ Пред. Следующий ❯~~

~~Тег ~~используется для определения перечеркнутого текста.~~~~

Элемент ~~является устаревшим тегом HTML и не поддерживается в HTML5. Вместо этого используйте &ltdel>, &lts> или стили CSS.~~

~~Для создания зачеркивания вы также можете использовать CSS text-decoration:line-through; с тегом~~