Выделяем текст. Жирный шрифт. HTML-пособие для начинающих. Сделать текст жирным


Делаем текст жирным с помощью CSS и HTML

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

  • Тег b;
  • Тег strong;
  • CSS-свойство font-weight.

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег <b>

Тег b HTML применяется следующим образом:

<b>Конструктор сайтов "Нубекс"</b>

Для тега <b> обязательно наличие закрывающего </b>, и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег <strong>

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги <strong></strong>, и помечают его именно как важный.

Используется тег strong аналогичным образом:

<strong>Конструктор сайтов "Нубекс"</strong>

Вы можете заметить, что внешне применение тегов <b> и <strong> совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Жирный текст с помощью CSS - "Нубекс"</title> <style> .nubex1 { font-weight: bold; } .nubex2 { font-weight: bolder; } .nubex3 { font-weight: 600; } </style> </head> <body> <center> <p>Наши сайты - это, действительно, <span>огромный шаг</span> в веб-разработке.</p> <p>Мы делаем по-настоящему <span>качественные</span> сайты.</p> <p>Доверьтесь нам, и мы вас <span>не подведем</span>.</p> </center> </body> </html>

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

nubex.ru

Как сделать жирный шрифт на HTML и CSS

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

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

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

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

<p>Обычный текст.</p> <p><b>Жирный текст</b>.</p> <p><strong>Жирный текст strong</strong>.</p>

<p>Обычный текст.</p> <p><b>Жирный текст</b>.</p> <p><strong>Жирный текст strong</strong>.</p>

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

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

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p> <p>Пример текста с <span>жирным</span> словом.</p>

<p>Пример жирного текста.</p> <p>Пример текста с <span>жирным</span> словом.</p>

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов <p> и <span> указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег <strong>.

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

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font { color: black; font-weight: 700; }

. my-bold-font { color: black; font-weight: 700; }

Либо можно написать:

. my-bold-font { color: black; font-weight: bold; }

. my-bold-font { color: black; font-weight: bold; }

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

strong { font-weight: bold; }

strong { font-weight: bold; }

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

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

design-mania.ru

Выделяем текст. Жирный шрифт. HTML-пособие для начинающих

Один из наиболее простых способов выделить в тексте слово или фразу – использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный шрифт. HTML-разметка страницы с легкостью позволяет выделять слова с помощью различного начертания – курсивного, подчеркнутого, жирного.

Жирный шрифт как способ выделить главное

Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга <b> </b>.

Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг <b>. После последней буквы в тексте, который следует выделить, ставится закрывающий тэг </b>. Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.

Другие варианты выделения

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

Так, можно выделить текст курсивом с помощью парного тэга <i> </i>, подчеркнуть его с помощью <u> </u>. Это наиболее простые способы выделения текста.

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать <s> </s>. Сделать текст моноширным поможет парный тэг <tt> </tt>. Если вам нужно создать верхний индекс, используйте <sup> </sup>, нижний - <sub> </sub>.

При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное – запомнить данные коды или записать их.

Использование нескольких шрифтов

Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.

При этом надо помнить одно – все тэги должны закрываться последовательно. Например, правильная запись может быть такой:

  • <i><u><b> выделенный текст </b></u></i>.

Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:

  • <i><u><b> выделенный текст </u></b></i>.

В таком случае браузер запутается и не поймет, что именно вы от него хотите.

Кстати, тут можно отметить, что три варианта начертания – жирное, подчеркнутое и курсивное - запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.

Выводы

Для выделения текста широко используются не только разнообразные цвета и оттенки, разный размер и тип шрифта, но и его начертание. Причем именно с помощью другого очертания можно красиво и легко выделить тот или иной фрагмент текста.

Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы - наиболее яркий и заметный, а потому используется наиболее часто для выделения.

fb.ru

Как сделать жирный шрифт в HTML

Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег <strong> является тегом логического форматирования и его суть: "подчеркнуть" важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег <em> выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

Не стоит использовать тег <strong> слишком часто. Страница перенасыщенная тегами <strong>, может быть "наказана" поисковыми системами. То же самое может произойти, если вы будете выделять все поисковые ключевые фразы на странице, либо одну и ту же фразу много раз.

Пример как сделать жирный шрифт HTML тегом <strong>:

<p>Обычный текст <strong>выделенный важный фрагмент текста</strong>. Обычный текст.</p>

Жирный текст с помощью тега b

В отличии от тега <strong>, тег <b> не придает выделенному участку дополнительный логический смысл. Тег <b> является тегом физического форматирования и его предназначение - изменить стиль начертания текста.

