Html выделить жирным: Как сделать текст жирным? | WebReference

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

Форматирование текста в HTML

Как выделить текст в HTML полужирным шрифтом

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

Как выделить текст в HTML полужирным шрифтом с помощью свойства CSS Font-Weight

Как выделить текст в HTML курсивом

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

Как выделить текст в HTML курсивом с помощью свойства CSS Font-Style

Как подчеркнуть текст в HTML

Как подчеркнуть текст в HTML с помощью неартикулированного элемента аннотации

Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration

Как отрендерить зачеркнутый текст в HTML

Как зачеркнуть текст в HTML с помощью элемента зачеркивания

Как зачеркнуть текст в HTML с помощью удаленного текстового элемента

Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line

Как сделать текстовый индекс в HTML

Как сделать надстрочный текст в HTML

Форматирование текста с помощью HTML и CSS

Работая почти исключительно в Google Docs и CMS Hub, я привык выделять текст жирным шрифтом, курсивом и подчеркивать одним нажатием кнопки.

Но что, если ваша панель инструментов не предлагает тот вариант форматирования, который вам нужен? Или вы не работаете в текстовом редакторе или системе управления контентом?

Нет проблем. Все, что вам нужно, это немного HTML и CSS. Ниже мы обсудим некоторые варианты использования форматирования текста. Затем мы рассмотрим процесс создания полужирного, курсивного, подчеркнутого, перечеркнутого, подстрочного и надстрочного текста.

Примечание: я буду использовать онлайн-редактор кода W3Schools для создания примеров ниже. Вы можете щелкнуть любую ссылку «Исходный код», чтобы увидеть полный фрагмент кода за примером и попробовать свой собственный.

Форматирование текста в HTML

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

На снимке экрана ниже показано введение из книги «Наиболее важные различия между Squarespace и WordPress». Обратите внимание, что «Squarespace» и «WordPress» выделены жирным шрифтом. Это помогает выделить основную тему сообщения в блоге и отличает эти два ключевых слова от неформатированных абзацев, а также отформатированной внутренней ссылки и CTA.

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

Как выделить текст в HTML полужирным шрифтом

Есть несколько способов выделить текст в HTML полужирным шрифтом. Вы можете использовать сильный тег, чтобы указать, что текст имеет большую важность или срочность. Браузеры прочитают этот тег и выделят текст полужирным шрифтом. Если вы хотите выделить текст полужирным шрифтом просто для украшения, вы должны использовать свойство CSS font-weight и установить для этого свойства значение «полужирный».

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

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

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

Вот HTML:

<h2>Using the HTML strong element</h2>
<p>This paragraph is normal.</p>
<p><strong>This paragraph is important!</strong></p>

Вот результат:

Источник изображения

Как выделить текст в HTML полужирным шрифтом с помощью свойства CSS Font-Weight

Если вы хотите просто выделить полужирный текст для украшения, вы должны использовать свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце жирным шрифтом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-weight только к элементу span.

Вот CSS:

span {
font-weight: bold;
}

Вот HTML:

<h2>Using the CSS Font-Weight Property</h2>
<p>This is a <span>keyword</span> so I want to bold it using CSS.</p>

Вот результат:

Источник изображения

Как выделить текст в HTML курсивом

Есть несколько способов выделить текст в HTML курсивом. Вы можете использовать тег em, чтобы указать, что в тексте выделено ударение. Браузеры прочитают этот тег и выделят текст курсивом. Если вы хотите выделить текст курсивом просто для украшения, вы должны использовать свойство CSS font-style и установить для этого свойства значение «курсив».

Есть еще один способ выделить текст в HTML курсивом: тег . Как и тег , он предназначен для использования в крайнем случае. По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.

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

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

Вот HTML:

<h2>Using the HTML emphasis element</h2>
<p>This paragraph is normal.</p>
<p><em>This paragraph is emphasized!</em></p>

Вот результат:

Источник изображения

Как выделить текст в HTML курсивом с помощью свойства CSS Font-Style

