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

Разное 

Содержание

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

Текст в HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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 в рамке

Тег 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>

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

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

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

Цвет текста

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

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

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

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

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

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

Выравнивание, стили шрифта и горизонтальные линии документах HTML

Выравнивание, стили шрифта и горизонтальные линии документах HTML


предыдущий    следующий   содержание   элементы   атрибуты   индекс

Содержание

  1. Форматирование
    • Цвет фона
    • Выравнивание
    • Плавающие объекты
      • Всплывание объекта
      • Обтекание текста вокруг объекта
  2. Шрифты
    • Элементы стиля шрифта: элементы TT, I, B, BIG, SMALL, STRIKE, S и U
    • Элементы модификатора шрифта: FONT и BASEFONT
  3. Горизонтальные лини: элемент HR

В этом разделе спецификации рассматриваются элементы и атрибуты HTML, которые используются для визуального форматирования элементов. Многие из них не рекомендуется применять.


15.1 Форматирование

15.1.1  Цвет фона

Определение атрибута

bgcolor = color [CI]
Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона «канвы» тела документа (элемент BODY) или таблицы (элементы TABLE, TR, TH и TD). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY.

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

15.1.2  Выравнивание

Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на «канве» с помощью атрибута align. Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута «выравнивание» для текста.

Определение атрибута

align = left|center|right|justify [CI]
Не рекомендуется. Этот атрибут определяет горизонтальное выравнивание элемента по отношению к окружающему контексту. Возможные значения:
  • left: строки текста выравниваются по левому краю;
  • center: строки текста выравниваются по центру;
  • right: строки текста выравниваются по правому краю;
  • justify: строки текста выравниваются по обоим полям.

Значение по умолчанию зависит от базового направления текста. Для направления слева направо — это align=left, для направления справа налево — по умолчанию align=right.

НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.

<h2 align="center"> Что за прелесть эта мерзость! </h2>

Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:

<HEAD>
 <TITLE>Что за прелесть эта мерзость!</TITLE>
 <STYLE type="text/css">
  h2 { text-align: center}
 </STYLE>
<BODY>
 <h2> Что за прелесть эта мерзость! </h2>

Учтите, что это будет действовать на все элементы h2. Вы можете ограничить область видимости стиля, установив атрибут class элемента:

<HEAD>
 <TITLE>Что за прелесть эта мерзость!</TITLE>
 <STYLE type="text/css">
  h2.wood {text-align: center}
 </STYLE>
<BODY>
 <h2> Что за прелесть эта мерзость! </h2>

НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на «канве» атрибутом HTML align, Вы могли бы записать:

<P align="right">...параграф текста...

что в таблице стиля могло бы быть:

<HEAD>
 <TITLE>Что за прелесть эта мерзость!</TITLE>
 <STYLE type="text/css">
  P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P>...параграф текста...

НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV:

<DIV align="right">
 <P>...текст первого параграфа...
 <P>. ..текст второго параграфа...
 <P>...текст третьего параграфа...
</DIV>

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

<HEAD>
 <TITLE>Что за прелесть эта мерзость!</TITLE>
 <STYLE type="text/css">
  DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV>
  <P>...текст первого параграфа...
  <P>...текст второго параграфа...
  <P>...текст третьего параграфа..
 </DIV>

Чтобы выровнять по центру весь документ:

<HEAD>
 <TITLE>Что за прелесть эта мерзость!</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...тело выровнено по центру...
</BODY>

Элемент CENTER полностью эквивалентен определению элемента DIV с атрибутом align, установленным в «center». Элемент  CENTER  не рекомендуется.

15.1.3  Плавающие объекты

Изображения и объекты могут появляться непосредственно «in-line» или «всплывать» к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.

«Всплывание» объекта 

Атрибут align объектов, изображений, таблиц, фрэймов и т.п. заставляет объект прижиматься к левому или правому полю страницы. Плавающие объекты обычно начинают новую строку. Этот атрибут принимает следующие значения:

  • left: прижимает объект к левому краю. Последующий текст обтекает объект справа.
  • right: прижимает объект к правому краю. Последующий текст обтекает объект слева.

ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент IMG «всплывает» к левому краю «канвы».

<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

Некоторые атрибуты выравнивания также допускают значение «center», которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV, значение «center» вызывает центрирование содержимого элементов.

Обтекание текста вокруг объекта 

Ещё один атрибут, определённый для элемента BR, управляет обтеканием текста вокруг «всплывающего» объекта.

Определение атрибута

