Полужирный css: Как сделать жирный шрифт в css - Блог сумасшедшего сисадмина

Содержание

Текст в HTML . Основы HTML

Текст в HTML

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

С помощью html – тегов можно отформатировать текст в html – страницы , визуально теги не отображаются на странице , мы видим только текст . И чтобы выделить текст полужирным или курсивным начертанием . Можно выделить часть текста или целый блок другим цветом , приходится использовать специальные теги , которые помогают нам это сделать . Каждый тег играет свою роль . Рассмотрим основные теги которые часто могут применяться для форматирования текста.

Полужирный текст в HTML

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

Приоритет имеет парный тег .

Полужирный текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Полужирный текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
b,strong {
    font-size: 1.2em;   /*Размер шрифта b,strong*/
}
    </style> 
  </head>
  <body>
  <h2>Полужирный текст в HTML</h2>  
<b>Полужирный шрифт .</b><br />
<strong>Важный фрагмент текста .</strong>  
  </body>
</html>

Открыть пример в новом окне

Полужирный текст

Наклонный текст в HTML

Тег и тег – Парные теги , выделяет текст наклоном (курсивом) .

Наклонный текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Наклонный текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
i,em {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h2>Наклонный текст в HTML</h2>  
<i>Текст выделенный курсивом .</i><br />
<em>Текст также выделенный курсивом .</em> 
  </body>
</html>

Открыть пример в новом окне

Наклонный текст

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

Тег – Парный тег , отображает текст подчеркнутым.

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

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Подчеркнутый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
u {
    font-size: 1.  2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h2>Подчеркнутый текст в HTML</h2>  
    <u>Подчеркнутый текст .</u>
  </body>
</html>

Открыть пример в новом окне

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

Перечеркнутый текст в HTML

Тег – Парный тег , отображает текст подчеркнутым.

Перечеркнутый текст

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Перечеркнутый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
del,ins {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h2>Перечеркнутый текст в HTML</h2>  
    <del>Старый текст</del><br /> 
    <ins>Старый текст заменили новым .  </ins>
  </body>
</html>

Открыть пример в новом окне

Перечеркнутый текст

Текст меньшего размера в HTML

Парный тег – помогает сделать текст меньшего размера .

Текст меньшего размера

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Текст меньшего размера</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
p {
    font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h2>Текст меньшего размера в HTML</h2>  
    <p>Текст <small>меньшего</small> размера</p>
  </body>
</html>

Открыть пример в новом окне

Текст меньшего размера

Создание нижних и верхних индексов

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

Парный тег сдвигает текст выше уровня строки и делает текст меньше основного текста .

Создание нижних и верхних индексов

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Создание нижних и верхних индексов</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
p {
   font-size: 1.2em;   /*Размер шрифта*/
}
    </style> 
  </head>
  <body>
  <h2>Создание нижних и верхних индексов</h2>  
    <p>Формула воды H<sub>2</sub>O<br />
    Единица измерения площади — м<sup>2</sup></p>
  </body>
</html>

Открыть пример в новом окне

Создание нижних и верхних индексов

Скрытый текст тег — <details>

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

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя.

Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css .

Текст скрыт при загрузке страницы

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Скрытый текст</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
details{
    width: 400px;
    font-size: 1.2em;
}
   </style> 
  </head>
  <body>
  <h2>Текст скрыт при загрузке страницы</h2>  
    <p><details>
   <summary>Развернуть или свернуть текст</summary>
   Скрытый текст</p>
</details>
  </body>
</html>

Открыть пример в новом окне

Текст скрыт при загрузке страницы

Текст открыт при загрузке страницы

С тегом <details> можно использовать атрибут open , данный логический атрибут указывает , пользователю , что при загрузке html – страницы текст будет открыт . По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

Текст открыт при загрузке страницы

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Текст открыт при загрузке</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
details{
    width: 400px;
    font-size: 1.2em;
}
   </style> 
  </head>
  <body>
  <h2>Текст открыт при загрузке страницы</h2>  
    <p><details open>
   <summary>Развернуть или свернуть текст</summary>
   Скрытый текст</p>
</details>
  </body>
</html>

Открыть пример в новом окне

Текст открыт при загрузке страницы

Тег <details> в рамке

Рассмотрим пример с подключение стилей css , чтобы тексту придать более лучший вид .

Тег <details> в рамке

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Тег details в рамке</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
	max-width: 767px;
    height: auto;
}
}
h2 {
	color: blue;
}
details {
    border: 1px solid #aaa;    /* Бордюр ширина , цвет*/
    border-radius: 4px;    /* Бордюр закругление углов*/
    padding: .5em .5em 0;     /* Отступы внутри блока */
}
summary {     /* Стиль скрытого текста*/ 
    font-weight: bold;    /* Жирность шрифта*/ 
   margin: -.5em -.5em 0;    /* Отступы снаружи блока */ 
    padding: .5em;    /* Отступы внутри блока */ 
}
   </style> 
  </head>
  <body>
  <h2>Тег details в рамке</h2>  
    <p><details>
   <summary>Посмотреть скрытый текст</summary>
   <p>Скрытый текст</p>
</details></p>
</details>
  </body>
</html>

Открыть пример в новом окне

Тег details в рамке

Добавление своих значков

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Добавление своих значков</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
    body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
details {
    border: 1px solid #aaa;    /* Бордюр ширина , цвет*/
    border-radius: 4px;    /* Бордюр закругление углов*/
    padding: .  5em .5em 0;     /* Отступы внутри блока */
}
summary {     /* Стиль скрытого текста*/ 
    font-weight: bold;    /* Жирность шрифта*/ 
    margin: -.5em -.5em 0;    /* Отступы снаружи блока */ 
    padding: .5em;    /* Отступы внутри блока */ 
}
summary {
    display: block;    /*Расположение блоком*/ 
}
summary::-webkit-details-marker {
    display: none;    /*Скрываем маркер*/ 
}
summary::before {
    content: '\2B02';   /*Маркер при скрытом блоке*/
    padding-right: 0.5em;
}
details[open] > summary::before {
    content: '\2B07';   /*Маркер при раскрытом блоке*/ 
}
    </style> 
  </head>
  <body>
  <h2>Добавление своих значков</h2>  
    <p><details>
   <summary>Посмотреть скрытый текст</summary>
   <p>Скрытый текст</p>
</details></p>
</details>
  </body>
</html>

Открыть пример в новом окне

Добавление своих значков

Цвет текста

Тег – парный тег , в отличие от тега <div> отличается тем , что тег <div> является блочным тегом , а помощью тега можно выделить одно слово в тексте или несколько слов :

Выделение текста цвета

 <!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Выделение текста цвета</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
h2 {
    color: blue;
}
p {
    font-size: 1. 2em;   /*Размер шрифта*/
}
span {    /*Стиль для всех элементов SPAN */
    font-size: 13pt;     /* Размер шрифта */
    color: blue;    /*Цвет шрифта */
    font-family: "Arial";    /* Название шрифта */
    font-weight: bold;    /*Жирность шрифта */
}
.text-color {    /* Стиль для класса .text-color*/
    font:  1em Georgia, Times, serif;    /*Размер, Название шрифта */
    color: #c80404;    /*Цвет шрифта */
    font-weight: bold;    /*Жирность шрифта */
	}   
    </style> 
  </head>
  <body>
  <h2>Цвет текста</h2>  
   <p>С помощью элемента <span>SPAN</span> можно выделить важное <span>слово</span> внутри абзаца .</p>
<p>Можно выделить одно <span>слово</span> в тексте  или <span>несколько слов</span>.</p>
  </body>
</html>

Открыть пример в новом окне

Выделение текста цвета

Простое подключение

Подключение шрифта самым обыкновенным @font-face

Заголовок header

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. _`abcdefghijklmnopqrstuvwxyz{|}~¨©«®´¸»ˆ˚˜ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё–—…‹›€™

Что	Как
light	Лёгкий текст. Light text. Лёгкий текст. Light text.
regular	Нормальный текст. Regular text. Нормальный текст. Regular text.
bold	Полужирный текст. Bold text. Полужирный текст. Bold text.

Что	Как
light	Лёгкий текст. Light text. Лёгкий текст. Light text.
regular	Нормальный текст. Regular text. Нормальный текст. Regular text.
bold	Полужирный текст. Bold text. Полужирный текст. Bold text.

Снова мир всемогущая, языком великий заголовок запятой его власти, рыбного последний текст, текста безорфографичный обеспечивает оксмокс.

Ratione voluptates praesentium, earum quisquam. Animi dolorum enim quidem quae fugiat porro voluptate dolorem repellat accusantium.

Заголовок header

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Заголовок header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

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

CSS или Каскадные таблицы стилей — это язык, который определяет, как элементы HTML или XML отображаются на веб-сайте.

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

Это будет очень полезно, если вы решите провести ребрендинг!

Вот краткое руководство по выделению текста жирным шрифтом в CSS и другие полезные советы.

Как выделить текст жирным шрифтом в CSS 🅱️

Примеры выделения текста жирным шрифтом CSS 💁‍♀️

Часто задаваемые вопросы 🔍

Это обтекание 🎁

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

Как выделить жирный текст в CSS 🅱️

Жирный текст в CSS можно получить, установив свойство веса шрифта .

Это свойство определяет толщину текста и может быть полужирным, жирным, светлым, нормальным и т. д.

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

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

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

👉 Если вы хотите, чтобы свойство жирности применялось к множественным элементам , вам нужно использовать класс в таблице стилей: