- Форматирование текста
- Как сделать жирный шрифт в HTML
- Жирный шрифт тегом strong
- Жирный текст с помощью тега b
- Выделение жирным стилями CSS
- Что делать, если выделить текст жирным не получается
- Как сделать жирный шрифт в HTML?
- Как сделать полужирный шрифт при помощи CSS-свойства font-weight
- Делаем текст полужирным используя тег жирного шрифта в html Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге . Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега : Пример полужирного текста при помощи HTML-тега. . а также полужирного выделения всего абзаца . HTML-тег — самый быстрый способ вывести текст полужирным. Как сделать текст полужирным — какой метод уместнее? HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение. HTML-тег Когда применяется Используется для вывода полужирного шрифта HTML , имеющего ключевое значение. Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста. Эти теги используются для вывода подзаголовков различных уровней. Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях. Этот элемент отражает важность и ценность обрамленного в него контента. Элемент следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от служат для выделения заголовков, акцентирование внимания производится с помощью элемента , важные фрагменты следует выделять элементом , а текст справки можно отметить тегом . Комбинируем выделение текста с помощью CSS и HTML Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах . HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста. Таблицы стилей можно использовать для видоизменения и стилизации таких элементов, как и т. д. Следовательно, нельзя с полной уверенностью сказать, что фрагменты контента, обрамленные тегами, обязательно будут полужирными. Валентин Сейидов автор-переводчик статьи « HTML Bold » Источник 6. HTML – Форматирование текста с помощью html-тегов Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML. Полужирный или жирный текст Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов . и .. Все, что находится в тегах . и . отображается в HTML жирным текстом (полужирным), как показано ниже: Пример Получим следующий результат: Курсив – наклонный текст или шрифт Сделать в HTML курсивом текст можно с помощь двух тегов . и .. Все, что находится в тегах курсива . и . отображается в HTML наклонным текстом (шрифтом), как показано ниже: Пример Получим следующий результат: Подчеркнутый текст Подчеркнуть текст в HTML можно с помощь тега .. Все, что находится внутри тега . отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже: Пример Получим следующий результат: Зачеркнутый текст Зачеркнуть текст в HTML можно с помощь тега .. Все, что находится внутри тега . отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже: Пример Получим следующий результат: Моноширинный шрифт Содержимое элемента . записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину. Пример Получим следующий результат: Верхний индекс Содержимое тега . отображается в HTML в верхнем индексе. Тег верхнего индекса в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа. Пример Получим следующий результат: Нижний индекс Содержимое тега . отображается в HTML в нижнем индексе. Тег нижнего индекса в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Пример Получим следующий результат: Вставленный текст Содержимое внутри тега отображается в HTML как вставленный текст. Пример Получим следующий результат: Удаленный текст Содержимое внутри тега . отображается в HTML как удаленный текст. Пример Получим следующий результат: Большой текст Содержимое тега . отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже: Пример Получим следующий результат: Маленький текст Содержимое внутри тега . отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже: Пример Получим следующий результат: Группировка элементов и содержимого страницы в HTML Например, Вы можете поместить все ссылки на странице в тег Пример с тегом Получим следующий результат: С другой стороны, элемент может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент следующим образом: Пример с тегом Получим следующий результат: Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы. Источник Жирный текст с помощью HTML и CSS Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты. Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто. Жирный текст на HTML Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код: Жирный текст strong. На выходе дает такую картинку: Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно . Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей: Пример жирного текста. Пример текста с жирным словом. На сайте это отображается так: Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов и указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег . Жирный текст на CSS Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это: bold (жирный) — 700 по умолчанию; normal (обычный) — 400 по умолчанию. Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно. Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например: Обычный текст с жирным выделением по центру. Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.: Либо можно написать: Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль: Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем. В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти. Интересно продолжение цикла статей про жирные шрифты — что еще будет? Жду 🙂 kpp68, завтра постараюсь опубликовать новый пост. Всегда можно найти что-то новое и полезное, даже если уже немного и разбираешься во всем этом. Спасибо! devarts, комментарии «порезали» кавычки — проверьте все ли нормально в одобренном коде? Благодарю. Обязательно применю у себя на сайте. Что лучше классы не знал. Профессиональный подход. Источник
- Как сделать текст полужирным — какой метод уместнее?
- Комбинируем выделение текста с помощью CSS и HTML
- 6. HTML – Форматирование текста с помощью html-тегов
- Полужирный или жирный текст
- Пример
- Курсив – наклонный текст или шрифт
- Пример
- Подчеркнутый текст
- Пример
- Зачеркнутый текст
- Пример
- Моноширинный шрифт
- Пример
- Верхний индекс
- Пример
- Нижний индекс
- Пример
- Вставленный текст
- Пример
- Удаленный текст
- Пример
- Большой текст
- Пример
- Маленький текст
- Пример
- Группировка элементов и содержимого страницы в HTML
- Пример с тегом
- Пример с тегом
- Жирный текст с помощью HTML и CSS
- Жирный текст на HTML
- Жирный текст на CSS
Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
| Код HTML | Описание | Пример |
|---|---|---|
| Текст | Жирное начертание текста | Текст |
| Текст | Курсивное начертание текста | Текст |
| Текст | Верхний индекс | e=mc 2 |
| Текст | Нижний индекс | H2O |
| Текст пишется как есть, включая все пробелы | ||
| Текст | Курсивный текст | Текст |
| Текст | Жирное начертание текста | Текст |
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Как сделать жирный шрифт в HTML
Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.
Жирный шрифт тегом strong
Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.
Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.
Пример как сделать жирный шрифт HTML тегом :
Жирный текст с помощью тега b
То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг — используйте тег .
Выделение жирным стилями CSS
Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).
Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.
К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.
Свойство CSS внутри атрибута style:
Что делать, если выделить текст жирным не получается
Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).
Как сделать жирный шрифт в HTML?
В этой статье представлены способы, позволяющие использовать полужирный шрифт в HTML.
Как сделать полужирный шрифт при помощи CSS-свойства font-weight
Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight , которое позволяет вывести полужирное начертание CSS.
Давайте взглянем на следующий пример:
Пример полужирного текста при помощи CSS.
… а также полужирного выделения всего абзаца .
С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.
В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS -классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.
Делаем текст полужирным используя тег жирного шрифта в html
Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге .
Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :
Пример полужирного текста при помощи HTML-тега.
. а также полужирного выделения всего абзаца .
HTML-тег — самый быстрый способ вывести текст полужирным.
Как сделать текст полужирным — какой метод уместнее?
HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.
| HTML-тег | Когда применяется |
| Используется для вывода полужирного шрифта HTML , имеющего ключевое значение. | |
| Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста. | |
| Эти теги используются для вывода подзаголовков различных уровней. | |
| Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях. | |
| Этот элемент отражает важность и ценность обрамленного в него контента. |
Элемент следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от
служат для выделения заголовков, акцентирование внимания производится с помощью элемента , важные фрагменты следует выделять элементом , а текст справки можно отметить тегом .
Комбинируем выделение текста с помощью CSS и HTML
Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах .
HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста.
Таблицы стилей можно использовать для видоизменения и стилизации таких элементов, как и т. д. Следовательно, нельзя с полной уверенностью сказать, что фрагменты контента, обрамленные тегами , обязательно будут полужирными.
Валентин Сейидов автор-переводчик статьи « HTML Bold »
6. HTML – Форматирование текста с помощью html-тегов
Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.
Полужирный или жирный текст
Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов . и . . Все, что находится в тегах . и . отображается в HTML жирным текстом (полужирным), как показано ниже:
Пример
Получим следующий результат:
Курсив – наклонный текст или шрифт
Сделать в HTML курсивом текст можно с помощь двух тегов . и . . Все, что находится в тегах курсива . и . отображается в HTML наклонным текстом (шрифтом), как показано ниже:
Пример
Получим следующий результат:
Подчеркнутый текст
Подчеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:
Пример
Получим следующий результат:
Зачеркнутый текст
Зачеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:
Пример
Получим следующий результат:
Моноширинный шрифт
Содержимое элемента . записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.
Пример
Получим следующий результат:
Верхний индекс
Содержимое тега . отображается в HTML в верхнем индексе. Тег верхнего индекса в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.
Пример
Получим следующий результат:
Нижний индекс
Содержимое тега . отображается в HTML в нижнем индексе. Тег нижнего индекса в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.
Пример
Получим следующий результат:
Вставленный текст
Содержимое внутри тега отображается в HTML как вставленный текст.
Пример
Получим следующий результат:
Удаленный текст
Содержимое внутри тега . отображается в HTML как удаленный текст.
Пример
Получим следующий результат:
Большой текст
Содержимое тега . отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:
Пример
Получим следующий результат:
Маленький текст
Содержимое внутри тега . отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:
Пример
Получим следующий результат:
Группировка элементов и содержимого страницы в HTML
Например, Вы можете поместить все ссылки на странице в тег
Пример с тегом
Получим следующий результат:
С другой стороны, элемент может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент следующим образом:
Пример с тегом
Получим следующий результат:
Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.
Жирный текст с помощью HTML и CSS
Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.
Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.
Жирный текст на HTML
Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:
Жирный текст strong.
На выходе дает такую картинку:
Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .
Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:
Пример жирного текста.
Пример текста с жирным словом.
На сайте это отображается так:
Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов
и указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег .
Жирный текст на CSS
Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:
- bold (жирный) — 700 по умолчанию;
- normal (обычный) — 400 по умолчанию.
Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.
Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:
Обычный текст с жирным выделением по центру.
Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:
Либо можно написать:
Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:
Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.
В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.
Интересно продолжение цикла статей про жирные шрифты — что еще будет? Жду 🙂
kpp68, завтра постараюсь опубликовать новый пост.
Всегда можно найти что-то новое и полезное, даже если уже немного и разбираешься во всем этом. Спасибо!
devarts, комментарии «порезали» кавычки — проверьте все ли нормально в одобренном коде?
Благодарю. Обязательно применю у себя на сайте. Что лучше классы не знал. Профессиональный подход.