Если вы хотите просто выделить текст курсивом для украшения, вы должны использовать свойство CSS font-style вместо элемента выделения HTML. Следуя приведенному выше полужирному примеру, скажем, вы хотите выделить слово в абзаце курсивом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-style только к элементу span.

Вот CSS:

span {
font-style: italic;
}

Вот HTML:

<h2>Using the CSS Font-Style Property</h2>
<p>Get to school <span>now</span>!</p>
<p>I wanted the reader to hear this word in a differnet tone, so I italicized it using CSS.</p>

Вот результат:

Источник изображения

Как подчеркнуть текст в HTML

Чтобы подчеркнуть текст в HTML, используйте свойство CSS text-decoration и установите для этого свойства значение «подчеркивание».

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

Давайте посмотрим на оба метода ниже.

Как подчеркнуть текст в HTML с помощью неартикулированного элемента аннотации

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

Вот HTML:

<h2>Using the HTML unarticulated annotation element</h2>
<p>This paragraph has no spelling mistake.</p>
<p>This paragraph has a spelling <u>mistak</u>.</p>

Вот результат:

Источник изображения

Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration

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

Поскольку text-decoration является сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, вы можете подчеркнуть орфографическую ошибку красной волнистой линией, а грамматическую ошибку – зеленой, например пример.

В приведенном ниже примере мы заключим слова в теги span с разными атрибутами класса. Таким образом, мы можем применить к каждому из них уникальные свойства стиля. Мы также будем использовать шестнадцатеричные коды цветов для красного и зеленого.

Вот CSS:

.spelling {
text-decoration: #FF0000 wavy underline;
}
.grammar {
text-decoration: #008000 wavy underline;
}

Вот HTML:

<h2>Using the CSS Text-Decoration Property</h2>
<p>This paragraph has a spelling <span>mistak</span>.</p>
<p>This paragraph <span>has a grammar mistake</span>.</p>

Вот результат:

Источник изображения

Как отрендерить зачеркнутый текст в HTML

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

Если вы хотите, чтобы текст был зачеркнут по другой причине, вы должны использовать свойство CSS text-decoration-line и установить для этого свойства значение «line-through».

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

Давайте посмотрим на примеры трех методов, поддерживаемых в текущей версии HTML.

Как зачеркнуть текст в HTML с помощью элемента зачеркивания

Если вы хотите зачеркнуть текст, чтобы показать, что он больше не является правильным, точным или актуальным, вы можете поместить текст внутри тегов

Вот HTML:

<h2>Using the HTML strikethrough element</h2>
<p><s>There are still a few scones available. </s></p>
<p>SOLD OUT</p>

Вот результат:

Источник изображения

Как зачеркнуть текст в HTML с помощью удаленного текстового элемента

Если вы хотите зачеркнуть текст, чтобы показать, что он был удален, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.

Вот HTML:

<h2>Using the HTML deleted text element</h2>
<p>The event starts at <del>7 p.m. ET</del> 6 p.m. ET. Sorry for the error.</p>

Вот результат:

Источник изображения

Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line

Если вы хотите зачеркнуть текст для другой цели, вы должны использовать свойство CSS text-decoration-line.

В приведенном ниже примере мы включим имена классов рядом с некоторыми элементами списка. Таким образом, мы можем применить свойство text-decoration-line к этим конкретным позициям, а не ко всему списку.

Вот CSS:

.purchased {
text-decoration-line: line-through;
}

Вот HTML:

<h2>Using the CSS Text-Decoration-Line Property</h2>
<p>Grocery List</p>
<ul>
<li>Jalapeno</li>
<li>Bag of frozen corn</li>
<li>Cotija cheese</li>
<li>Mayo</li>
<li>Chili powder</li>
<li>Cilantro</li>
<li>Lime</li>
</ul>

Вот результат:

Источник изображения

Как сделать текстовый индекс в HTML

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

Чтобы создать подстрочный текст в HTML, используйте элемент _{. Ниже приведен пример, который показывает формулу создания угольной кислоты.}

Вот HTML:

