Как сделать шрифт жирным в html: Тег | htmlbook.ru

Элемент HTML определяет надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного линия, а иногда отображается более мелким шрифтом. Можно использовать надстрочный текст для сносок, например WWW ^[1] :

Упражнения HTML

Элементы форматирования текста HTML

Элементы цитаты HTML

В этой главе мы рассмотрим

, , , <адрес> , , и HTML-элементов.

---

Пример

Вот цитата с сайта WWF:

Уже почти 60 лет WWF защищает будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах и поддерживается более чем одним миллионом членов в Соединенных Штатах и почти пять миллионов во всем мире.

Попробуй сам »

---

HTML

для предложений

Элемент HTML

определяет раздел, который цитируется из другого источника.

Браузеры обычно делают отступ

элементов.

Пример

Вот цитата с веб-сайта WWF:

На протяжении 50 лет WWF защищает будущее природа.
Мир ведущая природоохранная организация,
WWF работает в 100 странах и является при поддержке
1,2 миллиона членов в США и
человек, близких к 5 миллионов во всем мире.

Попробуй сам »

---

HTML

для коротких предложений

Тег HTML определяет короткую цитату.

Браузеры обычно заключают кавычки в кавычки.

Пример

Цель WWF: Построить будущее, в котором люди будут жить в гармонии с природа.

Попробуй сам »

---

---

HTML

для сокращений

Тег HTML определяет аббревиатуру или акроним, например «HTML», «CSS», «Mr.», «Доктор», «Как можно скорее», «Банкомат».

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

Совет: Используйте глобальный атрибут заголовка для показать описание для аббревиатура / акроним при наведении указателя мыши на элемент.

Пример

ВОЗ была основана в 1948г.

Попробуй сам »

---

HTML

<адрес> для контактной информации

Тег HTML

определяет контактную информацию автора / владельца документа. или статья.

Контактная информация может быть адресом электронной почты, URL, физическим адресом, телефоном. номер, идентификатор социальной сети и т. д.

Текст в элементе

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

.

Пример

Написано Джоном Доу.

Посетите нас по адресу:

Example.com

Box 564, Диснейленд

США

Попробуй сам »

---

HTML

для названия работы

Тег HTML определяет заголовок творческая работа (эл.грамм. книга, стихотворение, песня, фильм, картина, скульптура и т. д.).

Примечание: Имя человека не является названием произведения.

Текст в элементе обычно отображается курсивом .

Пример

Крик Эдварда Мунка. Написана в 1893 году.

Попробуй сам »

---

HTML

для двунаправленного обхода

BDO означает двунаправленное переключение.

Тег HTML используется для переопределения текущее направление текста:

Пример

Этот текст будет написан справа налево

Попробуй сам »

---

Упражнения HTML

---

HTML-цитаты и элементы цитирования

Тег	Описание
	Определяет аббревиатуру или акроним
<адрес>	Определяет контактную информацию автора / владельца документа
	Определяет направление текста
	Определяет раздел, цитируемый из другого источника
	Определяет название произведения
	Определяет короткую встроенную цитату

HTML b Тег

Пример

Выделите текст жирным шрифтом (не отмечая его как важный):

Это обычный текст — жирный текст .

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

---

Определение и использование

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

---

Советы и примечания

Примечание: Согласно спецификации HTML5, тег следует использовать как ПОСЛЕДНЕЕ средство, когда другой тег не подходит. В В спецификации указано, что заголовки должны быть обозначены

в теги

, выделенный текст должен обозначать

, следует обозначить важный текст с тегом , а выделенный / выделенный текст должен обозначать Тег .

Совет: Для выделения текста жирным шрифтом можно также использовать следующий CSS: «font-weight: жирный; «.

---

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

Элемент
	Есть	Есть	Есть	Есть	Есть

---

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

---

---

Другие примеры

Пример

Используйте CSS, чтобы выделить полужирный текст:

Это обычный текст — жирным шрифтом текст .

Попробуй сам »

---

Связанные страницы

Учебное пособие по HTML: Форматирование текста HTML

Ссылка на HTML DOM: жирный объект

---

Настройки CSS по умолчанию

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

CSS свойство font-weight

Пример

Установить различную толщину шрифта для трех абзацев:

п.нормальный {
font-weight: normal;
} Толщина

стр. {
font-weight: bold;
}

на

стр. Толще {
font-weight: 900;
}

Попробуй сам »

---

Определение и использование

Свойство font-weight устанавливает, насколько толстые или тонкие символы в тексте должны отображаться.

---

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
font-weight	2.0	4,0	1,0	1,3	3,5

---

---

Синтаксис CSS

начертание шрифта: нормальный | жирный | жирный | светлее | номер | начальный | наследование;

Значения собственности

.

Значение	Описание	Играй
нормальный	Определяет обычные символы. Это значение по умолчанию	Играй »
полужирный	Определяет толстые символы	Играй »
полужирный	Определяет более толстые символы	Играй »
зажигалка	Определяет более светлые символы	Играй »
100 200 300 400 500 600 700 800 900	Определяет от тонких до толстых символов.400 соответствует обычному, а 700 соответствует полужирному шрифту	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента. Читать о наследовать

---

Связанные страницы

Учебник

CSS: Шрифт CSS

Ссылка CSS: свойство шрифта

Ссылка на HTML DOM: свойство fontWeight

CSS свойство зазора

Пример

Установите зазор между строками и столбцов равным 50 пикселей:

.сетка-контейнер {
пробел: 50 пикселей;
}

Попробуй сам »

---

Определение и использование

Зазор Свойство определяет размер разрыв между строками и столбцов. Это сокращение от следующие свойства:

Примечание: Свойство gap ранее называлось сетка-зазор .

Значение по умолчанию:	нормальный нормальный
Унаследовано:	№
Анимация:	да.Прочитать о animatable Попытайся
Версия:	Модуль выравнивания блока CSS, уровень 3
Синтаксис JavaScript:	объект .style.gap = «50px 100px» Попытайся

---

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
разрыв (в нескольких столбцах)	66	16	61	Не поддерживается	53
зазор (в сетке)	66	16	61	10.1	53
зазор (в Flexbox)	84	84	63	Не поддерживается	70

---

---

Синтаксис CSS

Значения собственности

Значение	Описание	Играй
междурядье	Устанавливает размер зазора между строками в макете сетки	Играй »
колонна-зазор	Устанавливает размер зазора между столбцами в макете сетки	Играй »

---

Другие примеры

Пример

Установите зазор между строками на 20 пикселей и столбцами на 50 пикселей:

.сетка-контейнер {
gap: 20px 50px;
}

Попробуй сам »

---

Связанные страницы

Учебник

CSS: Макет сетки CSS

Ссылка CSS: свойство row-gap

Ссылка CSS: свойство column-gap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот HTML:

  
  
 Использование сильного элемента HTML 
  
 
 Это нормальный абзац. 
 
 
 
  Этот абзац важен!  
 
 
  

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

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

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

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

Вот код CSS:

  
 span {
 font-weight: bold; 
 
} 
 
  

Вот HTML:

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

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

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

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

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

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

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

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

Вот HTML:

  
  
 Использование элемента выделения HTML 
  
 
 Этот абзац нормальный.
 
 
 
  Этот абзац выделен!  
 
 
  

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

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

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

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

Вот код CSS:

  
 span {
 шрифт: курсив; 
 
} 
 
  

Вот HTML:

  
  
 Использование свойства CSS Font-Style 
  
 
 Иди в школу  сейчас ! 
 
 
 
 Я хотел, чтобы читатель услышал это слово другим тоном, поэтому я выделил его курсивом с помощью CSS. 
 
 
  

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

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

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

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

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

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

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

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

Вот HTML:

  
  
 Использование неартикулированного элемента аннотации HTML 
  
 
 В этом абзаце нет орфографической ошибки. 
 
 
 
 В этом абзаце есть орфографическая  ошибка . 
 
 
  

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

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

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

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

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

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

Вот код CSS:

  
. Орфография {
 оформление текста: # FF0000 волнистое подчеркивание; 
 
} 
 
 .grammar {
 
 оформление текста: # 008000 волнистое подчеркивание; 
 
} 
 
  

Вот HTML:

  
  
 Использование свойства CSS Text-Decoration 
  
 
 В этом абзаце  неправильное написание . 
 
 
 
 В этом абзаце  есть грамматическая ошибка .
 
 
  

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

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

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

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

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

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

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

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

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

