Способы выделения текста HTML

Здесь мы рассмотрим методы форматирования текста с помощью HTML и встроенных CSS-стилей, применяемых с теле HTML-документа с помощью тега style. Напомню новичкам, что такой способ применения стилей нежелателен, но тем не менее он вполне рабочий и может применяться на практике.

Изменение размера текста

<samp>небольшой</samp> - Небольшой, используется для вывода примеров кода

<small>Маленький</small> - Маленький;

<font style="font-size:10pt;">Ваш текст</font> - Ваш текст - текст с изменением размера шрифта. Примечание: тег <font> устарел, и не рекомендуется к использованию. Вместо него следует использовать CSS.

Изменение начертания текста

<b>Текст</b> - полужирный текст

<i>курсивный</i> - курсивный

<b><i>Ваш текст</i></b> - Полужирный курсив;

В HTML для выделения текста часто используются теги <strong> (для важного текста, обычно выделяется полужирным) и <em> (для акцентирования, обычно курсивом). Это семантически правильные теги, примеры использования strong и em:

<strong>выделение важного текста</strong> - выделение важного текста

<em>акцентированный текст</em> -акцентированный текст

<mark>выделение текста цветом</mark> - выделение текста цветом

Верхний и нижний индексы

Ваш текст^sup - Ваш текст ^sup (Верхний индекс);

Ваш текст_sub - Ваш текст_sub( нижний индекс);

Использование тега span для стилизации

<span style="color:blue">Синий текст текст</span> - Синий текст текст

Синий текст в красной рамке - <span style="border:2px solid red; padding:3px;color:blue;">Синий текст в красной рамке</span>

Красный текст на синем фоне - <span style="background-color: blue; color: red; padding: 3px;">Красный текст на синем фоне</span>

Синий текст зачеркнутый красной чертой - <span style="color:blue;text-decoration:line-through red;">Ваш текст </span>

Красный текст подчеркнутый синей линией - <span style="color:red;text-decoration:underline blue;">Ваш текст</span>
Белый текст на синем фоне в красной рамке - <span style="background-color:dodgerblue; color:white;padding:3px; border:3px solid red;">Ваш текст</span>

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

Текст, подчеркнутый красными точками - <span style="border-bottom: 3px dotted red;">Ваш текст</span>

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

Генератор форматирования текста с помощью <span>

Воспользуйтесь генератором, чтобы быстро форматировать текст и получать нужный код HTML с инлайн-стилями вида <span style="color:red;...>

Использование CSS классов

Вместо inline-стилей (например, style="color:blue;") можно использовать CSS-классы для более гибкого управления стилями. Пример:

<style>
  .blue-text { color: blue; }
  .red-border { border: 2px solid red; padding: 3px; }
</style>
<span class="blue-text red-border">Синий текст в красной рамке</span>

Дополнительные примеры

Текст с рамкой

<span style="border: 1px solid black; padding: 5px; display: inline-block;">Текст с рамкой</span> 

Текст на фоне с закругленными углами

<span style="background-color: blue; color: white; padding: 5px; border-radius: 5px;">Текст в рамке с закругленными углами</span>

Текст с анимацией

<style>
  .animated-text {
    animation: color-change 2s infinite;
  }
  @keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
  }
</style>
<span class="animated-text">Текст с анимацией цветом</span>