<h2>Using the HTML subscript element</h2>
<p>Here's how it looks with the subscript tag. </p>
<p>CO<sub>2</sub> + H<sub>2</sub>O ↔ H<sub>2</sub>CO<sub>3</sub>
<p>Here's how it looks without the subscript tag.</p>
<p>CO2 + h3O ↔ h3CO3</p>

Вот результат:

Источник изображения

Как сделать надстрочный текст в HTML

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

Чтобы создать надстрочный текст в HTML, используйте элемент ^{. Ниже приведен пример, который показывает полную формулу создания иона бикарбоната.}

Вот HTML:

<h2>Using the HTML superscript element</h2>
<p>Here's how it looks with the subscript and superscript tags.</p>
<p>CO<sub>2</sub> + H<sub>2</sub>O ↔ H<sub>2</sub>CO<sub>3</sub> ↔ H<sup>+</sup> + HCO<sub>3</sub><sup>-</sup></p>
<p>Here's how it looks without the tags. </p>
<p>CO2 + h3O ↔ h3CO3 ↔ H+ + HCO3</p>

Вот результат:

Источник изображения

Форматирование текста с помощью HTML и CSS

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

Источник записи: https://blog.hubspot.com

Как сделать текст жирным в html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать текст жирным?

Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:

— просто делает текст жирным; — говорит, что выделенный текст является важным и отображает текст жирным.

Обратите внимание, что <strong> в первую очередь сообщает о важности выделенного текста и по совместительству делает текст жирным. Поэтому для обычного по важности, но жирного по виду текста, следует использовать <b> (пример 1).

Пример 1. Использование <b>

Чтобы придать жирное начертание длинному тексту, вроде заголовков, удобнее использовать стили, в частности, свойство font-weight. В качестве значения достаточно указать bold (пример 2).

Как выделить текст жирным в css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS урок 9. Выделение текста жирным шрифтом

Казалось бы, зачем использовать CSS для задания жирного шрифта, ведь в html есть специальный тег — <strong>, отвечающий за плотность текста. Более того, имеется его альтернатива — тег <b>.

Но мы ведь знаем, что внешнее оформление сайта нужно выполнять через CSS, а HTML нужен только для структурирования данных веб-страницы. Более того, принято считать что поисковики передают больший вес словам помеченным вышеназванными тегами, а также тегами <em> и <i>.

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

Видеоверсия:
[iframe align=»center» mode=»normal» autoplay=»no» maxwidth=»1280″]

Свойство, отвечающее за плотность текста

Плотность текста мы меняем при помощи свойства font-weight. Оно имеет довольно много значений, и среди них есть лишь два более или менее толковых. Я говорю так, потому что на практике вы чаще всего будете использовать два значения — normal и bold. Первое отвечает за отображение текста с нормальной, привычной толщиной, а второе — с полужирной. Например, давайте выделим все параграфы полужирным шрифтом.

Как видите, все довольно просто. А теперь, давайте отобразим заголовки второго и третьего уровней шрифтом нормальной толщины.

Вы ведь помните, что заголовки по умолчанию отображаются полужирным начертанием? Так вот, при помощи CSS правила выше мы изменили данное положение вещей. Ведь не зря говорят, что нужно мыслить нестандартно.

Когда тебе говорят о необходимости мыслить нестандартно

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

Толщина шрифтов

Как вы помните из урока по подключению шрифтов, они у нас бывают разной толщины и наклона. По плотности шрифты имеют показатели от 100 до 900, где 100 — самый тонкий, а 900 — самый жирный.

Нормальный шрифт, который мы привыкли видеть каждый день имеет толщину 400, что эквивалентно значению normal. Таким образом, мы можем указывать как значение normal, так и 400, разницы никакой нет. Например, давайте зададим заголовку первого уровня шрифт нормальной толщины.

То, что мы привыкли называть жирным шрифтом имеет толщину 700, и на самом деле является полужирным, а также полностью соответствует значению bold.

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

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

Для наглядности можно перейти к сервису google.com/fonts и подключить через директиву @import какой-нибудь шрифт только с нормальной и полужирной толщиной.