Вот HTML:

  
  
 Использование зачеркнутого HTML-элемента 
  
 
  Есть еще несколько лепешек.  
 
 
 
 ПРОДАНО 
 
 
  

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

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

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

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

Вот HTML:

  
  
 Использование удаленного текстового элемента HTML 
  
 
 Событие начинается в  19:00. ET  18:00 ET. Приносим извинения за ошибку. 
 
 
  

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

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

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

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

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

Вот код CSS:

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

Вот HTML:

  
  
 Использование свойства CSS Text-Decoration-Line 
  
 
 Список покупок 
 
 
 
 
 
 
 Халапеньо 
 
 
 
 Сумка замороженной кукурузы 
 
 
 
 сыр Cotija 
 
 
 
 Mayo 
 
 
 
 Chili Powder 
 
 
 
 Cilantro 
 
 
 
 Лайм 
 
 
 
 
 
  

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

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

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

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

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

Вот HTML:

  
  
 Использование элемента нижнего индекса HTML 
  
 
 Вот как это выглядит с тегом нижнего индекса. 
 
 
 
 CO  2  + H  2  O ↔ H  2  CO  3  
 
 
 Вот как это выглядит без нижнего тега.
 
 
 
 CO2 + h3O ↔ h3CO3 
 
 
  

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

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

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

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

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

Вот HTML:

  
  
 Использование элемента верхнего индекса HTML 
  
 
 Вот как это выглядит с тегами нижнего и верхнего индекса. 
 
 
 
 CO  2  + H  2  O ↔ H  2  CO  3  ↔ H  +  + HCO  3   -  
 
 
 
 Вот как это выглядит без тегов.
 
 
 
 CO2 + h3O ↔ h3CO3 ↔ H + + HCO3 
 
 
  

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

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

Может ли кто-нибудь сказать мне, что я делаю не так? »

«полужирный» никогда не был элементом HTML («b» — наиболее близкое соответствие).

HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и элементами управления для навигации пользователям, которые не могут видеть предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, слабовидящие пользователи, использующие свои собственные цвета и шрифты, фанатичных пользователей, использующих текстовые браузеры, пользователей голосовых браузеров с голосовым управлением, таких как Opera для Windows). Таким образом, правильный способ сделать текст полужирным зависит от , почему вы хотите выделить полужирным шрифтом.Например:

• Хотите отличать заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите им полужирный стиль в вашем CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

• Хотите выделить подписи для полей формы жирным шрифтом? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («label {font-weight: bold;»}).

• Хотите выделить заголовок для группы связанных полей в форме, например группы вариантов выбора радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).

• Хотите отличить заголовок таблицы от подписи к ней? Используйте элемент «caption» и предложите для него жирный стиль в вашем CSS («caption {font-weight: bold;}»).

• Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите ему полужирный стиль в вашем CSS («th {font-weight: bold;}»).

• Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент «cite» с классом («cite) и предложите жирный стиль для него в вашем CSS (» .movie-title {font-weight: bold;} «).

• Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите для него жирный стиль в вашем CSS («dfn {font-weight: bold;}»).

• Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите для него полужирный стиль в вашем CSS («code {font-weight: bold;}»).

• Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите ему полужирный стиль в своем CSS («var {font-weight: bold;}»).

• Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите ему полужирный стиль в своем CSS («ins {font-weight: bold;}»).

• Хотите немного выделить текст («Я люблю котят!»)? Используйте элемент «em» и предложите для него жирный стиль в вашем CSS (например,грамм. «em {font-weight: bold;}»).

• Хотите сильно выделить какой-нибудь текст, возможно, для предупреждения (« Осторожно, собака! »)? Используйте «сильный» элемент и предложите ему жирный стиль в своем CSS (например, «strong {font-weight: bold;}»).

… Вы поняли (надеюсь).

Не удается найти элемент HTML с правильной семантикой для выражения / почему / вы хотите выделить этот конкретный текст жирным шрифтом? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование различения этого текста (« Позвольте мне начать эту новостную статью с предложения, которое резюмирует его.) и предложите для него полужирный стиль в своем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, существует ли микроформат (microformats. org) или обычное соглашение о том, что вы хотите выразить.

.

No related posts.