Css strong: Как прописать strong через css? — Хабр Q&A

HTML/Элемент strong

Синтаксис

(X)HTML

<strong> ... </strong>

Описание

Элемент strong (от англ. «strong» ‒ «сильный, серьёзный») применяется для выделения текста особой важности, серьёзности или срочности. Hапример, для обозначения предупреждения, предостережения, уведомления и так далее. Текст, вложенный в данный элемент, браузеры отображают ‘полужирным шрифтом‘. Данный элемент может быть использован в заголовках (сайта, раздела, объекта, таблицы) и тексте для логического выделения очень важной части текста или заголовка, на которую пользователь должен обратить внимание в первую очередь. Уровень важности выделенного текста может меняться в зависимости от элементов родителей. Так, например, элемент strong использованный внутри элемента h2 будет иметь большую важность, чем такой же элемент strong использованный в элементе h3 или где-нибудь в текстовой части документа.

Примечание

По логическому смыслу strong похож на элемент em, но в отличии от последнего strong является более важным элементов и его использование (повторение) в тексте должно быть менее частым (в крайних случаях) чем элемента em.

CSS

Визуальный эквивалент: font-weight: bold;.


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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


Спецификация

Верс.Раздел
HTML
2.0Strong Emphasis: STRONG
Перевод
3. 2Phrase Elements
4.019.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
DTD: Transitional Strict Frameset
5.04.5.3 The strong element
5.14.5.3. The strong element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент strong</title>
<style type=»text/css»>. warning { color: red; }</style>
</head>
<body>
<h2>Пример использования элемента «strong»</h2>
<h3>Раздел 1: <strong>»Копирование»</strong></h3>

<p><strong>Внимание</strong> копирование текста расположенного на данной странице на <span>любые носители информации</span>, а так же его печать <em>запрещены</em>.</p>
<p><strong>К носителям информации относятся:</strong> компьютеры, телефоны, планшеты, жесткие диски, flash-накопители, CD/DVD диски, дискеты, магнитные ленты, а так же <em>любые устройства способные запоминать/копировать и воспроизводить указанную информацию</em>.</p>
</body>
</html>

Элемент strong

HTML тег

❮ Назад Вперед ❯

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

Для выделения текста жирным без акцента на его важность, используйте тег <b> или CSS свойство font-weight.

Содержимое элемента заключается между открывающим (<strong>) и закрывающим (</strong>) тегами. Закрывающий тег обязателен.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мы использовали тег &lt;strong&gt;, чтобы выделить <strong> этот важный фрагмент текста</strong>.</p>
  </body>
</html>

Попробуйте сами!

Тег <strong> поддерживает глобальные атрибуты и атрибуты событий.

Результат

Как добавить стиль к тегу <strong> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <strong>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <strong>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <strong>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <strong>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

HTML-тег

❮ Пред. Следующий ❯

Тег

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

Тег — это тег фразы, указывающий, что текстовый раздел имеет структурное значение.

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

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

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

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

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

Тег идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

:
 

  <голова>
    Название документа
  
  <тело>
    

Мы использовали <strong> тег, чтобы выделить

эту важную часть текста.

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

Результат

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

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром и регистром текста.
  • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге

:
  • Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
  • Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства тега

, на которые стоит обратить внимание:
  • Свойство CSS text-shadow добавляет тень к тексту.
  • Свойство CSS text-align-last задает выравнивание последней строки текста.
  • Свойство CSS line-height определяет высоту строки.
  • Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
  • Свойство CSS word-spacing задает расстояние между словами.

CSS установил шрифт на «сильный»

спросил

Изменено 5 лет, 8 месяцев назад

Просмотрено 43к раз

Мне нужно установить шрифт «сильный», но я не могу понять, как это сделать с помощью CSS? я пробовал

 вес шрифта: «Сильный»;
 

А я тоже пробовал без меток и тоже не получилось. Я хотел бы сделать его сильным, а не просто жирным, так как я слышал, что это помогает людям с ограниченными возможностями, когда они просматривают ваш сайт (но это может быть чушью?!)

1

Вероятно, вы имели в виду:

 вес шрифта: полужирный;
 

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

подробнее о вес шрифта на MDN

Я только что решил именно эту проблему, основываясь на сообщении, которое я прочитал здесь. Жирный — это не то, что вам нужно, поскольку жирный — это не то же самое, что сильный.

Для меня используется специальный полимерный компонент.

Strong = вес шрифта: 400

Полужирный начинается с вес шрифта: 500 или больше.

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

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *