html — Сделать жирным одно слово в предложении через CSS
Вопрос задан
Изменён 6 лет 9 месяцев назад
Просмотрен 7k раза
Чтобы выделить одно слово из предложения жирным шрифтом средствами HTML нужно использовать тэг <b>Word</b> или <strong>Word</strong>. Но, все говорят, что нужно оформление полностью делать в CSS. За жирность в CSS отвечает font-weight:. Я пробовал заключать слово в <div></div>, но он переносит текст за измененным словом на новую строку. Как можно решить проблему?
- html
- css
2
Поместить его в тег span:
span. bold { font-weight: bold; }
bold {
font-weight: bold;
}Привет, <span>мир</span>!
Иногда семантика неотделима от оформления — в таком случае просто используйте <b> или <strong>.
Если же оформление как-то связано с семантикой, то жирность можно «навесить» на любой семантический тэг. К примеру, на <abbr> если вам надо выделять жирным аббревиатуры. Или на <kbd> если вам нужно выделить сочетание клавиш.
Универсальным инлайновым тэгом является <span>. Но использовать его желательно только вместе с уточнением в виде класса:
<span>foo</span>
span.selected-word {
font-weight: bold;
}
Ну и по поводу <div>. Этот тэг использовать также можно, если задать ему стиль display: inline. Но я бы не рекомендовал так делать, поскольку семантика тут точно нарушится (div — это раздел в тексте, а никак не слово).
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
HTML тег
❮ Назад Вперед ❯
Тег <b> используется для того, чтобы выделить жирным шрифтом фрагмент текста, который мы хотим сделать более заметным для пользователя.
Тег <b> только выделяет фрагмент текста, он не имеет смысловой нагрузки (в том числе для поисковых систем). Для того, чтобы отметить важность текста используется тег <strong>․
В HTML5 тег <b> рекомендуется использовать только в крайнем случае, когда нет возможности использовать другие теги.
Для выделения отрезка текста жирным шрифтом, необходимо поместить его между открывающим <b> и закрывающим тегом </b>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p><b>Этот отрезок текста </b> мы выделили жирным шрифтом.</p>
</body>
</html>Попробуйте сами!
Результат
Внешний вид содержимого контейнера <b> задается по умолчанию, но жирное начертание текста можно изменить при помощи CSS.
Вы также можете использовать свойство CSS font-weight для выделения текста жирным шрифтом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p><span>Этот отрезок текста</span> мы выделили жирным шрифтом.</p>
</body>
</html>Попробуйте сами!
Результат
Тег <b> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <b> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <b>:
- 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.
Цвет текста внутри тега <b>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <b>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <b>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
html — Как сделать этот текст жирным?
Я пытаюсь понять, как сделать этот текст жирным в Shopify?
Бесплатная доставка и возврат
Я также хочу адаптировать ту же типографику, но не знаю, как это сделать. В настоящее время я нахожусь в файле product-template.liquid
- html
- css
3
1. Вы можете выделить текст двумя способами:
Способ — 1
Бесплатная доставка и возврат
Way — 2
Бесплатная доставка и возврат
Для этого можно использовать CSS с помощью свойство font-weight .
<центр>
Бесплатная доставка и возврат
<центр> Чтобы сделать это с помощью только необработанного HTML:
Бесплатная доставка и возврат
1
Вы можете сделать
Есть 3 способа для достижения желаемого результата
Первый вариант
Второй вариант
Бесплатная доставка и возврат
Третий вариант
Бесплатная доставка и возврат
2
вес шрифта: полужирный;
или
Зарегистрируйтесь или войдите в систему
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как сделать текст жирным в HTML
IN — HTML
В этом уроке мы покажем вам решение, как сделать текст жирным в HTML, в html большинство программистов и разработчиков сталкиваются с проблемой, как сделать текст жирным в html. Теперь есть много способов сделать текст жирным в html.
Шрифт, выделенный жирным шрифтом на странице, становится выделенным и выглядит привлекательно. Некоторые дизайнеры использовали полужирный текст для создания заголовков.
Таким образом, мы хотим сказать, что есть много способов, почему нам нужен полужирный текст в html. Итак, в следующем мы определим способы, которыми мы делаем жирный текст в html.
Пошаговое руководство о том, как сделать текст жирным в HTML: —
Теперь есть много способов сделать текст жирным в html. Некоторые из них:
- С использованием сильной метки
- С использованием жирного тега
- С использованием шрифта
Следовательно, есть несколько простых способов, с помощью которых вы можете сделать текст жирным в html.
Мы покажем вам, как все это работает, на следующем примере.
<голова>
Название документа<title>
</голова>
<тело>
<р>
<b>
этот текст выделен жирным шрифтом с помощью жирного тега b.
</b>
<br>
<br>
<сильный>
этот текст также выделен жирным шрифтом, но мы используем здесь сильный тег.
</strong>
</p>
<р>
чтобы сделать этот текст полужирным, мы используем атрибут стиля и свойство веса шрифта.
</p>
</тело>
</html>
</pre><ol><li> Сначала мы пишем <! DOCTYPE html>, который мы использовали в качестве инструкции для веб-браузера о том, в какой версии HTML-файла записан файл.</li><li> Во-вторых, тег<html> используется для обозначения начала HTML-документа.</li><li> Как и выше, теперь тег<head> используется для хранения информации о веб-странице. В этом теге используется тег<title>, который помогает нам указать заголовок веб-страницы.<img loading="lazy" src="/800/600/http/luxe-host.ru/wp-content/uploads/d/b/1/db1613d7f9f83c36db8bb02c852c7ff4.jpeg"><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/d/b/1/db1613d7f9f83c36db8bb02c852c7ff4.jpeg' /></noscript> Оба тега<head> и<title> являются парными тегами. Таким образом, у обоих есть закрывающие теги</head> и соответственно.