То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг - используйте тег <b>.

<p>Обычный текст <b>текст жирным шрифтом</b>. Обычный текст.</p>

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.

Свойство CSS внутри атрибута style:

<p>Текст жирным шрифтом.</p>

Класс CSS:

<style> .bold_text { font-weight: bold; } </style> <p>Текст жирным шрифтом.</p> <p>Текст обычным шрифтом.</p> <p>Текст жирным шрифтом.</p>

Что делать, если выделить текст жирным не получается

Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).

guruweba.com

Как сделать жирный текст в html: несколько простых способов

Приветствую вас, любителей разобрать что-то новенькое и пополнить свой сундук знаний новой информацией! После прочтения статьи вы узнаете, как сделать жирный текст в html, какие еще существуют виды начертаний и какие элементы за это отвечают. А в результате ваш сайт сможет похвастаться читабельным текстом с верно выделенными ключевыми моментами.

В прошлых статьях я много говорил об атрибутах и тегах веб-языков, о методах оформления внешнего вида и структуры сайтов, но ни разу не затрагивал некий объект, без которого не сможет прожить ни один сайт. Это текст.

При чем не просто сплошной набор букв, а грамотно разделенный на параграфы, с выделением ключевых слов, цитат, ссылок и т.д. Для этого в языках css и html предусмотрены специальные инструменты начертаний. Приступим же!

Возможности начертания в html

Шрифт текстового контента всегда можно видоизменить. Например, задать жирное начертание или курсивное, а также его можно декорировать. Для этого существуют простые теги, которые очень легко запомнить и после применять. Ниже представлена таблица элементов, которая разъясняет их предназначение.

Видоизменение текста Теги
Жирное выделение контента <b>, <strong>
Курсивное выделение контента <i>, <em>

Для начала разберемся с жирным начертанием текстовых элементов.

Чтобы увеличить толщину букв, существуют такие парные теги как <b> и <strong>. В современных браузерах использование этих инструментов отображается одинаково, так как они форматируют текст в жирный. Однако их предназначение различно. Поэтому их нельзя назвать эквивалентными и использовать только какой-то один из них.

Так, тег <b> создавался с условием изменения стандартного шрифта в насыщенный и утолщенный. Он относится к физическому виду начертания и никакой смысловой нагрузки не несет. Так скажем, это просто разновидность отображения теста.

А <strong> предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.

Теперь рассмотрим такие теги, как <i> и <em>.

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!

Действительно, единица языка разметки <em> предназначена для установки акцентов на важных моментах и деталях, в то время как <i> всего лишь разновидность внешнего вида содержимого.

Инструменты видоизменения шрифтов в css

Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.

text-decoration – это универсальный параметр, который дополняет шрифт некими деталями. Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).

Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).

А вот и пример

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset=utf-8"> <title>Видоизменение текста</title> <style type="text/css"> h2 { font-size: 32px; font-weight: lighter; font-style: oblique; text-decoration: overline; } p { font-variant: small-caps; font-size: 18px; } em { text-decoration: line-through; } </style> </head> <body> <h2>Создаем заголовок для <strong>нового</strong> абзаца!</h2> <p>Пишем текстовый контент самого абзаца, который <em> <b>мигает</b> </em>.</p> </body> </html>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset=utf-8"> <title>Видоизменение текста</title> <style type="text/css"> h2 { font-size: 32px; font-weight: lighter; font-style: oblique; text-decoration: overline; } p { font-variant: small-caps; font-size: 18px; } em { text-decoration: line-through; } </style> </head> <body> <h2>Создаем заголовок для <strong>нового</strong> абзаца!</h2> <p>Пишем текстовый контент самого абзаца, который <em> <b>мигает</b> </em>.</p> </body> </html>

Запустите пример в браузере и обратите внимание на оформление стилей. Так, заголовок выделен светлым наклоненным начертанием с подчеркиванием над предложением. Абзац же отображается маленькими прописными буквами. При этом в тексте есть логические и физические выделения слов.

Теперь вы сможете отредактировать текстовое наполнение своих сайтов по всем правилам. Подписывайтесь на обновления моего блога и приглашайте друзей. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 166 раз

romanchueshov.ru

Жирный или подчеркнутый текст в CSS и HTML

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

В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания.

Навигация по статье:

Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор.

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

<div> <p>Подчеркнутый текст CSS</p> </div>

<div>

<p>Подчеркнутый текст CSS</p>

</div>

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

  • blink — позволяет сделать слово или предложение мерцающим,
  • line-through — перечёркивает слово или предложение,
  • overline — позволяет провести линию над словом.

Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;

Подчеркнутый текст HTML-тегами

