Содержание
— HTML | MDN
HTML-элемент <b> является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.
- Используйте
<b>в таких случаях, как ключевые слова в кратком содержании, имена продуктов в отзыве, или других частях текста, которые обычно выделяют жирным. - Не путать элемент
<b>с<strong>,<em>, или<mark>элементами. Элемент<strong>представляет собой текст определённой важности,<em>делает некий акцент на тексте, и элемент<mark>представляет собой текст определённой значимости. Элемент<b>не содержит специальной семантической информации, используйте его только в том случае, если другие не подошли. - Также не помечайте заглавия и заголовки элементом
<b>. Для этих целей используйте элементы с <h2> (en-US) до <h6> (en-US) . К тому же CSS может изменять стандартный вид этих элементов, в результате чего они не всегда будут выделены жирным текстом. - Хорошей практикой является использование атрибута class на элементе
<b>для того, чтобы передать дополнительную семантическую информацию (например,<b>для первого предложения в абзаце). Это упрощает разработку различных стилизаций веб-документа без надобности менять его HTML-код. - Исторически, элемент
<b>был задуман для выделения текста жирным шрифтом. Информация о стилизации устарела, начиная с HTML4, значение элемента<b>было изменено. - Если нет семантической причины использовать элемент <b>, использование css свойства font-weight со значением bold будет более грамотным выбором для изменения толщины текста.
<p>
В этой статье описывается элемент для форматирования <b>текста</b>.
Она объясняет его использование в документе <b>HTML</b>.
</p>
Ключевые слова с тегом <b>, отображаемые со стилем, выделены жирным шрифтом.
BCD tables only load in the browser
- Другие элементы содержащие text-level semantics:
<a>,<em>,<strong>, <small> (en-US),<cite>, <q> (en-US),<dfn>,<abbr>,<time>,<code>, <var> (en-US), <samp> (en-US),<kbd>, <sub> (en-US), <sup> (en-US), <i> (en-US),<mark>,<ruby>, <rp> (en-US), <rt> (en-US),<bdo>,<span>,<br>,<wbr>. - Using <b> and <i> elements (W3C)
HTML / CSS-стиль или тегов вместо
Мне просто интересно, Хорошая ли это идея.
Например, если вы хотите создать закругленные вкладки с помощью CSS, вам понадобится такая структура:
<li> <a href="..."> <span> Tab </span> </a> </li>
...
затем вы помещаете фон левого угла вкладки на тег ссылки, а правый-на span (возможно, это плохой пример, потому что вы могли бы использовать тег списка, чтобы избежать span, но вы понимаете мою точку зрения :).
Итак , что, если я использую <b> вместо <span>, потому что он короче? Вызовет ли это проблемы с определенными браузерами или поисковыми системами?
html
css
xhtml
Поделиться
Источник
Alex
03 октября 2010 в 22:30
3 ответа
- Каковы некоторые преимущества использования <span> вместо <b> ?
Я изучаю семантику HTML и продолжаю читать, как следует избегать таких тегов, как <i> и <b> . Но если я не хочу что-то подчеркивать, а просто выделяю это визуально, почему <b> будет хуже, чем <span class=bold> ? Каковы некоторые преимущества использования более подробного…
- HTML тегов или CSS свойств
Поэтому мне было интересно, что лучше использовать — HTML тегов или CSS свойств? У нас есть как теги HTML, так и свойства CSS для одной и той же цели в различных случаях, например, в теге <img> можно использовать значения width и height html для их назначения или использовать свойства css…
5
Теги имеют семантическое значение для документа. Действительно, поисковая система интерпретирует <b> иначе, чем <span> .
Мои пять центов: используйте правильные теги в первую очередь и оптимизируйте размер источника страницы, используя теги с более короткими именами, например, на 100-м месте.
Поделиться
Johan
03 октября 2010 в 22:36
4
<span> и <b> имеют одинаковое семантическое значение в HTML 4 (и XHTML 1): нет. <span> , потому что он намеренно разработан, чтобы иметь нулевую семантику, и <b> , потому что он чисто презентационный.
HTML5 немного изменяет способ описания <i> и <b> , по существу описывая виды целей, для которых обычно используются «курсив» и «полужирный» текст. Это семантически слабо, но не совсем без семантики.
В любом случае, я бы не стал использовать <b> только для того, чтобы сохранить пару символов. <span> более четко говорит о том, что вы делаете, добавляя дополнительный элемент без семантики исключительно для целей стилизации. (До тех пор , пока вы не сможете просто использовать border-radius, и в этом случае вам не понадобится обертка.)
Поделиться
bobince
03 октября 2010 в 23:15
0
<b> и <i> больше не приемлемы, поскольку они описывают форматирование, а не семантику. Я не верю, что они находятся в XHTML.
Поделиться
Daniel A. White
03 октября 2010 в 22:31
Похожие вопросы:
Применить стиль CSS к тегу span на основе содержимого
Я не знаю, возможно ли это, но я пытаюсь применить стиль к тегу span на основе его содержимого. У меня есть несколько тегов на сайте блога, которые хранятся в теге span , и я хотел бы стилизовать их…
CSS, чтобы сделать html P равным DIV, SPAN или B
Большинство HTML-элементов не имеют особых свойств. Учитывая правильный CSS, их можно сделать похожими друг на друга. div, p, b, span { display:inline-block; border:2px solid black; padding:1px;…
Зачем сбрасывать жирные <b> или курсивные <i> HTML теги?
После вопроса , который я только что задал, какая необходимость в reset.css , чтобы отменить эффект жирных <b> или курсивных тегов <i> ? Для чего это нужно? Какую проблему она решает?…
Каковы некоторые преимущества использования <span> вместо <b> ?
Я изучаю семантику HTML и продолжаю читать, как следует избегать таких тегов, как <i> и <b> . Но если я не хочу что-то подчеркивать, а просто выделяю это визуально, почему <b>…
HTML тегов или CSS свойств
Поэтому мне было интересно, что лучше использовать — HTML тегов или CSS свойств? У нас есть как теги HTML, так и свойства CSS для одной и той же цели в различных случаях, например, в теге…
CSS: как пройти через вложенное дерево тегов span, выбрать каждый span и присвоить каждому отдельное значение?
Я работаю над типографским экспериментом CSS. http://codepen.io/vennsoh/pen/pbdyt Я использую преимущества каскадной задачи em единиц. Таким образом, в моем коде вы увидите, что my HTML имеет…
Удалить стиль из тегов HTML с помощью Regex C#
Я хочу удалить стиль из HTML тегов, используя C#., он должен возвращать только HTML простых тега. Например , если String = <p style=margin: 15px 0px; padding: 0px; border: 0px; outline:…
Ограничения настройки тегов и атрибутов HTML с помощью CSS
Сегодня утром я исследовал CSS и HTML и хотел бы знать, есть ли какие-либо ограничения при настройке тегов и атрибутов HTML с помощью CSS. Этот пример может помочь: <div class=app></div>…
i, b, s или em, strong, del
Таким образом, с этими 6 тегами нет никаких видимых различий, и я знаю, что 3 из них устарели. +––––––––––––––––––––––––––+––––––––––––––––––––––––––––––––+ | | | | i | em | | | |…
HTML-как вставить тег <span> </span> в каждую строку блока <pre> </pre> без жесткого кодирования?
Я просто пытался добавить номера строк в начале исходного кода, используя CSS. Я понял эффект, которого хотел, следующим образом: Однако код HTML требовал постоянного использования тегов…
Внедрение CSS, атрибут style — Как создать сайт
Внедряем CSS-кода, с помощью атрибута style
Урок №7
Внедряем CSS-код с помощью атрибута
Рассмотрим второй способ внедрения CSS-кода в HTML-документ: Внедрение с помощью глобального атрибута
Допустим, в нашей статье о Снежном барсе, мы выделили жирным шрифтом (тегами <b> </b>) несколько слов: ак барс, Ирбис и малоизученными.
HTML-документ будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
h2 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h2>Снежный барс</h2>
<p>
Снежный барс (ирбис, <b>ак барс</b>) - крупное хищное млекопитающее из
семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана,
Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. <b>Ирбис</b> отличается тонким, длинным,
гибким телом, относительно короткими лапами, небольшой головой и очень
длинным хвостом. Длина снежного барса вместе с хвостом составляет
200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с
кольцеобразными или сплошными тёмными пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются <b>малоизученными</b>.
Однако по приблизительным оценкам их количество варьируется в районе около
10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов
повсеместно запрещена.</p>
</body>
</html>Страница в браузере будет выглядеть следующим образом.
Нам нужно, чтобы цвет слов ак барс, стал зелёным. Если мы разместим между тегами <style> </style> следующий код:
b {
color: green;
} то цвет текста станет зелёным, у всех слов заключенных между тегами <b> </b>
Для того, чтобы применить CSS-свойства только к одному тегу, например b, используют глобальный атрибут style=" " (или селектор id, который мы изучим позже). Нужно атрибут style=" " вставить в тот тег, к которому вы хотите применить CSS-свойства.
Например, давайте вставим атрибут style=" " в тег b, который обрамляет слово ак барс:
... <p> Снежный барс (ирбис, <b>ак барс</b>) - крупное, хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. <b>Ирбис</b> отличается тонким, длинным, гибким ...
В итоге, страница в браузере, станет выглядеть так. Слово ак барс, теперь зелёное.
Схема внедрения атрибута style=" " в любой тег:
<имяТега>
Читать далее: Внедрение CSS-кода, с помощью тега link
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Навигация по записям
Руководство Основные CSS Selectors
1- Что такое CSS Selector?
CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).
Простой пример:
/** Select all elements with class contains abc */
.abc
/** Select element with ID = abc */
#abc
CSS Selectors разделен на 3 следующие виды:
Basic Selectors
Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.
Базовые Selector будут упомянуты в данной статье.
Combining selectors
Выбрать элементы, основываясь на отношении между ними.
| Combinator | Syntax | Example |
| Descendant combinator | A B | div span div .item |
| Child combinator | A > B | ul > li |
| General sibling combinator | A ~ B | p ~ span |
| Adjacent sibling combinator | A + B | h3 + p |
| Column combinator | A || B | col || td |
Pseudo selectors
| Pseudo | Syntax | Example |
| Pseudo classes | A:B | a:visited |
| Pseudo elements | A::B | p::first-line |
Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).
Синтаксис:
| Selector | Описание |
| * | Выбрать все элементы. |
| *|* | Выбрать все элементы. |
| ns|* | Выбрать все элементы в пространстве имен ns. |
| |* | Выбрать все элементы необъявленные в пространстве имен. |
Например выбрать все элементы и настроить для них границы зеленого цвета.
universal-selector-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Universal Selector: *</title>
<style>
* {
border: 1px solid green;
margin: 5px;
}
</style>
</head>
<body>
<h2>I am h2 element</h2>
<div>I am div element</div>
<p>I am P element</div>
</body>
</html>
CSS Type Selector помогает вам найти элементы по имени.
Например, выбрать все элементы <div>:
Например, выбрать все элементы <span>:
type-selector-example1.css
span {
background-color: skyblue;
}
type-selector-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Universal Selector: ns|*</title>
<link rel="stylesheet" type="text/css" href="type-selector-example1.css" />
</head>
<body>
<span>I am span element</span>
<p>I am P element</p>
<span>I am span element</span>
</body>
</html>
Если CSS Selector имеют одинаковое правило, можно их написать вкратце, CSS Selector будут разделены запятой и использовать одно и то же правило.
type-selector-example2.css
/** Select h2 or h3 */
h2, h3 {
color: blue;
}
type-selector-example2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Type Selector</title>
<link rel="stylesheet" type="text/css" href="type-selector-example2.css" />
</head>
<body>
<h2>I am h2 element</h2>
<h3>I am h3 element</h3>
<h4>I am h4 element</h4>
</body>
</html>
CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.
Например, выбрать все элементы с class = «txt-green» или включая слово «txt-green».
class-selector-example1.css
.txt-green {
color: green;
}
.bg-yellow {
background-color: yellow;
}
class-selector-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Class Selector</title>
<link rel="stylesheet" type="text/css" href="class-selector-example1.css" />
</head>
<body>
<h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
<p>I am P element</p>
<h3>I am h3 with class = 'txt-green bg-yellow'</h3>
</body>
</html>
Пример:
class-selector-example2.css
/* <p> with class 'txt-green' or includes 'text-green' */
p.txt-green {
color: green;
}
.bg-yellow {
background-color: yellow;
}
/* <div> with class inculudes both 'text-green' and 'bg-yellow' */
div.txt-green.bg-yellow {
color: green;
font-style: italic;
}
class-selector-example2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Class Selector</title>
<link rel="stylesheet" type="text/css" href="class-selector-example2.css" />
</head>
<body>
<h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>
<p class ="txt-green">I am P element with</p>
<div>I am DIV with class = 'txt-green bg-yellow'</div>
<br/>
<span>I am SPAN with class = 'txt-green bg-yellow'</span>
</body>
</html>
CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector «не различает прописные и строчные буквы» (Case insensitive)
id-selector-example.css
#demo {
color: blue;
font-size: 30px;
}
id-selector-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ID Selector</title>
<link rel="stylesheet" type="text/css" href="id-selector-example.css" />
</head>
<body>
<h2 id = "demo">Demo</h2>
<span>I am span element</span>
<p>I am P element</p>
</body>
</html>
6- CSS Attribute Selector
CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.
Html жирный текст css
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 2.0+ | 3.5+ | 1.3+ |
Описание
CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .
Если у вас есть элемент, для которого по умолчанию задан жирный шрифт, или он наследует такой шрифт от родительского элемента, то можно уменьшить насыщенность шрифта с помощью значения normal .
Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.
Вы также можете устанавливать значения свойства с помощью чисел от 100 до 900, но это тоже не очень хорошо поддерживается шрифтами и браузерами и редко применяется.
Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:
- Через html тег и
- Через свойство CSS font-weight
Жирный шрифт через html тег
и
Весь текст заключенный в html теги и будет жирным. Первый тег состоящий из необычной буквы «b» произошло в сокращение от английского слова «bold».
Разница между двумя тегами визуально отсутствуют. Среди SEO-оптимизаторов бытует мнение, что для поисковых систем оказывает большее влияние, когда мы хотим выделить ключевое слово.
Преобразуется на странице в
Обычный шрифт.
Жирный шрифт через тег b
Обычный текст. Жирный текст через тег strong
Жирный шрифт через свойство CSS font-weight
В CSS есть свойство font-weight, которое отвечает за толщину написание букв.
Синтаксис CSS font-weight
- bold – жирное значение шрифта (аналог 700)
- normal (по умолчанию) – нормальное значение шрифта (400)
- bolder/lighter – шрифт должен быть больше/меньше, чем у родителя
- inherit – принять значение предка (родителя)
В нашем случае, для жирности шрифта необходимо применить свойство bold для придания шрифту «толщины».
В HTML жирный текст можно сделать несколькими способами. К ним относятся:
- Тег b;
- Тег strong;
- CSS-свойство font-weight.
Поговорим о каждом из вариантов выделения текста по порядку.
Жирный текст: тег
Тег b HTML применяется следующим образом:
Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
Жирный текст: тег
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.
Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.
Используется тег strong аналогичным образом:
Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
Жирный текст при помощи CSS
Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:
Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.
Локальный (scoped) CSS | Vue Loader
Когда у тега <style> есть атрибут scoped, то его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Пользоваться ими можно с некоторыми оговорками, но зато не требуется никаких полифиллов. Это достигается за счёт использования PostCSS для преобразования следующего:
В что-то подобное:
Использование локальных и глобальных стилей
Вы можете использовать в компоненте локальные и глобальные стилей одновременно:
Корневой элемент дочернего компонента
С помощью scoped, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой элемент дочернего компонента будет зависеть как от локального CSS из родительского элемента, так и от локального CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей стилизации.
Глубокие селекторы
Если вы хотите, чтобы селектор в scoped стилях был «глубоким», т.е. влиял на дочерние компоненты, вы можете использовать комбинатор >>>:
Указанное выше будет скомпилируется в подобный селектор:
Некоторые пре-процессоры, такие как Sass, не могут правильно обработать >>>. В таких случаях используйте комбинатор /deep/ или ::v-deep — оба псевдонимы для >>> и работают аналогично. На основе примера выше, эти два выражения будут скомпилированы в один и тот же результат:
Динамически генерируемый контент
DOM-содержимое, создаваемое с помощью v-html не попадает под область действия локальных стилей, но вы всё равно можете его стилизовать с помощью глубоких селекторов.
О чём следует помнить
Локальные стили не устраняют необходимость классов. Из-за того как браузеры рендерят различные CSS-селекторы,
p { color: red }может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как.example { color: red }, тогда вы практически полностью исключаете ухудшение производительности.Будьте внимательны с селекторами потомков в рекурсивных компонентах! Для CSS-правила с селектором
.a .b, если элемент, который соответствует.aсодержит рекурсивный компонент потомок, тогда все.bв этом компоненте потомке будут также соответствовать правилу.
поля и отступы — учебник CSS
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
padding-top:значение;padding-right:значение;padding-bottom:значение;padding-left:значение;
Поля:
margin-top:значение;margin-right:значение;margin-bottom:значение;margin-left:значение;
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px.
Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Схлопывание margin
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px, а для нижнего – margin: 30px. Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Расстояние между блоками равно большему из значений
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях
20pxи-18pxразмер поля будет равен:20+(-18)=20—18=2пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей
-6pxи-8px. Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что68, то есть,-6>-8. Итоговый размер поля равен-8пикселей. - В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
Далее в учебнике: блочные и строчные элементы HTML, свойство display CSS.
: Привлечь внимание к элементу — HTML: Язык разметки гипертекста
HTML-элемент используется для привлечения внимания читателя к содержимому элемента, которому не придается особого значения. Ранее это называлось элементом Boldface, и большинство браузеров по-прежнему выделяют текст жирным шрифтом. Однако не следует использовать для стилизации текста; вместо этого вы должны использовать свойство CSS font-weight для создания полужирного текста или элемент , чтобы указать, что текст имеет особое значение.
- Используйте
- Не путайте элемент
-не передает такую специальную семантическую информацию; используйте его только тогда, когда другие не подходят. - Точно так же не помечайте заголовки и заголовки с помощью элемента
. Для этого используйте теги от. Кроме того, таблицы стилей могут изменять стиль по умолчанию для этих элементов, в результате чего не обязательно отображаются полужирным шрифтом. - Хорошей практикой является использование атрибута
classв элементе-для передачи дополнительной семантической информации по мере необходимости (например,-для первого предложения в абзаце).Это упрощает управление несколькими вариантами использования - Исторически элемент
- Если нет смысловой цели для использования элемента
font-weightсо значением«bold»вместо этого, чтобы сделать текст полужирным.
В этой статье описывается несколько элементов текстового уровня .
В нем объясняется их использование в документе HTML .
Ключевые слова отображаются со стилем по умолчанию элемента , скорее всего, жирным.
Результат
Таблицы BCD загружаются только в браузере
- Другие элементы, передающие семантику текстового уровня:
< cite>,
- Использование элементов и (W3C)
HTML b Тег
Пример
Выделите текст жирным шрифтом (не отмечая его как важный):
Это обычный текст - жирный текст .
Попробуй сам "
Дополнительные примеры "Попробуйте сами" ниже.
Определение и использование
Тег определяет полужирный текст без особой важности.
Советы и примечания
Примечание: Согласно спецификации HTML5,
тег следует использовать как ПОСЛЕДНЕЕ средство, когда нет более подходящего тега. В
В спецификации указано, что заголовки должны быть обозначены
в теги
, выделенный текст должен
обозначать
, следует обозначить важный текст
с тегом , а выделенный / выделенный текст должен
обозначать
Тег .
Совет: Для выделения текста жирным шрифтом можно также использовать следующий CSS: "font-weight:
жирный; ".
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| Есть | Есть | Есть | Есть | Есть |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Используйте CSS, чтобы выделить полужирный текст:
Это обычный текст - жирным шрифтом
текст .
Попробуй сам "
связанные страницы
Учебное пособие по HTML: Форматирование текста HTML
Ссылка на HTML DOM: жирный объект
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
CSS (каскадные таблицы стилей) - преобразование данных с помощью ClojureScript
В приложении A вы получили краткое введение в HTML.Если вы создаете веб-страницу с помощью этих тегов, вы можете передавать свой контент, но он будет выглядеть очень просто. Если вы хотите, чтобы ваши страницы выглядели лучше эстетически, вам нужно будет стилизовать их. Например, вы можете захотеть, чтобы весь текст отображался красным цветом, или вы можете сделать так, чтобы все заголовки вашего уровня 1 (
) были выделены курсивом шрифтом Garamond.
Для этого вы используете таблицу стилей , которая сообщает браузеру, какие визуальные эффекты отображать с вашим контентом.Вы можете поместить таблицу стилей в тот же документ, что и веб-страницу, или сохранить ее в отдельном файле, а затем связать свой документ с этой таблицей стилей.
Чтобы поместить таблицу стилей в тот же документ, что и ваш HTML, поместите элемент
Этот абзац появится
зеленым.