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

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

  • автор:

Как сделать текст жирным?

Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:

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

Пример 1. Использование

Чтобы придать жирное начертание длинному тексту, вроде заголовков, удобнее использовать стили, в частности, свойство font-weight. В качестве значения достаточно указать bold (пример 2).

Пример 2. Использование font-weight

См. также

  • font-weight
  • Знакомство с HTML
  • Насыщенность
  • Продвинутая семантика и доступность
  • Свойства шрифта в CSS
  • Семантика строчных элементов

Жирность текста в CSS

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

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

Если бы я делал жирный через тег b — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:

Title

This is a paragraph with text.

h2 < font-weight: normal; >p < font-weight: bold; >

Скопируйте следующий HTML код себе на страницу:

Name Surname Salary
John Smith 200$
Nick Mayers 300$
Alex Jonson 400$

Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

CSS шрифт, стиль и размер шрифта

Существует множество видов шрифтов, которые образуют так называемые семейства:

  • Georgia, Times New Roman, serif
  • Arial, Helvetica, sans-serif
  • Courier New, Courier, monospace
  • Verdana, Geneva, sans-serif
  • Times New Roman, Times, serif
  1. Шрифт в CSS | Семейства шрифтов, примеры
  2. Шрифт в CSS | Изменяем вид и тип шрифта
  3. Тип CSS шрифта | Наклонный, жирный шрифт
  4. CSS шрифт | Определяем размер шрифта

CSS виды и семейства шрифтов:

font-family: Pезультат
Verdana, Geneva, sans-serif Семейство шрифтов без засечек
Arial, Helvetica, sans-serif Семейство шрифтов без засечек
‘Times New Roman’, Times, serif Семейство шрифтов с засечками
‘Courier New’, Courier, monospace Семейство моноширинных шрифтов

Verdana, Geneva, sans-serif — семейство шрифтов без засечек:

Times New Roman, Times, serif — семейство шрифтов с засечками:

Courier New, Courier, monospace — семейство моноширинных шрифтов:

Еще пример форматирования:

CSS шрифты и примеры их форматирования


Обычный текст

Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman

В примере выше стилевые описания распространяются на параграфы данного документа. Атрибут font-family: содержит три различных шрифта, одного семейства (с засечками). Указывать их можно в различном порядке, но будет применен первый или второй если браузер не сможет найти на компьютере пользователя установленный первый шрифт, или третий, если программа браузера не прочтет первые два. При написании кода, название, состоящее из нескольких слов выделяется кавычками, например, ‘Times New Roman’ .

Д ля web-сайтов рекомендуется применять шрифты без засечек, чтобы не затруднять чтение текста.

Шриф sans-serif является представителем семейства шрифтов без засечек. К нему относятся Verdana, Geneva и другие. Если прописать код: font-family: sans-serif — программа браузера выберет на компьютере пользователя один из шрифтов без засечек, например, Verdana . Если обозначить: font-family: serif — будет выбран шрифт семейства с засечками, например, Times . CSS aтрибут со значением font-family: monospace — установит моноширинный шрифт, к примеру, Courier New .

CSS aтрибут font-family: определит, выбранный вами, вид шрифта. Можно установить свой шрифт, но нет ни какой гарантии, что он будет присутствовать на компьютере пользователя. Если его там не окажется, программа браузера не сможет правильно интерпретировать, указанный вами, шриф.

CSS наклонный и жирный шрифт

Определим наклонный шрифт:

CSS атрибут со значением style=»font-style:italic» определяет наклонный шрифт.

Определим жирный шрифт:

CSS ключение style=»font-weight:bold» определяет жирный шрифт.

Определим нормальный объем шрифта:

Строчка style=»font-weight:300″ преобразует жирный шрифт в обычный.

CSS размер шрифта

Пример с изменением размера:

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS код в HTML CSS шрифт и его размер CSS свойства текста

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | CSS жирный шрифт, размер? – Не вопрос!

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

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

Жирный шрифт в CSS: свойство font-weight

Управлять жирностью шрифта в CSS можно с помощью значений свойства font-weight :

bold Полужирный шрифт
normal Обычный шрифт
bolder Более жирный шрифт, чем у родителя
lighter Менее жирный шрифт, чем у родителя
inherit Наследует значение родителя
Числовое значение от 100 до 900 От очень тонкого до очень жирного шрифта

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

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

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства font-style :

italic Курсивный шрифт
oblique Наклонный шрифт
normal Обычный шрифт
inherit Наследует значение родителя

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

Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *