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

font-weight

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

Синтаксис

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

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

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

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

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

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

Работая почти исключительно в 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 жирным шрифтом с помощью сильного элемента

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

Using the HTML strong element
 
This paragraph is normal.
 
This paragraph is important!
 

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

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

span

Using the CSS Font-Weight Property
 
This is a keyword so I want to bold it using CSS.
 

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

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

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

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

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

Using the HTML emphasis element
 
This paragraph is normal.
 
This paragraph is emphasized!
 

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

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

span

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

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

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

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

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

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

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

Using the HTML unarticulated annotation element
 
This paragraph has no spelling mistake.
 
This paragraph has a spelling mistak.





 

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

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

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

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

.spelling < text-decoration: #FF0000 wavy underline; >.grammar

Using the CSS Text-Decoration Property
 
This paragraph has a spelling mistak.





 
This paragraph has a grammar mistake.
 

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

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

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

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

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

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

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

Using the HTML strikethrough element
 
There are still a few scones available.
 
SOLD OUT





 

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

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

Using the HTML deleted text element
 
The event starts at 7 p.m. ET 6 p.m. ET. Sorry for the error.
 

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

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

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

.purchased

• Jalapeno
• Bag of frozen corn
• Cotija cheese
• Mayo
• Chili powder
• Cilantro
• Lime

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

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

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

Using the HTML subscript element
 
Here's how it looks with the subscript tag.





 
CO2 + H2O ↔ H2CO3 
Here's how it looks without the subscript tag.
 
CO2 + H2O ↔ H2CO3
 

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

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

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

Using the HTML superscript element
 
Here's how it looks with the subscript and superscript tags.
 
CO2 + H2O ↔ H2CO3 ↔ H+ + HCO3-
 
Here's how it looks without the tags.
 
CO2 + H2O ↔ H2CO3 ↔ H+ + HCO3





 

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

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

Элемент b

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

Примечание

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

Условия использования

В спецификации HTML5 использование данного элемента предполагается в качестве одного из последних средств выделения текста. Так как согласно HTML5:

• выделение заголовков отводиться группе элементов h1‒h6 ;
• значимая часть текста должна быть выделена элементом em (курсив);
• важная часть текста должна быть выделена элементом strong (полужирный шрифт);
• условное выделение текста производиться с помощью элемента mark (жёлтый фон).

Внешний вид текста в html-документе

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

За внешний вид текста в html-документе отвечает тег . Это тег парный: значит в конце абзаца нам необходимо его закрыть — .

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

Так же на примере видно, что тег — вложенный тег, он прописан внутри тега

.

Кроме атрибута color , тег имеет еще один важный атрибут — это атрибут face . Он отвечает за шрифт текста — какой шрифт будет использоваться в этом абзаце. Самые распространенные шрифты на сегодня — это Verdana , Tahoma . Рекомендуется пользоваться именно этими шрифтами, так как при использовании экзотических шрифтов, таковых может не оказаться на компьютере посетителя вашего сайта и страница у него будет отображаться стандартным шрифтом.

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

Текст абзаца выделение в тексте жирным текст

Если же мы хотим сделать выделение в тексте курсивом, применяем тег .

Текст абзаца выделение курсивом текст

При желании, текст можно выделить и жирным, и курсивом. В этом случае к тегу добавим еще тег :

Текст выделение жирным курсивом текст

В литературе вы можете встретить, что для выделения текста жирным применяется тег . Это устаревший тег. Именно он использовался для выделения текста жирным в предыдущих версиях языка html. Тоже самое и с курсивом : раньше, для выделения текста курсивом, использовался тег .