Здесь мы рассмотрим методы форматирования текста с помощью 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</sup> - Ваш текст sup (Верхний индекс);
Ваш текст<sub>sub</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>
Очень, очень интересно! Применил у себя на блоге. Поэкспериментировал с тегами. Возьму на заметку.
Очень нужные статьи для начинающих. Написаны статьи понятно, даны примеры, это замечательно. Большая благодарность автору статей.
<span style=font-faMAESTROmily:Monotype Corsiva;>ARISTOKRATKING85
Красный текст подчеркнутый синей линией - цвета наоборот 🙂
Бывает ))
sup