✔Жирный текст с помощью HTML и CSS - «Верстка»
Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.
Жирный текст на HTML
Для выделения определенного текста жирным используются специальные HTML теги – и . Например следующий код:
Обычный текст.
[b]Жирный текст.
Жирный текст strong.
На выходе дает такую картинку:
Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег [b] задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое “усиленное” (важное) значение. То есть последняя строка – это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .
Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:
Пример жирного текста.
Пример текста с жирным словом.
На сайте это отображается так:
Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов
и указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег .
Жирный текст на CSS
Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается “насыщенность” фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:
Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.
Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:
Обычный текст с жирным выделением по центру.
Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами:
. my-bold-font {
color: black;
font-weight: 700;
Либо можно написать:
. my-bold-font {
color: black;
font-weight: bold;
Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:
strong {
font-weight: bold;
Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки – если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее “понятное название”. Например, в примере выше стиль class=”my-bold-font” выглядит логичнее чем class=”new-font”, т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.
В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.
