Сделать жирным шрифт css: Как сделать жирный шрифт в css

Содержание

font-weight — жирный текст | CSS справочник

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


12.0+	4.0+	1.0+	2.0+	3.5+	1.3+

Описание

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold.

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter

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

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

Значение по умолчанию:	normal
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

Значения свойства

Значение	Описание
normal	Определяет стандартное написание символов.
bold	Задает жирное начертание символов в тексте.
bolder	Тоже самое, что и bold.
lighter	тоже самое, что и normal.
100 200 300 400 500 600 700 800 900	Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

font-weight:

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

Следите за изменением шрифта.

div {
font-weight: normal;
}

Как сделать в CSS жирный шрифт :: SYL.ru

Словно расплавленный металл. Какой маникюр актуален в 2023 году

Раскрываем кусты правильно: что делать с розами в марте

Высокий уровень комфорта, но трудно перемещать: плюсы и минусы диванов без ножек

Водолеи, не упускайте возможности: любовный гороскоп на первую неделю марта

Матовые ногти — элегантный весенний маникюр: фото

Модные тренды, которые укорачивают ноги: каких ошибок надо избегать

Как изменить вкус салата из капусты: приправы и продукты, которые помогут в этом

Масляные маски раз в неделю: весенний уход и типичные проблемы усталых волос

Супер-глянцевый: спорный, но эффектный тренд в макияже губ

Тоники и тонеры после умывания. Когда правильно использовать нашумевшее средство

Автор

Иван Петров March 25, 2016

Первая версия современного языка HTML появилась где-то в начале 90-х и имела функцию передачи информации. Благодаря этому языку начала развиваться всем известная на сегодняшний день Всемирная паутина, к которой все мы так привыкли. Однако если мы окунёмся в историю гораздо глубже, то увидим, что ещё в далёком 1945 году Ванневар Буш, гражданин Америки, который был по совместительству научным консультантом президента, упоминает о гипертексте. В 1968-м, спустя двадцать три года, Дуглас Энджельбарт, который являлся изобретателем мыши и некоторых прочих девайсов, сумел-таки показать в своём текстовом редакторе работу гипертекстовой связи. Так было положено начало языку гипертекстовой разметки HTML.

Немного о CSS

В 1994 году была предложена идея о создании каскадных таблиц стилей на основе HTML. Эта идея несла одну основную мысль – отделить дизайн сайта от его непосредственного содержимого.

Семнадцатого декабря 1996 года уже была принята самая первая версия CSS. Восемнадцатого мая 1998 г. в действие вступила вторая версия – CSS2. Спустя 11 лет CSS2 была отредактирована и исправлена. Так появилась версия 2.1. Сегодня уже существует третий вариант.

Шрифт – это неотъемлемая часть веб-дизайна любого сайта, благодаря которой ресурс будет выглядеть более привлекательным, ведь его посетителям будет легче читать информацию, если необходимые части текста будут выделены жирным шрифтом или курсивом. Сейчас будет рассматриваться только вариант использования в CSS жирного шрифта.

Как в CSS сделать жирный шрифт?

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

Если использовать свойство normal, то получится обычный шрифт.
Если bold – жирный.
Свойство bolder – это несколько более жирный шрифт, нежели bold.
А свойство lighter будет являться менее жирным шрифтом, нежели bold.

При этом также используются числа от 100 до 900. Благодаря таким значениям можно задать свойства от очень тонкого шрифта до очень жирного. В этом случае толщина шрифта будет идти по нарастающей – от самого маленького числового значения (100) до самого большого (900). Следует иметь в виду, что значение жирного шрифта по умолчанию будет равно 700, а значение функции normal по умолчанию – 400.

Как выглядит в CSS жирный шрифт bold

Во-первых, ставится p и открывается фигурная скобочка – p {. Во-вторых, пишется свойство font-weight, затем двоеточие, а после указывается письменное или числовое значение одного из свойств, как было рассмотрено выше – font-weight: bold. В конце можно поставить точку с запятой в том случае, если вы собираетесь перечислять в фигурных скобках значения других свойств. В-третьих, фигурная скобочка закрывается – }.

Рассмотрим, как можно задать одинаковое значение двумя разными способами.
В первом используется функция числового значения, которая равна 700:

. my-bold-font {
color: black;
font-weight: 700;
}

Во втором способе используется функция bold.

Чтобы у вас появилась возможность сделать в CSS жирный шрифт, используем функцию bold, которая, как было упомянуто выше, по умолчанию имеет числовое значение 700. При этом никакой разницы, выбирая из этих двух вариантов, вы не увидите, поэтому используйте ту функцию, которая вам больше нравится:

. my-bold-font {
color: black;
font-weight: bold;
}

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

Как сделать мой шрифт жирным с помощью css?

Если вы новичок в html, вот три готовых к использованию примера того, как использовать CSS вместе с html. Вы можете просто поместить их в файл, сохранить его и открыть в браузере по вашему выбору:

Этот стиль напрямую встраивает ваш стиль CSS в ваши теги/элементы. Как правило, это не очень хороший подход, потому что вы всегда должны отделять контент/html от дизайна.

 
 

    <голова>
        
        Привет, я смелый!
    
    <тело>
        Привет, я очень смелый!

Следующий подход является более общим и работает со всеми тегами «p» (обозначает абзац) в вашем документе и дополнительно делает их ОГРОМНЫМИ. Кстати. Google использует этот подход в своем поиске:

 
 w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <голова>
        
        Привет, я смелый!
        <тип стиля="текст/CSS">
  п {
              вес шрифта: полужирный;
              размер шрифта: 26px;
            }
        
    
    <тело>
        Привет, я очень смелый и ОГРОМНЫЙ!

Вы, вероятно, потратите пару дней на то, чтобы поиграться с первыми примерами, однако вот последний. В этом вы, наконец, полностью отделяете дизайн (css) и контент (html) друг от друга в двух разных файлах. stackoverflow использует этот подход.

В один файл вы помещаете весь CSS (назовите его «hello_world.css»):

 p {
    вес шрифта: полужирный;
    размер шрифта: 26px;
  }

В другом файле вы должны поместить html (назовите его ‘hello_world.html’):

1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <голова> Привет, я смелый! <тело>

Привет, я очень смелый и ОГРОМНЫЙ!

Надеюсь, это немного поможет. Чтобы обращаться к определенным элементам в вашем документе, а не ко всем тегам, вы должны ознакомиться с class , id и name атрибуты. Веселиться!

html — выделение текста жирным шрифтом в css

спросил 1 год, 2 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 219 раз

Есть ли способ сделать текст жирным в последней строке определенной таблицы в CSS без выделения жирным шрифтом последней строки во всех таблицах в одном и том же HTML?

 тр: последний дочерний тд, {
    вес шрифта: полужирный;
}

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

 .total tr:последний ребенок td {
    вес шрифта: полужирный;
}
tr.total:последний ребенок td {
    вес шрифта: полужирный;
}

Я также пробовал добавлять подобные классы, но ничего не выделялось жирным шрифтом.

HTML
CSS

Давайте посмотрим на ваши две попытки:

 .total tr:последний ребенок td {
    вес шрифта: полужирный;
}

Это будет полностью работать для всех таблиц с классом CSS total , например.

 <таблица>
  <тело>
    ....
    .
    .
    .
    ...
  <тело>

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

 tr.total:последний ребенок td {
    вес шрифта: полужирный;
}

Это будет полностью работать для всех строк таблицы с классом CSS total , например.