Зачеркивание css. Теги html которые используются для оформления текстa. Перечеркнутый текст: CSS

Рассмотрим все способы как можно сделать зачеркнутый текст через html и CSS. Существует два варианта реализации:

  • Через html теги , и
  • Через свойство CSS text-decoration

1. Зачеркнутый текст через html теги , и

Весь текст заключенные в html теги , и становится зачеркнутым. Необычная буква s произошло в сокращение от английского слова "strike".

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

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

Преобразуется на странице в

Обычный шрифт. Зачеркнутый текст через тег s

Обычный текст. Зачеркнутый текст через тег strike

Обычный текст. Зачеркнутый текст через тег del

2. Зачеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за подчеркивание текста.

Синтаксис CSS text-decoration

text-decoration : none|underline|overline|line-through|inherit ;
  • none - текст без оформления
  • underline - нижнее подчеркивание
  • overline - верхнее подчеркивание
  • line-through - зачеркивание текста
  • blink - мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение line-through , которое задает зачеркивание текста.

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



html заголовки

Заголовок 1


Заголовок 2


Заголовок 3


Заголовок 4



Демонстрация Скачать исходники
Вышеуказанный код отобразит следующее

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

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

Форматирование текста в HTML

Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса .

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф ). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.



html параграфы

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


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



Демонстрация Скачать исходники

У тега p есть атрибут align , который отвечает за выравнивание параграфа. Может иметь следующие значения:

left - выравнивание по левой стороне
right - выравнивание по правой стороне
center - по центру
jastify - по ширине

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру



html выравнивание параграфов

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


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


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




Демонстрация Скачать исходники

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



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

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


Как выделить текст полужирным в html?

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

Рассмотрим пример кода выделения текста жирным



html выделение жирным

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



Демонстрация Скачать исходники
В браузере отобразится следующее

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в 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

a2+b2 = c2 - теорема Пифагора.


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



Демонстрация Скачать исходники
В браузере отобразится следующее

Тег font в html

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

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

face - название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.

size - активные значения от 1 до 7. Шрифт по молчанию равен 3.

color - цвет текста. Если не задать параметр, то текст будет чёрным.



Тег font в html

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



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

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre . Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.



Тег pre в 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 пикселей



Демонстрация Скачать исходники
В браузере

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!


Для зачеркивания текста в HTML применяется тег strike :

  1. Электроник
  2. Сыроежкин
  3. Смирнов
  4. Чижиков
  5. Кукушкина

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

  1. Электроник
  2. Сыроежкин
  3. Смирнов
  4. Чижиков
  5. Кукушкина

Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия - s (аналогично, жирный - b , курсив - i , подчеркнутый - u ):

Конструктор LEGO "Нубекс"

Как вы можете видеть, результат аналогичен:

Конструктор LEGO "Нубекс"

Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной ). Или другой вариант - использовать CSS.

Перечеркнутый текст: CSS

С помощью CSS текст можно "декарировать" при помощи свойства text-decoration . Это свойство может принимать следующие значения:

  • line-through - используется для перечеркивания текста;
  • underline - подчеркивает текст;
  • overline - используется для помещения линии над текстом (надчеркнутый текст);
  • blink - тест мигает (каждую секунду);
  • none - позволяет отменить все эффекты, примененные к тексту.

Указанные значения могут быть применены одновременно, для этого нужно записать нужные параметры через пробел. Например, применим одновременно подчеркивание, надчеркивание и мигание:

Text-decoration: underline blink overline;

Сделаем теперь перечеркнутый текст при помощи CSS:

Зачеркнутый текст CSS - "Нубекс"

Конструктор LEGO сайтов "Нубекс"

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». Ведь излишнее украшение текста может навредить вам и вашим читателям.

Описание

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

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

text-decoration

Стратегическое нападение

Объектная модель

document.getElementById("elementID ").style.textDecoration

document.getElementById("elementID ").style.textDecorationBlink

document.getElementById("elementID ").style.textDecorationLineThrough

document.getElementById("elementID ").style.textDecorationNone

document.getElementById("elementID ").style.textDecorationOverLine

document.getElementById("elementID ").style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.



СХОЖИЕ СТАТЬИ