Затем попробовать вывести ее на экран в плотности равном 300.

Однако, это ничего не дает, так как на сервере и на компьютере пользователя отсутствует файл шрифта Open Sans с тонким начертанием. Для пущей убедительности давайте подключим файл шрифта с толщиной в 300 (тонкий) и применим его ко всем параграфам.

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

Но если вдруг появится необходимость задействовать какую-нибудь из них, теперь вы знаете как это сделать. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. [popup_trigger tag=»span»] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

font-weight

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

Вы также можете устанавливать значения свойства с помощью чисел от 100 до 900, но это тоже не очень хорошо поддерживается шрифтами и браузерами и редко применяется.

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

Категория: Сайтостроение, Опубликовано: 2017-03-15
Автор: Юлия Гусарь

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

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

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

• Как сделать подчеркнутый текст CSS-стилями
• Подчеркнутый текст HTML-тегами
• Как сделать жирный текст CSS-стилями
• Жирный текст HTML-тегами

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

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

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

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

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

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

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

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

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

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

<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>

Жирный

Еще жирнее

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

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

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

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

Например:

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

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

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

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

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

css выделить жирным текст — ComputerMaker.info

Автор admin На чтение 5 мин. Просмотров 46 Опубликовано 15.12.2019

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

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

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

Содержание

1. Жирный текст: тег Тег b HTML применяется следующим образом: Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.) Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему. Жирный текст: тег Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы. Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный. Используется тег strong аналогичным образом: Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong. Жирный текст при помощи CSS Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом: Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности. Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+ Краткая информация Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Ссылка на спецификацию http://www. w3.org/TR/CSS21/fonts.html#propdef-font-weight Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Синтаксис Значения Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону. HTML5 CSS2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Рис. 1. Применение свойства font-weight Объектная модель [window.]document.getElementBy >elementID «).style.fontWeight Браузеры Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание. Заполняя свой сайт, мы обязательно сталкиваемся с необходимостью форматирования контента, для того, что бы придать ему более наглядный вид или обратить внимание читателя на какие-то основные моменты. В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания. Навигация по статье: Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор. Как сделать подчеркнутый текст CSS-стилями Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline; style = «text-decoration:underline;» > Подчеркнутый текст CSS Подчеркнутый текст CSS Так же это CSS-свойство имеет и другие интересные значения: blink — позволяет сделать слово или предложение мерцающим, line-through — перечёркивает слово или предложение, overline — позволяет провести линию над словом. Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none; Подчеркнутый текст HTML-тегами Если вы столкнулись с необходимостью сделать подчеркивание в единичном случае, то конечно писать стили для этого одного фрагмента не целесообразно. В таких ситуациях вы можете сделать подчеркнутый текст средствами HTML. Для этого вам всего лишь нужно поместить нужный фрагмент между тегами … Как сделать жирный текст CSS-стилями Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями. Итак, свойство font-weight может принимать фиксированные значения: bold – жирный bolder – еще жирнее normal – начальный вид lighter – делает буквы тоньше, по сравнению с normal Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.
2. Жирный текст: тег Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы. Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный. Используется тег strong аналогичным образом: Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong. Жирный текст при помощи CSS Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом: Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности. Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+ Краткая информация Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Синтаксис Значения Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону. HTML5 CSS2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Рис. 1. Применение свойства font-weight Объектная модель [window.]document.getElementBy >elementID «).style.fontWeight Браузеры Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание. Заполняя свой сайт, мы обязательно сталкиваемся с необходимостью форматирования контента, для того, что бы придать ему более наглядный вид или обратить внимание читателя на какие-то основные моменты. В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания. Навигация по статье: Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор. Как сделать подчеркнутый текст CSS-стилями Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline; style = «text-decoration:underline;» > Подчеркнутый текст CSS Подчеркнутый текст CSS Так же это CSS-свойство имеет и другие интересные значения: blink — позволяет сделать слово или предложение мерцающим, line-through — перечёркивает слово или предложение, overline — позволяет провести линию над словом. Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none; Подчеркнутый текст HTML-тегами Если вы столкнулись с необходимостью сделать подчеркивание в единичном случае, то конечно писать стили для этого одного фрагмента не целесообразно. В таких ситуациях вы можете сделать подчеркнутый текст средствами HTML. Для этого вам всего лишь нужно поместить нужный фрагмент между тегами … Как сделать жирный текст CSS-стилями Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями. Итак, свойство font-weight может принимать фиксированные значения: bold – жирный bolder – еще жирнее normal – начальный вид lighter – делает буквы тоньше, по сравнению с normal Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.
3. Жирный текст при помощи CSS
4. Краткая информация
5. Версии CSS
6. Описание
7. Синтаксис
8. Значения
9. Объектная модель
10. Браузеры
11. Навигация по статье:
12. Как сделать подчеркнутый текст CSS-стилями
13. Подчеркнутый текст HTML-тегами
14. Как сделать жирный текст CSS-стилями

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

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

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

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

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

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

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

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

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

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

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

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

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www. w3.org/TR/CSS21/fonts.html#propdef-font-weight