clear = none|left|right|all [CI]
Не рекомендуется. Определяет, где должна появиться следующая строка после обрыва строки, сделанного этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т.д.). Возможные значения:
  • none: следующая строка начнётся нормально. Это значение по умолчанию.
  • left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
  • right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
  • all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.

Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR:

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

Если атрибут clear установлен в none, линия, следующая после BR, начнётся сразу под ним у правого края изображения:

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear установлен в left или all, следующая строка появится так:

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |
*********
-----------------

Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), «всплывая» у левого края. В таблице стилей Вы можете записать:

<STYLE type="text/css">
BR { clear: left }
</STYLE>

Чтобы определить такое поведение для конкретного элемента BR, нужно скомбинировать информацию о стиле и атрибут id:

<HEAD>
. ..
<STYLE type="text/css">
BR#mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR>
|       |
*********
-----------------
...
</BODY>

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

15.2.1 Элементы стиля шрифта: 

TT, I, B, BIG, SMALL, STRIKE, S и U
<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: необходим, Конечный тег: необходим

Атрибуты, определённые в другом месте

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup (внутренние события)

Представление элементов стиля шрифта зависит от пользовательского агента (ПА). Следующее описание является лишь информативным.

TT: моноширинный текст, телетайп.
I: курсив.
B: полужирный.
BIG: «большой» шрифт.
SMALL: «малый» шрифт.
STRIKE и S: не рекомендуются, зачёркнутый текст.
U: не рекомендуется, подчёркнутый.

Вот несколько примеров определения шрифта:

<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.

Это будет отображено так:

Можно применить более сложные варианты отображения шрифтов, используя таблицы стилей. Чтобы отобразить голубой курсив в параграфе с помощью таблицы стилей (CSS):

<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P>. ..голубой курсив...

Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.

15.2.2 Элементы модификатора шрифта:

FONT и BASEFONT

FONT и BASEFONT  не рекомендуется применять.

См. формальное определение в разделе Переходное ОТД.

Определения атрибутов

size  = cdata [CN]
Не рекомендуется. Устанавливает размер шрифта. Возможные значения:
  • Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.
  • Относительное увеличение размера шрифта. «+1» означает: на один размер больше. «-3» означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.
color = color [CI]
Не рекомендуется. Устанавливает цвет текста.
face = cdata [CI]
Не рекомендуется. Определяет список имён шрифтов, разделённых запятыми, которые ПА должен искать в порядке убывания приоритета.

Атрибуты, определённые в другом месте

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)

Элемент FONT изменяет размер шрифта и цвет текста своего содержимого.

Элемент BASEFONT устанавливает базовый размер шрифта (используя атрибут size). Размер шрифта, определяемый FONT, является относительным по отношению к BASEFONT. Если BASEFONT не используется, размер базового шрифта составляет 3.

НЕ РЕКОМЕНДУЕТСЯ:
В этом примере показана разница между шрифтами семи размеров элемента FONT:

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Это может выглядеть так:

А это пример относительного изменения размера шрифта с использованием базового размера 3:

Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT.

15.3 Горизонтальные линии: элемент

HR
<!ELEMENT HR - O EMPTY -- горизонтальная линия -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: необходим, Конечный тег: запрещён

Определение атрибутов

align = left|center|right [CI]
Не рекомендуется. Определяет горизонтальное выравнивание линии по отношению к окружающему контексту. Возможные значения:
  • left: линия выравнивается влево.
  • center: линия выравнивается по центру.
  • right: линия выравнивается вправо.

По умолчанию align=center.

noshade [CI]
Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной «тенью».
size = pixels [CI]
Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА.
width = length [CI]
Не рекомендуется. Определяет ширину линии. Ширина по умолчанию — 100%, т.е. линия растянута по ширине всей «канвы».

Атрибуты, определённые в другом месте

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (инлайн-стиль)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Элемент HR отображает горизонтальную линию в ПА.

Величина свободного пространства под и над горизонтальной линией зависит от ПА.

НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы. Верхняя линия имеет толщину по умолчанию, а две нижние — по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:

<HR align="center">
<HR size="5" align="center">
<HR noshade size="5" align="center">

Эти линии должны выглядеть примерно так:

 

предыдущий   следующий   содержание   элементы   атрибуты   индекс

 


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

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

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

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

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

  • Как выделить текст жирным шрифтом в CSS 🅱️
  • Примеры выделения текста жирным шрифтом CSS 💁‍♀️
  • Часто задаваемые вопросы 🔍
  • Это обтекание 🎁

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

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

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

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

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

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

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

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