Тег зачеркивание html. Горизонтальная черта в html или тег hr. Другие теги для форматирования текста

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

Итак, для начала создаем в блокноте пустой текстовый документ. После этого меняем его расширение с txt на html. Открываем его с одновременно с помощью браузера и текстового редактора, например, того же блокнота. Я советую использовать для этих целей программу Macromedia Dreamweaver или Notepad++ .

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

Для того, чтобы изменения вступили в силу необходимо сначала сохранить изменения в редакторе, нажав на дискетку или комбинацию клавиш Ctr+S, а затем обновить этот же документ в браузере.

Заголовки текста разного уровня

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

Поместите здесь текст, который вы хотите сделать заголовком

Цифра 2 рядом с буквой h означает уровень заголовка. Всего уровней 6. Первый уровень – название статьи. Все остальные – заголовки разделов и подразделов.

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

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

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

Жирный курсив

Изменяем размер шрифта

Размер шрифта текста задается в html с помощью тега , у которого есть атрибут «size».

Размер шрифта 5

Как поменять цвет текста

Цвет текста задается тем же самым тегом с помощью атрибута «color»

Текст красного цвета

Текст в таком виде как он был набран

У html есть довольно неприятная особенность. Если вы набрали текст, в котором есть несколько пробелов, идущих подряд, друг за другом, то браузер покажет только один пробел. В некоторых случаях необходимо отобразить текст именно в таком виде, как он был набран. Для этого используется тег
Этот текст будет выглядеть так как он набран

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

Зачеркнутый текст

Вообще говоря в html можно задать зачеркнутый текст с помощью сразу трех разных тегов. Теги и вполне корректно отображаются во всех браузерах, тем не менее, они не рекомендуются к использованию. Они даже не включены в спецификации XHTML и HTML5. Поэтому для создания зачеркнутого текста я рекомендую использовать тег .

~~Зачеркнутый текст~~

Визуально результат использования этого тега ничем не будет отличаться от первых двух. Тем не менее, он несет в себе несколько иной смысл. Предполагается, что этот тег используется для вычеркивания устаревшей или неправильной информации. У данного тега есть 2 атрибута:

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

datetime - предназначен для того, чтобы хранить время последнего редактирования информации.

HTML-элементы del , strike или s могут использоваться для эффекта сквозного текста. Примеры:
~~del~~
Дает: del
~~strike~~ and ~~strike~~
Дает: strike и strike

Свойство CSS text-decoration со значением line-through может быть использовано аналогичным образом. Код...
text-decoration:line-through
Также будет выглядеть так: text-decoration: line-through

Однако строка зачеркивания обычно имеет тот же цвет, что и текст.

Может ли CSS использоваться, чтобы сделать линию другим цветом?
10 ответов
Да, добавив дополнительный элемент упаковки. Назначьте желаемый штриховой цвет внешнему элементу, затем желаемый цвет текста для внутреннего элемента. Например:

black with red strikethrough

~~black with red strikethrough~~

(Обратите внимание, что считается устаревшим в HTML4 и устарел в HTML5 (). Рекомендуемый подход заключается в использовании , если предназначен истинный смысл удаления, или иначе использовать элемент или стиль ~~с text-decoration CSS, как в первом примере здесь.)~~

Чтобы сделать зачеркнутый текст для: hover, должна использоваться явная таблица стилей (объявленная или упомянутая в ). (Псевдокласс класса:hover не может применяться со встроенными атрибутами STYLE.) Например:
hover me
(Кажется, что для IE7 требуется некоторое href в до того, как:hover будет иметь эффект, браузеры на базе FF и WebKit не будут.)
По состоянию на февраль 2016 года , CSS 3 имеет поддержку, указанную ниже. Вот фрагмент с одной страницы продукта WooCommerce с ценовой скидкой
/*Price before discount on single product page*/ body.single-product .price del .amount { color: hsl(0, 90%, 65%); font-size: 15px; text-decoration: line-through; /*noinspection CssOverwrittenProperties*/ text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */ }
В результате:

CSS 3, скорее всего, будет иметь прямую поддержку, используя свойство text-decoration-color . В частности:

Свойство CSS text-decoration-color устанавливает цвет, используемый при рисовании подчеркиваний, надстроек или пропусков, указанных в text-decoration-line . Это предпочтительный способ окраски этих текстовых украшений, а не использование комбинаций других элементов HTML.

Если вы хотите немедленно использовать этот метод, вам, вероятно, придется его префикс, используя -moz-text-decoration-color . (Также укажите его без -moz- , для прямой совместимости.)
Я использовал пустой элемент:after и украсил на нем одну рамку. Вы можете даже использовать преобразования CSS, чтобы повернуть его для наклонной линии. Результат: чистый CSS, без дополнительных HTML-элементов! Даунсайд: не переносится на несколько строк, хотя ИМО вы не должны использовать зачеркивание на больших блоках текста в любом случае.

S, strike { text-decoration: none; /*we"re replacing the default line-through*/ position: relative; display: inline-block; /* keeps it from wrapping across multiple lines */ } s:after, strike:after { content: ""; /* required property */ position: absolute; bottom: 0; left: 0; border-top: 2px solid red; height: 45%; /* adjust as necessary, depending on line thickness */ /* or use calc() if you don"t need to support IE8: */ height: calc(50% - 1px); /* 1px = half the line thickness */ width: 100%; transform: rotateZ(-4deg); }
Here comes some ~~strike-through~~ text!
Здесь используется подход, который использует градиент для подделки линии. Он работает с многострочными ударами и не нуждается в дополнительных элементах DOM. Но поскольку это фоновой градиент, это за текстом...
Del, strike { text-decoration: none; line-height: 1.4; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent)); background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em); background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em); background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em); -webkit-background-size: 1.4em 1.4em; background-size: 1.4em 1.4em; background-repeat: repeat; }
Градиентные цветовые остановки и размер фона зависят от высоты линии. (Позже я использовал LESS для вычисления и Autoprefixer...)
Добавив в @gojomo, вы можете использовать псевдо-элемент:after для дополнительного элемента. Единственное предостережение в том, что вам нужно определить свой innerText в атрибуте data-text , поскольку CSS имеет ограниченные функции content .

~~Strikethrough~~
По моему опыту
black with red strikethrough
не самый лучший вариант. У меня был сотрудник, использующий этот метод без тестирования кросс-браузера, поэтому мне пришлось вернуться и исправить его, потому что это вызвало проблемы в firefox. Моя личная рекомендация заключалась в том, чтобы использовать: после селектора для создания зачеркивания. Таким образом, он может вернуться в IE8, если вы действительно хотите без конфликтов стиля, а также со всеми другими браузерами.

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

До сих пор для зачеркивания текста в HTML-коде широко применяется тег , который является сокращенным написанием тега . Среди множества значений английского слова «strike» имеются «черкать» и «вычеркивать». Вот как выглядят результаты использования этих двух тегов:

~~текст, зачеркнутый с помощью тега → текст, зачеркнутый с помощью тега~~

Как видим, результат идентичен. Все современные браузеры понимают эти теги, но, тем не менее, оба они нерекомендованы для использования. В спецификациях XHTML и HTML5 они вообще отсутствуют. Да и в спецификации HTML 4.0 тоже описываются как нежелательные.

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

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

~~текст, зачеркнутый с помощью тега → текст, зачеркнутый с помощью тега~~

Как видим, визуально нет никакой разницы между ~~, ~~и ~~, но по смыслу – очень даже большая разница.~~~~~~

Тег предназначен для того, чтобы отмечать удаленные строки текста. То есть он несет определенную логическую информацию о тексте и относится к классу так называемых семантических тегов HTML. Форматирование текста как зачеркнутого при применении ~~– это не назначение этого тега а всего лишь следствие его логической сути.~~

Еще раз повторюсь: если вам безразлична идеология языка разметки HTML и важен только визуальный эффект, просто считайте, что для зачеркивания текста предназначен тег ~~а не ~~или ~~. Хотя бы из таких же соображений, по которым пишете «профеССионализм» а не «профеСионализм».~~~~~~

Кроме того, тег более функционален, чем ~~и ~~. Он умеет передавать дополнительную информацию о тексте с помощью атрибутов «cite» и «datetime»:~~~~

