Как сделать текст полужирным css

Пример текста с жирным словом.

На сайте это отображается так:

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

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

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

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

Обычный текст с жирным выделением по центру.

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

Либо можно написать:

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

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Интересно продолжение цикла статей про жирные шрифты — что еще будет? Жду 🙂

kpp68, завтра постараюсь опубликовать новый пост.

Всегда можно найти что-то новое и полезное, даже если уже немного и разбираешься во всем этом. Спасибо!

devarts, комментарии «порезали» кавычки — проверьте все ли нормально в одобренном коде?

Благодарю. Обязательно применю у себя на сайте. Что лучше классы не знал. Профессиональный подход.

Источник

Как сделать жирный текст (шрифт) в HTML/CSS/jQuery/JavaScript?

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

Для разных случаев есть разные варианты решения поставленной задачи, поэтому о каждом – немного подробнее.

Жирный текст (шрифт) в HTML

Начнем, пожалуй, с классики – чистого языка разметки HTML (я думаю, что вы помните, что HTML – не язык программирования).

В HTML для того, чтобы сделать нужное слово (фразу или целый текст, хотя для больших объемов данных рациональнее использовать CSS. О нем чуть ниже) жирным, существует два тега.

Первый – это тег . Текст, вложенный в него, становится стандартным полужирным. Использование:

Закрывающий тег обязателен. Не имеет персональных атрибутов, только универсальные, по типу id, class и прочих.

Второй – тег . Использование:

Закрывающий тег, значение насыщенности (жирности) и атрибуты – все как в предыдущем теге.

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

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

Жирный текст (шрифт) в CSS

В каскадных таблицах стилей (CSS) насыщенность (жирность) текста устанавливается с помощью свойства font-weight. Популярными значениями (на мой взгляд) являются 400 (эквивалент normal, обычный вид текста) и 700 (эквивалент bold, стандартный полужирный).

Все допустимые значения свойства находятся в диапазоне от 100 до 900 (включительно) с шагом 100 (100, 200, 300, 400 или normal, 500, 600, 700 или bold, 800 и 900). Некоторые из этих значений могут не дать желаемого результата из-за особенностей используемого шрифта.

Помимо этого, существуют значения bolder и lighter (они задают жирность указанного текста относительно родителя, в большую или меньшую сторону соответственно), а также inherit (указывает на наследование значения от родителя) и initial (установка значения по умолчанию).

Жирный текст (шрифт) в jQuery/JavaScript

Если вы хотите задать некому тексту необходимую жирность с помощью jQuery или JavaScript, то можно пойти двумя путями. Первый – это обернуть текст при его вставке на страницу, используя HTML-теги.

Аналогичный вариант на JavaScript:

Второй – это применить свойство font-weight из CSS с нужным его значением:

Аналогичный вариант на JavaScript:

Плюсом, существует метод bold(), который оборачивает переменную (текст) в HTML-тег :

Хотя, если верить некоторым источникам, этот метод считается устаревшим и не рекомендуется к использованию.

Источник

WEBTEORETIK

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

Создание жирного и курсивного шрифта средствами CSS

Категория: Уроки CSS Просмотров: 7168 Коментариев: 0 Дата: 2017-11-09 Добавил: admin

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

Курсивный шрифт CSS

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

Задаем свойство для курсивного шрифта.

Теперь второй абзац и часть четвертого абзаца отображаются курсивом. В демо это наглядно показано.

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ; другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal то есть насыщенность шрифта нормальная, а задав значение bold он примет полужирный вид.

Так же можно задавать значение насыщенности цифрами от 100 до 900 с шагом 100. Значение normal приравнивается цифре 400, а значение bold цифре 700. Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700. Выглядит такое условие следующим образом.

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

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

Источник

Как сделать жирный или подчеркнутый текст в CSS и HTML

Заполняя свой сайт, мы обязательно сталкиваемся с необходимостью форматирования контента, для того, что бы придать ему более наглядный вид или обратить внимание читателя на какие-то основные моменты.

В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания.

Навигация по статье:

Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор.

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

style = «text-decoration:underline;» > Подчеркнутый текст CSS

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

