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

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

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

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

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

 <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 style="border-bottom: 2px dashed red;">Текст, подчеркнутый пунктиром</span>

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

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

<span style="background-color:blue; color:white; padding:3px;">Цветной текст с цветным фоном</span>

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

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

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

<span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span> 

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

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

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

<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>

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

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

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

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

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

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

Буквица

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

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

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