Версии CSS

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window. ]document.getElementBy >elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

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

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

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

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

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

style = «text-decoration:underline;» > Подчеркнутый текст CSS

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

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

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

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

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

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

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

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

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

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

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

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

‘).insertAfter(«#intro»),$(‘

‘).insertBefore(«.youmightalsolike»),$(‘

‘).insertBefore(«#quiz_container»),$(‘

‘).insertBefore(«#newsletter_block_main»),fa(! 0),b=document.getElementsByClassName(«scrolltomarker»),a=0;a

В этой статье:

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

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

Дополнительные статьи

Источники

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

Шаги

1. 1

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

   • Поместите текст, который нужно выделить, внутри тегов: <strong>именно тут</strong>.

2. 2

   Используйте заголовки, если это уместно. Как правило, их размещают в верхних частях страницы или в начале нового раздела. По умолчанию, заголовки отображаются крупнее и жирнее обычного текста, хотя и тут не без тонкостей. Есть шесть уровней заголовков, от 1 до 6:<h2> — <h6>. Follow these guidelines when using them:

   • Заголовок h2 пишется так: <h2>заголовок первого уровня</h2>, и это самый важный, крупнейший заголовок страницы.
   • <h3>Заголовок h3</h3> — для второго по значимости заголовка, ну и так далее вплоть до самого <h6>заголовка h6, самого мелкого из всех</h6>.
   • Использовать заголовки нужно аккуратно, в меру, единственно для упорядочивания контента страницы.^{[1] X Источник информации} Пользователь должен иметь возможность увидеть заголовок как можно быстрее, чтобы понять, под ним ли нужный ему контент.
   • Создавая подзаголовки, стоит опускаться всего на уровень за раз. Иными словами, не надо ставить после <h2> сразу <h4>. Так форматирование страницы при конвертации в иной формат не собьется.^{[2] X Источник информации}

3. 3

   <b>В крайнем случае, используйте тег b</b>. Тег <b> все еще поддерживается в HTML5, но <strong> куда как лучше. Использовать <b> можно в том случае, когда текст выделяется в стилистических, не семантических целях — например, для выделения ключевых или словарных слов, названий товаров и так далее.^{[3] X Источник информации}

   • Как и большинство тегов, <b> — парный, управляющий помещенным внутрь него текстом</b>.

   Реклама

1. 1

   Запомните, когда стоит использовать CSS. CSS — очень мощный и удобный инструмент редактирования внешнего вида страницы. Собственно, CSS — это то, как страница «выглядит», тогда как HTML – то, что она «значит». Конечно, в тегах HTML нет ничего плохого, ими можно пользоваться, но лучше все же работать с CSS — вы получите больше контроля над тем, как именно будет выглядеть ваш текст.

   • Откройте простую HTML-страницу в разных браузерах. Заметили, что она отображается слегка по-разному в каждом? С помощью CSS можно свести эту разницу к минимуму.

2. 2

   Добавьте к тексту тег <span>. Если вы еще не владеете CSS, то начать стоит с так называемого «inline CSS» — «встроенных таблиц стилей», если угодно. Этим, конечно, можно пользоваться, чтобы менять вид тегов вроде <p> или <h2>, но порой так можно поменять и такой текст, который еще не взят в какие бы то ни было теги. ^{[4] X Источник информации} Тег <span></span> — это как бы обертка, которая сама по себе никакого эффекта или влияния не оказывает, но дает нам возможность привнести нужные изменения на страницу. Вот пример:

   • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>

3. 3

   Добавьте атрибут style. Атрибуты в HTML пишутся прямо в теге, прямо в галочках < >. Атрибут style необходим для вставки CSS-кода в HTML-тег, так что вставьте style= в тег span:

   • <span style=>Я учусь выделять текст жирным с помощью inline CSS..</span>
   • Зачем добавлять атрибут style, если не добавлять сам стиль? Мыслите верно. Но мы здесь излагаем все пошагово!

4. 4

   Добавьте свойство font-weight. Свойства CSS добавляются как часть атрибута, в нашем случае — как часть атрибута style, а именно «font-weight» (жирность шрифта, если буквально). Это свойство может быть использовано для задания начертания шрифта, причем не только жирного, но и экстра-жирного, тонкого или нормального. После знака = напишите «font-weight: «. Должно получиться примерно так:

   • <span>Я учусь выделять текст жирным с помощью inline CSS..</span>
   • Пока сделайте паузу, ничего больше не пишите (и да, еще не все).
   • Не забудьте поставить кавычки до и после font-weight:.

5. 5

   Добавьте значение bold. Что осталось? Правильно, задать свойству атрибута значение! Куда его вставить? Правильно, между font-weight: и закрывающей кавычкой. У этого свойства есть несколько разновидностей, отличающихся жирностью начертания, и проще всего будет воспользоваться значением bold:^{[5] X Источник информации}

   • <span>Я учусь выделять текст жирным с помощью inline CSS.</span>

6. 6

   Поэкспериментируйте с другими значениями. CSS дает куда больше возможностей, чем HTML, так что не думайте, будто вы связаны по рукам и ногам. Вот несколько альтернатив значению «bold»:^{[6] X Источник информации}

   • <span>»Bolder» — так текст всегда будет жирнее родительского элемента, сколь бы жирным тот ни был сам по себе.</span> Если весь параграф выделен с помощью «bold,» то «bolder» поможет выделить еще жирнее, скажем, отдельное предложение, находящееся в нем.
   • <span>»Normal» — такой текст будет выглядеть как обычно, даже когда находится внутри тега, выделяющего текст жирным.</span>
   • <span>Для задания жирности текста можно использовать значения от 100 до 900. 400 — обычное начертание, жирное — от 700 и выше.</span>^{[7] X Источник информации}

   Реклама

Советы

• Используя в CSS для задания жирности цифровые значения, используйте те, что кратны 100. Все иные значения все равно будут округляться в большую сторону.^{[8] X Источник информации}
• Внешний CSS-файл, что и говорить, куда удобнее того, о чем рассказывается в этой статье — так можно будет из одного файла управлять внешним видом всех страниц сайта сразу!
• Нельзя сделать шрифт жирнее, чем заложено в него изначально типографами. Работая с CSS, помните — шрифт будет меняться согласно стандарту. Соответственно, разницы между двумя жирными вариантами шрифтов вы не увидите (точнее, можете и увидеть — но это уже зависит от шрифта).

Реклама

Источники

Об этой статье

На других языках

Как выделить текст жирным с помощью HTML — Wiki How Русский

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

Эту страницу просматривали 45 156 раз.

Реклама

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

Если вы работаете исключительно в системе управления контентом, такой как CMS Hub или WordPress, вы привыкли выделять текст жирным шрифтом, курсивом и подчеркиванием одним нажатием кнопки. Но что, если ваша панель инструментов не предлагает точный вариант форматирования, который вам нужен? Или вы не работаете в текстовом процессоре или CMS?

Нет проблем. Все, что вам нужно, это немного HTML и CSS. Ниже мы обсудим некоторые варианты использования форматирования текста. Затем мы рассмотрим процесс создания полужирного, курсивного, подчеркнутого, зачеркнутого, подстрочного и надстрочного текста.

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

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

При выделении текста жирным шрифтом рекомендуется использовать тег вместо тега . Это связано с тем, что является семантическим элементом, а — нет. Согласно спецификации HTML5, несемантические элементы могут затруднить локализацию контента и проверку на будущее. Кроме того, если выделение текста жирным шрифтом чисто стилистическое, лучше использовать CSS и отделить все стили страницы от содержимого.

По этой причине мы будем показывать примеры только с использованием и свойства CSS font-weight.

Избранный ресурс

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

Заполните форму, чтобы получить бесплатные фрагменты кода.

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

Чтобы выделить текст с высокой важностью, поместите текст в теги . Давайте посмотрим на пример.

Вот HTML:

 
 
Это обычный текст абзаца, и это важный текст.
 

 

Вот результат:

Как выделить текст в HTML жирным шрифтом с помощью свойства CSS Font-Weight

Чтобы выделить текст жирным шрифтом просто для украшения, используйте свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце полужирным шрифтом — вы бы заключили это слово в теги и использовали селектор класса CSS, чтобы применить свойство font-weight только к определенному элементу span.

Вот CSS:

 
 .bolded {начертание шрифта: полужирный; } 
 

Вот HTML:

 
 
Это обычный текст абзаца, и это слово выделено полужирным для украшения.
 

 

Вот результат:

Как выделить текст в HTML курсивом

Чтобы выделить текст в HTML курсивом, используйте либо тег em, либо тег i (курсив). Оба этих тега выделяют текст курсивом, но тег em дополнительно указывает, что при чтении в тексте выделяется ударение. Вы также можете выделить текст курсивом, установив для свойства CSS font-style значение «курсив».

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

Узнайте больше: Руководство для начинающих по HTML и CSS

Хотите узнать больше об HTML? Загрузите наше бесплатное руководство с рекомендациями по началу работы с HTML.

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

Чтобы определить текст с ударением, поместите текст внутри тегов . Давайте посмотрим пример.

Вот HTML:

 
 
Это обычный текст абзаца, а это выделенный текст.
 

 

Вот результат:

Как выделить курсивом текст в HTML с помощью свойства CSS Font-Style

Чтобы выделить текст курсивом для украшения, используйте свойство CSS font-style. Представьте, что вы хотите выделить курсивом слово внутри абзаца. Сначала заключите слово в теги , а затем примените свойство font-style только к элементу span.

Вот CSS:

 
 .emphasized { стиль шрифта: курсив; } 
 

Вот HTML:

 
 
Это обычный текст абзаца, и это слово выделено курсивом для украшения.
 

 

Вот результат:

Как подчеркнуть текст в HTML

Чтобы подчеркнуть текст в HTML и CSS, используйте свойство CSS text-decoration, для которого установлено значение «подчеркивание».

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

Рассмотрим оба метода ниже.

Как подчеркивать текст в HTML с помощью элемента неартикулированной аннотации

Если вы хотите отобразить неартикулированный текст или текст с нетекстовой аннотацией, поместите текст внутри тегов . Например:

 
 
В этом wrd написана ошибка, поэтому мы подчеркнули его.
 

 

Вот результат:

 
 .underlined {украшение текста: подчеркивание;} 
 

 
 
Это обычный текст, и  этот текст подчеркнут.
 

 

 
 
Встреча начнется в 17:00 в субботу теперь в воскресенье.
 

 

 
 
Встречи теперь доступны для:
 

 
 <ул> 
 
 
15:00
 

 
 
16:00
 

 
 
17:00
 

 
  
 

 
 .strike { text-decoration-line: line-through; } 
 

 
 
Это обычный текст, и  этот текст сквозной.
 

 

 
 
Химическая формула воды: H2O.
 

 

 
 
Вода необходима для всех форм жизни.1