Атрибут «cite » предназначен содержать ссылку на документ, в котором приведена причина удаления данного текста и, может быть, другие подробности о его редактировании.

Атрибут «datetime » предназначен указывать дату и время редактирования данного текста.

Что же делать, если вам нужно вывести текст как зачеркнутый, но помечать его как удаленный не хотите? Как уже было упомянуто выше, вам поможет CSS. Более конкретно – свойство «text-decoration», которое имеет значение «line-through». Вот так, например, это можно сделать:

текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS

Чересчур много кода? Согласен. Поэтому можно его уменьшить вынеся инструкции CSS в отдельный файл. В нем можно, например, следующим образом описать класс зачеркнутого текста:
S { text-decoration: line-through; } Это позволит писать в HTML-коде следующим образом:
текст, зачеркнутый средствами CSS → текст, зачеркнутый средствами CSS

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

Предыдущие публикации:

Последнее редактирование: 2011-01-21 16:17:03

Метки материала: ,
Для начала поговорим о заголовках . В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1 , h2 , h3 , h4 , h5 , h6 . Они идут в порядке от самого большого, до самого маленького: h1 - самый большой заголовок, h2 - чуть меньше, ну а h6 , последний из них, соответственно самый маленький.

<a href="/the-device/yazyk-programmirovaniya-html-dlya-chainikov-parallelnoe-izuchenie-html-i-css-zagolovki.html">html заголовки</a>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Демонстрация Скачать исходники
Вышеуказанный код отобразит следующее
Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно , Внимание , А тут вот ещё интересно , то это пойдёт в минус Вашему сайту!
Сразу обращайте на это внимание и делайте заголовки информативными ! Например: Введение в социологию , Парадокс Энштейна-Подольского-Розена , Жизнеописание Горация , Юрский период , в которых должен содержаться Смысл всей или промежуточной информации данной страницы.

Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса .
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф ). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.

html параграфы

Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.

Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.

Демонстрация Скачать исходники
У тега p есть атрибут align , который отвечает за выравнивание параграфа. Может иметь следующие значения:
left - выравнивание по левой стороне
right - выравнивание по правой стороне
center - по центру
jastify - по ширине
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

<a href="/rates/vyravnivanie-v-html-vyravnivanie-teksta.html">html выравнивание</a> параграфов

Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.

Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.

Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.

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

центрирование в html

Текст по центру

Как выделить текст полужирным в html?
strong - стандартное выделение текста жирным.
b - выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные - это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным

<a href="/services/html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i-cvetom-vydelyaem-tekst.html">html выделение</a> жирным

Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю,
например, напоминание, то делаем так. Или так в случае ключевого слова

Демонстрация Скачать исходники
В браузере отобразится следующее
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i - выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em - стандартное выделение курсивом. Нет ограничений в использовании.
cite - данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn - для выделения определений и терминов.
Рассмотрим пример кода c выделением текста курсивом

Допустим страница о машинах

Mercedes-Benz - это немецкий автоконцерн, который был основан в 1886 году.
Название произошло от двух марок - Мерседес и Бенц.
Он занимается в основном выпуском легковых автомобилей премиум-класса, грузовых автомобилей, автобусов.

http://ru.wikipedia.org/wiki/Mercedes-Benz

Демонстрация Скачать исходники
В браузере отобразится так
Как выделить текст подчёркиванием в html?
u - стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins - так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием .
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del - внесённое исправление.
strike - стандартное перечёркивание.
s - сокращённая запись strike

Перечёркнутый текст в html

Дважды два равно ~~пяти~~ четырём. Обычный ~~перечёркнутый текст~~

Демонстрация Скачать исходники
Как выделить текст в верхнем и нижнем индексах в html?
sub - тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup - тег, отображающий текст выше уровня строки шрифтом меньшего размера.

индексы в html

a²+b² = c² - теорема Пифагора.

H₂O - химическая формула воды.

Демонстрация Скачать исходники
В браузере отобразится следующее
Тег font в html
Для редактирования текста в html также используется тег font . Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face - название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size - активные значения от 1 до 7. Шрифт по молчанию равен 3.
color - цвет текста. Если не задать параметр, то текст будет чёрным.