Если вы столкнулись с необходимостью сделать подчеркивание в единичном случае, то конечно писать стили для этого одного фрагмента не целесообразно. В таких ситуациях вы можете сделать подчеркнутый текст средствами HTML. Для этого вам всего лишь нужно поместить нужный фрагмент между тегами <u>… </u>

<div> Делаем <u>подчеркнутый текст HTML-тегом</u>. </div>

<div>

Делаем <u>подчеркнутый текст HTML-тегом</u>.

</div>

Делаем подчеркнутый текст HTML-тегом.

Как сделать жирный текст CSS-стилями

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

  • bold – жирный
  • bolder – еще жирнее
  • normal – начальный вид
  • lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

<div> <p>Жирный</p> <p>Еще жирнее</p> <p>Совсем не жирный текст CSS</p> <p>Очень жирный текст CSS</p> </div>

<div>

<p>Жирный</p>

<p>Еще жирнее</p>

<p>Совсем не жирный текст CSS</p>

<p>Очень жирный текст CSS</p>

</div>

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

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

Так же как и в ситуации с подчеркиванием, если вам нужно в единичных случаях выделить одно или несколько слов, можно использовать для этого специальные HTML-теги, такие как <b>…</b>, или его аналог <strong>… </strong>.

Например:

Делаем <b>жирный текст</b> с помощью <strong> html-тегов </strong>.

Делаем <b>жирный текст</b> с помощью  <strong> html-тегов </strong>.

Делаем жирный текст с помощью html-тегов .

Если у вас возникнут вопросы или вы захотите поделиться своими приемами форматирования, вы можете это сделать в комментариях. Если эта статья вам понравилась и была для вас полезной, не забудьте подписаться на мою рассылку и поделиться ссылкой на статью в социальных сетях.

А на сегодня у меня все! Успешного вам форматирования текста! До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Начертание шрифтов в HTML. Как сделать текст жирным, курсивным или зачеркнутым?

Что такое шрифт и его начертание?

Прежде чем начать изучение элементов, затрагивающих тему данной статьи, нужно дать исчерпывающее определение двум понятиям: шрифт и начертание шрифта. Вы не раз сталкивались с их реализацией в текстовых редакторах, таких как Microsoft Word. Настало время более подробно разобраться в этом, но применительно к HTML-разметке документов.

Шрифт — способ графического отображения букв и знаков из определенного доступного набора. Этот способ отображения должен формировать единую стилистическую систему. В качестве примера посмотрите на один из самых распространенных шрифтов «Times New Roman», отличающийся острыми засечками на концах букв.

Начертание — вариант отображения символов и знаков, относящихся к определенному шрифту. Основная стилистика графического отображения сохраняется. Начертание влияет только на жирность шрифта, наклонность и разреженность.

рис1. Отображение различных шрифтов и их начертаний.

Курсивный и жирный текст

Для выделения текста курсивом в HTML существует элемент <i>. Он является строковым, поэтому не имеет собственной длины и ширины, а размер занимаемого им пространства определяется обрамленным текстом. Весь текст, помещенный между открывающим тегом <i> и закрывающим </i>, поменяет начертание своего шрифта на курсив (разг. Наклонный).

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример использования курсивного шрифта</title> </head> <body> <p>Часть данного текста будет <i>наклонной</i></p> </body> </html>

В HTML также есть способ сделать участок текста жирным. Для этого используется элемент <b>. Как можно догадаться он также является строковым элементом. Если поместить часть текста между открывающим тэгом <b> и закрывающим </b>, то он поменяет начертание своего шрифта на жирный.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример использования жирного шрифта</title> </head> <body> <p>Этот был <b>очень хороший</b> и светлый день</p> </body> </html>

ЗаметкаВы можете суммировать эффекты различных элементов за счет их вложенности друг в друга. Например, разметка «<i><b>Пример вложенности</b></i>» сделает выделенный текст жирным и курсивным одновременно.

Зачеркнутый и подчеркнутый текст

Зачеркивание и подчеркивание в HTML реализуется за счет двух элементов: <s> - зачеркивание текста, <u> - подчеркивание текста. Принцип их работы полностью схож с примерами, приведенными выше. Весь текст, заключенный между их открывающим и закрывающими тегами, станет подчеркнутыми или зачеркнутым, в зависимости от используемого элемента.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример зачеркнутого и подчеркнутого текста</title> </head> <body> <h2>Список дел на сегодня:</h2> <p><s>Погладить одежду перед уходом на работу.</s></p> <p><u>Разнести деловую корреспонденицю сотрудникам.</u></p> </body> </html>

coder-booster.ru