Так же это CSS-свойство имеет и другие интересные значения:

Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;

Подчеркнутый текст HTML-тегами

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

Как сделать жирный текст CSS-стилями

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

Итак, свойство font-weight может принимать фиксированные значения:

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

Источник

Как сделать текст полужирным в css

Как сделать текст полужирным в HTML?

Я пытаюсь сделать текст жирным, используя HTML, но я изо всех сил пытаюсь заставить его работать.

может кто-нибудь сказать мне, что я делаю неправильно?

10 ответов

использовать или tag

кроме того, вы можете попробовать с css text

HTML не имеет tag, вместо этого вам придется использовать . Обратите внимание, однако, что использование is обескуражен в пользу CSS на некоторое время. Для этого вам лучше использовать CSS.

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

этот элемент содержит текст, который должен быть отображен браузером жирным шрифтом. Поскольку значение элемента B определяет внешний вид содержимого, которое он заключает, этот элемент считается» физическим » элементом разметки. Как таковой, он не передает значение семантического элемента разметки, такого как strong.

Описание Этот элемент заключает в скобки текст, который должен быть сильно подчеркнут. Сильнее, чем элемент ЭМ.

в Html используйте:

в CSS использовать:

может кто-нибудь сказать мне, что я делаю неправильно?»

«bold»никогда не был HTML-элементом («b» — самое близкое совпадение).

HTML должен содержать структурированный контент; издатель CSS должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезным стилем и навигационными элементами управления пользователям, которые не могут видеть предложенный вами смелый стиль (например, пользователям поисковых систем, полностью слепым пользователям, использующим считыватели экрана, слабовидящие пользователи, использующие собственные цвета и шрифты, фанатичные пользователи, использующие текстовые браузеры, пользователи голосовых браузеров, говорящих, как Opera для Windows). Таким образом, правильный способ сделать текст полужирным зависит от почему вы хотите, чтобы стиль его жирным. Например:

хотите отличить заголовки от остального текста? Используйте элементы заголовка («h1» — «h6») и предложите жирный стиль для них в вашем CSS («h1, h2, h3, h4, h5, h6

хотите отличить заголовок таблицы от заголовка таблицы? Используйте элемент «caption»и предложите полужирный стиль для него в вашем CSS («caption «).

хотите отличить заголовки таблиц от ячеек данных таблицы? Используйте элемент » th » и предложите смелый стиль для него внутри ваш CSS («th «).

хотите отличить название ссылочного фильма или альбома от окружающего текста? Используйте элемент «cite»с классом («cite ) и предложите смелый стиль для него в вашем CSS («.movie-title «).

хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент » dfn » и предложите смелый стиль для него в вашем CSS («dfn «).

хотите отличить некоторый компьютерный код от окружающего текста? Используйте элемент «code»и предложите для него полужирный стиль в вашем CSS («code «).

хотите отличить имя переменной от окружающего текста? Используйте элемент «var»и предложите для него полужирный стиль в CSS («var «).

хотите указать, что был добавлен некоторый текст в качестве обновления? Используйте элемент «ins»и предложите для него полужирный стиль в CSS («ins «).

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

хотите сильно подчеркнуть какой-то текст, возможно, для предупреждения («остерегайтесь собаки!«)? Используйте «сильный» элемент и предложите смелый стиль для этого в вашем CSS (например, «strong «).

. ну, вы поняли (надеюсь).

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

элемент HTML определяет сильный текст с добавленной семантической» сильной » важностью.

Полужирный шрифт при наведении без сдвига макета

От автора: когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие элементы.

Райан Маллиган демонстрирует это. Техника Райана очень крута. Для каждого элемента в списке есть псевдо-элемент с точным текстом ссылки. Этот псевдо-элемент визуально скрыт, но предварительно выделен жирным шрифтом и по-прежнему занимает отведенную ширину. Поэтому, когда фактический текст ссылки выделен полужирным шрифтом, он не будет занимать дополнительной ширины.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Но если бы я, скажем, позволил этим ссылкам перетекать в автоматические столбцы, у нас возникла бы проблема смещения.

Источник