<a href="/rates/belyi-shrift-html-zadaem-shrift-teksta-atribut-face-tega-font-menyaem.html">Тег font</a> в html

Шрифт Tahoma, размер 5, цвет синий.

Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre . Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.

<a href="/frequently-asked-questions/zagolovki-html-tegi-h1-h6-html-formatirovanie-teksta-tegi-strong-b-em-i-blockquote-pre.html">Тег pre</a> в html

Как захотели ввести текст
так он и отобразился! =)

Демонстрация Скачать исходники
В браузере будет так
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру. Аббревиатура - сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
атрибута title

Тег abbr в html

HTML

Демонстрация Скачать исходники
В браузере будет выглядеть так
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

Тег acronym в html

HTML

Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr . Сверу и снизу он выделяется отступами.
У данного тега есть следующие атрибуты:
align - выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width - фиксирует длину черты в пикселях или процентах
size - толщина линии
color - цвет линии
noshade - убирает рельефность линии

Тег font в html

Обычная линия

Линия по центру длиной 50% от ширины блока, толщина линии 2

Линия справа, синяя, 200 пикселей

Демонстрация Скачать исходники
В браузере
Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

CSS позволяет производить самые разнообразные операции, связанные с декоративным украшением всей страницы. Особое внимание уделяется тексту, который в большинстве случаев заполняет большую часть всех сайтов. Сегодня мы с вами рассмотрим одно интересное свойство: надчеркнутый, подчеркнутый и зачеркнутый текст. Все эти эффекты устанавливаются с помощью одного правила CSS.
Присвоение
Подчеркнуть и зачеркнуть текст в CSS можно с помощью команды «text-decoration». Эффект будет зависеть от того, какое указано значение. CSS был придуман, чтобы разделить логическую и структурную часть веб-страницы. Но до появления каскадных таблиц стилей использовались HTML-теги, которые имели аналогичное значение. К примеру, такой элемент, как позволяет вывести зачеркнутый текст. Сейчас данный тег признан нежелательным, и его применение автоматически сделает ваш код страницы невалидным. Хотя при этом элемент до сих пор поддерживается всеми современными браузерами и используется некоторыми разработчиками. Но вернемся к CSS. Команда «text-decoration» может иметь следующие значения:
~~Underline. Назначив данное значение, вы получите~~
~~Overline. Линия будет проходить над определенным фрагментом страницы.~~
~~Line-through. Создает перечеркнутый или зачеркнутый текст.~~
~~Blink. Выделенный фрагмент документа будет периодически исчезать и снова появляться.~~
Также есть значения «none» и «inherit». Первое отменяет все эффекты, а второе приказывает наследовать свойство у родительского элемента.

~~Предназначение~~
Казалось бы, что в CSS зачеркнутый текст и подобные эффекты служат только для украшения текста. В большинстве случаев это утверждение правдивое. Но иногда стоит задуматься над вопросом: для чего создавались такие элементы? К примеру, уже устаревший тег «strike» использовался для обозначения неверной или старой информации. Читатели, увидев перечеркнутый текст, понимают скрытое значение такого обозначения. Подчеркнутые слова всегда сразу же выделяются из общего потока. Поэтому такой эффект необходимо использовать для выделения важной информации. Значение «blink», которое делает текст мигающим, используется довольно редко, так как среди программистов принято считать такой эффект неприемлемым. Ведь мало кому из ваших читателей нравятся мелькающие символы, которые будут постоянно их отвлекать. Ну а значение «overline» используется только для украшения текста.
~~Особенности~~
Хотя все значения свойства «text-decoration» входят в спецификацию версий каскадных таблиц, все же некоторые значения не поддерживаются современными браузерами. Например, мигающий текст не будет виден в IE. Браузер Google Chrome не воспринимает некоторые значения. Мобильные платформы неполноценно поддерживают данное свойство.
~~Заключение~~
Такие эффекты, как зачеркнутый текст и другие схожие значения, применяются довольно часто на просторах Интернета. Их использование позволяет правильно выразить основную идею автора, помогая концентрировать внимание читателей на нужной части текста. Но не стоит слишком усердствовать и при любой возможности применять свойство «text-decoration». Ведь излишнее украшение текста может навредить вам и вашим читателям.