Жирный текст с помощью CSS — «Нубекс»

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

     .nubex1 < font-weight: bold; >.nubex2 < font-weight: bolder; >.nubex3  
Наши сайты - это, действительно, огромный шаг в веб-разработке.
 
Мы делаем по-настоящему качественные сайты.
 
Доверьтесь нам, и мы вас не подведем.
   

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Источник

HTML тег

Элемент (от англ. «bold» ‒ «жирный, полужирный») отображает вложенный в него текст полужирным шрифтом. Допускается одновременное использование данного элемента с другими элементами форматирования текста.

Замечания по использованию

• В соответствии со спецификацией HTML 5 тег следует использовать в крайнем случае, когда нет другого тега являющегося более уместным. Тэг представляет собой фрагмент текста, который стилистически отличается от обычного текста, без передачи какого-либо особого значения или значимости. Обычно он используется для указания ключевых слов в тексте, или других фрагментов текста, которые необходимо выделить жирным шрифтом.
• Не следует путать элемент с элементами , или . Тег определяет важность отмеченного текста, ставит некоторый акцент на тексте и элемент представляет собой текст определенной уместности (выделяется по умолчанию желтым цветом). Элемент не передает такую специальную семантическую информацию; используйте его только тогда, когда никакие другие теги не подходят.
• Точно так же, не отмечайте названия и заголовки с помощью элемента . Для этой цели используйте теги ‒ . Кроме того, используя таблицы стилей можно изменить стиль по умолчанию этих элементов, в результате чего они не обязательно будут отображаются жирным шрифтом.
• Если нет семантической цели по использованию элемента , используйте CSS свойство «font-weight», чтобы отобразить текст жирным шрифтом.

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

Пример использования:

Элемент

Пример HTML:

Часть текста отформатирована с помощью элемента полужирного шрифта.

Спецификации

Поддержка браузерами

Источник

Как выделить текст жирным с помощью HTML

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 13 человек(а).

Количество источников, использованных в этой статье: 7. Вы найдете их список внизу страницы.

Количество просмотров этой статьи: 49 688.

Язык разметки HTML позволяет выделить текст жирным без особых проблем, причем даже сразу несколькими способами. Впрочем, будет лучше, если вы потратите пару минут, изучая базовые правила каскадных таблиц стилей — CSS, и добавите их в документ, чтобы уже потом работать именно там. Суть в том, что куда проще управлять внешним видом веб-страницы из CSS, в том числе и тогда, когда что-то нужно выделить жирным.

Создание жирного текста с помощью HTML

• Заголовок h1 пишется так:
  

  заголовок первого уровня

  , и это самый важный, крупнейший заголовок страницы.

• Заголовок h2

  — для второго по значимости заголовка, ну и так далее вплоть до самого

  заголовка h6, самого мелкого из всех

  .

• Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы. [1] X Источник информации Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
• Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после
  

  сразу . Так форматирование страницы при конвертации в иной формат не собьется. [2] X Источник информации

Источник

Жирный текст с помощью HTML и CSS

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

Обычный текст.
 
Жирный текст.
 
Жирный текст strong.

Обычный текст.

Жирный текст.

Жирный текст strong.

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в 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 теге , то для него по умолчанию прописан такой стиль:

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Источник