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

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

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

Описание

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

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

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

Вы также можете устанавливать значения свойства с помощью чисел от 100 до 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	Указывает, что значение наследуется от родительского элемента.

Пример

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

div {

font-weight: normal;

}

Жирный или подчеркнутый текст в CSS и HTML

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

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

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

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

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

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

<div>
<p>Подчеркнутый текст CSS</p>
</div>

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

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

• blink — позволяет сделать слово или предложение мерцающим,
• line-through — перечёркивает слово или предложение,
• overline — позволяет провести линию над словом.

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

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

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

<div>
Делаем <u>подчеркнутый текст HTML-тегом</u>.
</div>

Делаем подчеркнутый текст HTML-тегом.

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

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

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

• bold – жирный
• bolder – еще жирнее
• normal – начальный вид
• lighter – делает буквы тоньше, по сравнению с normal

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

<div>
<p>Жирный</p>
<p>Еще жирнее</p>
<p>Совсем не жирный текст CSS</p>
<p>Очень жирный текст CSS</p>
</div>

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

Жирный текст HTML-тегами

Так же как и в ситуации с подчеркиванием, если вам нужно в единичных случаях выделить одно или несколько слов, можно использовать для этого специальные HTML-теги, такие как <b>…</b>, или его аналог <strong>… </strong>.

Например:

Делаем <b>жирный текст</b> с помощью <strong> html-тегов </strong>.

Делаем жирный текст с помощью html-тегов .

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

А на сегодня у меня все! Успешного вам форматирования текста! До встречи в следующих статьях!

С уважением Юлия Гусарь

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

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

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

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

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p> 
<p><strong>Жирный текст strong</strong>.</p>

<p>Обычный текст.</p>
<p><b>Жирный текст</b>. </p>
<p><strong>Жирный текст strong</strong>.</p>

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег <b> задает простое стилистическое выделение слова жирным шрифтом, тогда как <strong> добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно <strong>.

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

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

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

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

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

• bold (жирный) — 700 по умолчанию;
• normal (обычный) — 400 по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

strong {
    font-weight: bold;
}

strong {
font-weight: bold;
}

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

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

Оформляем текст с помощью CSS

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

p {
font-family: Arial, Tahoma, sans-serif;
}

где font-family — ключевое слово, Arial — семейство шрифтов, с помощью которого нужно оформить данный элемент. Если Arial не установлен то будет применен шрифт Tahoma, если и данный шрифт отсутствует, то применится любой шрифт браузера без засечек.

Если название шрифта состоит более чем из одного слова — то в CSS возьмите шрифт в кавычки, например:

font-family: «Times New Roman»;

Размер шрифта задается кодом:

Размер шрифта задается в пикселях, пунктах, процентах или других относительных величинах.

Цвет шрифта можно задать с помощью команды:

Насыщенность шрифта определяется двумя состояниями: нормальный и жирный. Задать жирное начертание шрифта можно с помощью кода:

Если необходимо шрифт сделать нормальным:

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

соответствует обычному начертанию шрифта.

Значение 800 — это жирный шрифт. Остальные цифры соответствуют разной насыщенности шрифта. Максимальное значение насыщенности шрифта 900. Обратите внимание данные числа указываются без величин измерения!

Также, есть очень простой способ сделать текст прописными буквами: свойство text-transform. Пример:

text-transform: uppercase;

Для того, чтобы сделать текст курсивом используется свойство font-style:

Напомним, что делать текст жирным начертанием и курсивом можно с помощью тегов <b> и <i>. Какой из способов выбрать в каждом конкретном случае решаете вы. Если необходимо единичное слово или букву сделать только жирной или курсивом, то логичнее использовать теги, если кроме этого присутствует другое оформление, то удобнее применить CSS стили. Напоминаем, что теги <strong> и <em>, которые визуально делают текст жирным и курсивом, в HTML 5 выполняют семантическую роль, и применять их как замену тегам <b> и <i>ь не корректно.

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

.one {
color: green;
text-transform: uppercase;
font-weight: bold;
}

See the Pen span by Alex (@Asmodey) on CodePen.

Начертание полужирное в css

Курсив и жирный шрифт CSS — учебник CSS

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

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

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

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

p { font-weight: bold; }

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

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

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

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

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

p { font-style: italic; }

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

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

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

Курсив и жирный шрифт CSS — учебник CSS

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

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

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

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

p { font-weight: bold; }

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

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

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

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

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

p { font-style: italic; }

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

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

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

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

Чтобы сделать в CSS жирный шрифт, следует использовать ряд стандартных команд. Но можно воспользоваться и нестандартными вариантами, которые дают интересный эффект. Жирное начертание применяется для выделения строго определенного фрагмента текста. CSS нам помогает присвоить такой шрифт любому словосочетанию или даже отдельной букве. Если вы до сих пор используете HTML-теги для достижения этого эффекта, вам нужно пересмотреть свои взгляды на программирование, так как каскадные таблицы стилей дают вам как разработчику больше возможностей. О некоторых из них мы поговорим в этой статье.

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами , то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

Заключение

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

Работаем с насыщенностью шрифтов в CSS

Большинство шрифтов, которые мы используем, представлены в нескольких уровнях насыщенности. Самая распространенная градация: нормальное начертание (normal) и полужирное начертание (CSS bold). В этой статье я хочу познакомить вас с различными уровнями насыщенности шрифтов, доступными в CSS.

Объявление насыщенности в CSS

В CSS предусмотрены различные значения насыщенности, которые можно применять к шрифтам (конечно же, если они представлены в семействе шрифтов):

• Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
• Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
• В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

Что будет, если уровень насыщенности отсутствует?

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

Уровень плотности шрифта	Алгоритм выбора
100-300	Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400	Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
500	Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
600-900	Проверяются уровни насыщенности выше указанного значения, а затем перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

Если в семействе шрифтов отсутствует указанный уровень насыщенности, некоторые браузеры могут изменять внешний вид текста ради выдержки стилизации. То есть, попытаются самостоятельно сгенерировать новый CSS font style bold. Этого лучше избегать, так как это может привести к неожиданным результатам в различных браузерах.

Можно воспользоваться свойством font-synthesis, предусмотренным в CSS3. Оно отвечает за то, разрешено ли браузеру самостоятельно синтезировать полужирный стиль в тех случаях, когда семейство шрифтов выглядит как полужирный текст. Ниже представлен пример использования этого свойства:

/* запрещаем браузеру синтезировать полужирный стиль шрифта */ font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Вопросы и ответы

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

Эти девять значений позволяют охватить все традиционные типографские уровни насыщенности.

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

Потому что числовые значения нейтральны, и их можно использовать независимо от номенклатуры стилей шрифта.

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

Перевод статьи “How To Fine-Tune Your Font Weights In CSS?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

HTML-текст

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

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

Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри элемента <body>.

HTML-элементы для текста

• Содержание:
• 1. Заголовки: <h2. ..h6>
• 2. Форматирование текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>
• 3. Ввод «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
• 4. Оформление цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
• 5. Абзацы, средства переноса текста: <p>, <br>, <hr>

1. HTML-элементы для заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

Фигура. 1. Элементы для заголовков HTML-документа

1.1. Элемент <h2>

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

Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Элемент <h3>

Представляет подзаголовки элемента <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Элемент <h4>

Показывает подзаголовки элемента <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Элементы <h5>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.

Для всех элементов доступны ‎глобальные атрибуты.

2. Элементы для форматирования текста

2.1. Элемент <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

Для элемента доступны ‎глобальные атрибуты.

2.2. Элемент <em>

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

Для элемента доступны ‎глобальные атрибуты.

2.3. Элемент <i>

Отображает шрифт курсивом.

Для элемента доступны ‎глобальные атрибуты.

2.4. Элемент <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

Для элемента доступны ‎глобальные атрибуты.

2.5. Элемент <strong>

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

Для элемента доступны ‎глобальные атрибуты.

2.6. Элемент <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.7. Элемент <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

Для элемента доступны ‎глобальные атрибуты.

2.8. Элемент <ins>

Выделяет текст в новой версии документа, подчёркивая его.

Для элемента доступны атрибуты cite и datetime.

2.9. Элемент <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.

Для элемента доступны атрибуты cite и datetime.

2.10. Элемент <mark>

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

Для элемента доступны ‎глобальные атрибуты.

3. Элементы для ввода «компьютерного» текста

3.1. Элемент <code>

Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

Для элемента доступны ‎глобальные атрибуты.

3.2. Элемент <kbd>

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

Для элемента доступны ‎глобальные атрибуты.

3.3. Элемент <samp>

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

Для элемента доступны ‎глобальные атрибуты.

3.4. Элемент <var>

Выделяет имена переменных, отображая текст курсивом.

Для элемента доступны ‎глобальные атрибуты.

3.5. Элемент <pre>

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

Для элемента доступны ‎глобальные атрибуты.

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

Для элемента доступны ‎глобальные атрибуты.

4.2. Элемент <bdo>

Используется для изменения текущего направления текста.

Для элемента доступен атрибут dir.

4.3. Элемент <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.

Для элемента доступен атрибут cite.

4.4. Элемент <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Для элемента доступен атрибут cite.

4.5. Элемент <cite>

Применяется для выделения цитат, названий произведений, сносок на другие документы.

Для элемента доступны ‎глобальные атрибуты.

4.6. Элемент <dfn>

Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.

Для элемента доступен атрибут title.

5. Абзацы, средства переноса текста

5.1. Элемент <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».

Для элемента доступны ‎глобальные атрибуты.

5.2. Элемент <br>

Переносит текст на следующую строку, создавая разрыв строки.

Для элемента доступны ‎глобальные атрибуты.

5.3. Элемент <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

Для элемента доступны ‎глобальные атрибуты.

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

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

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег <strong> является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег <em> выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

Не стоит использовать тег <strong> слишком часто. Страница перенасыщенная тегами <strong>, может быть «наказана» поисковыми системами. То же самое может произойти, если вы будете выделять все поисковые ключевые фразы на странице, либо одну и ту же фразу много раз.

Пример как сделать жирный шрифт HTML тегом <strong>:

<p>Обычный текст <strong>выделенный важный фрагмент текста</strong>.  Обычный текст.</p>

Жирный текст с помощью тега b

В отличии от тега <strong>, тег <b> не придает выделенному участку дополнительный логический смысл. Тег <b> является тегом физического форматирования и его предназначение — изменить стиль начертания текста.

То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг — используйте тег <b>.

<p>Обычный текст <b>текст жирным шрифтом</b>. Обычный текст.</p>

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

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

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

Свойство CSS внутри атрибута style:

<p>Текст жирным шрифтом.</p>

Класс CSS:

<style>
.bold_text {
    font-weight: bold;
}
</style>
	
<p>Текст жирным шрифтом.</p>
<p>Текст обычным шрифтом.</p>
<p>Текст жирным шрифтом.</p>

Что делать, если выделить текст жирным не получается

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

CSS свойство зазора

Пример

Установите зазор между строками и столбцов равным 50 пикселей:

.grid-container {
пробел: 50 пикселей;
}

Попробуй сам »

Определение и использование

Зазор Свойство определяет размер
разрыв между строками и столбцов. Это сокращение от
следующие свойства:

Примечание: Свойство gap ранее называлось
Крестьянская .

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Синтаксис CSS

Стоимость недвижимости

Значение	Описание	Играй
междурядье	Устанавливает размер зазора между строками в макете сетки	Играй »
колонна-зазор	Устанавливает размер зазора между столбцами в макете сетки.	Играй »

Другие примеры

Пример

Установите зазор между строками на 20 пикселей и столбцами на 50 пикселей:

.сетка-контейнер {
gap: 20px 50px;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Макет сетки CSS

Ссылка CSS: свойство row-gap

Ссылка CSS: свойство column-gap

Базовый CSS: стили текста в CSS

Урок 4: Стили текста в CSS

/ ru / basic-css / css-selectors / content /

Стили текста в CSS

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

Размер

Когда вы добавляете текст на веб-страницу — например, элемент

— существует размер по умолчанию, при котором ваш браузер будет отображать его.Для большинства браузеров этот размер составляет около 16 пикселей , что является сокращением от 16 пикселей . Если вы хотите, чтобы ваш текст был больше или меньше, вы можете использовать объявление CSS font-size для и установить любой размер .

Например, у вас уже есть одно объявление размера шрифта в вашем файле styles.css:

 font-size: 18px; 

У вас, вероятно, не будет никакой системы отсчета для определения того, насколько велик или мал 18 пикселей, просто прочитав это число.Однако, зная, что значение по умолчанию для браузера составляет около 16 пикселей, означает, что вы можете сделать некоторые предположения , например, добавив font-size: 18px; Объявление , как вы видели, сделает ваш текст немного больше.

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

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

Шрифт

Один из простейших способов существенно изменить внешний вид текста на веб-странице — это изменить шрифт . Если шрифт не указан, большинство браузеров отображают текст шрифтом Times New Roman. Вероятно, вы видели этот шрифт много раз в разных контекстах, но большинство веб-страниц попытаются отойти от Times New Roman, даже если только они будут выглядеть более уникальными, чем по умолчанию.

Чтобы изменить шрифт веб-страницы, вы можете использовать объявление семейства шрифтов CSS , чтобы указать, какой шрифт вы хотите использовать вместо . Например:

Семейство шрифтов

: 'georgia'; 

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

Не каждый браузер распознает каждый шрифт, и вы даже можете добавить новые шрифты на веб-страницу, которые ваш браузер не распознает по умолчанию.Однако пока придерживайтесь встроенных шрифтов, которые мы предлагаем, потому что большинство браузеров их распознают. Ниже приведены некоторые из наиболее распространенных веб-безопасных шрифтов , которые можно использовать на любом веб-сайте:

• Arial
• Courier
• Garamond
• Georgia
• Helvetica
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Вес

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

Есть несколько разных способов указать жирность выбранного шрифта, но самый простой - это , состоящее из одного слова :

 font-weight: жирный; 

Выравнивание

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

Этот текст выровнен по левому краю.

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

Этот текст выровнен по центру.

Вы можете использовать объявление CSS text-align , чтобы изменить выравнивание выбранного текста, и значения являются предсказуемыми: слева , справа , по ширине или по центру .Например:

 выравнивание текста: по центру; 

Множественные объявления

Теперь, когда вы увидели несколько разных объявлений CSS, также важно отметить, что набор правил может включать более одного объявления одновременно . Например, предположим, что вы хотите внести некоторые изменения в основной заголовок, к которому вы прикрепили идентификатор #header . В таблицу стилей можно добавить только один набор правил:

 #header {
} 

А затем добавьте несколько объявлений в стек:

 #header {
  размер шрифта: 18 пикселей;
  семейство шрифтов: 'грузия';
  font-weight: жирный;
  выравнивание текста: центр;
} 

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

 #header {font-size: 18px; font-family: 'georgia'; font-weight: bold; text-align: center;} 

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

Попробуй!

Попробуйте добавить каждое из этих объявлений во входные данные ниже:

 font-size: 18px;
семейство шрифтов: 'грузия';
font-weight: жирный;
выравнивание текста: центр;
 

Селектор для набора правил уже определен для вас и нацелен на абзац справа от него.После того, как вы попробуете эти объявления, попробуйте самостоятельно изменить некоторые значения . Например, установите для размера шрифта другое число (не забудьте включить «px») и посмотрите, что произойдет, или попробуйте другое семейство шрифтов , например «courier» или «arial».

Сделай сам!

Откройте файл styles.css в вашем проекте GCF Programming Tutorials в текстовом редакторе, и давайте добавим несколько новых объявлений стилей текста. Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его.

1. Сначала найдите набор правил #header , который вы добавили на прошлом уроке. Вам, , здесь ничего делать не нужно, ; просто обратите внимание, что вы уже добавили объявление выравнивания текста, которое центрировало ваш заголовок на странице.
2. Затем переместитесь на пару строк вниз и добавьте новый набор правил . Селектор для этого должен быть body , который будет нацелен на HTML-элемент - другими словами, все на странице - и объявление будет font-family .Вы можете выбрать любой шрифт, который вам нужен (если ваш браузер распознает его), но давайте просто выберем «georgia», как мы делали ранее:

    body {
     семейство шрифтов: 'грузия';
   } 

3. Переместитесь вниз еще на пару строк и добавьте еще один новый набор правил . На этот раз селектором будет button , который будет нацелен на каждый HTML-элемент на странице. Учитывая, что на странице есть только одна кнопка, для нет особой необходимости добавлять класс или идентификатор к нему , потому что вам не нужно указывать , какую кнопку вы имеете в виду: кнопку

    {
     
   } 

4. Давайте a dd два объявления для этого набора правил.Во-первых, объявление font-weight , чтобы текст кнопки немного выделялся:

    button {
     font-weight: жирный;
   } 

5. Затем давайте добавим также объявление с размером шрифта . В то время как для большинства текстовых HTML-элементов по умолчанию используется браузер размером около 16 пикселей, для элементов , как правило, по умолчанию меньше. Давайте немного увеличим размер :

    button {
     font-weight: жирный;
     размер шрифта: 16 пикселей;
   } 

Ваш полный стиля.css файл теперь должен выглядеть так:

 p {
    размер шрифта: 18 пикселей;
}
#header {
    выравнивание текста: центр;
}
тело {
    семейство шрифтов: 'грузия';
}
кнопка {
    font-weight: жирный;
    размер шрифта: 16 пикселей;
}
 

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

Поздравляем, вы стилизовали свой текст с помощью CSS!

/ ru / базовый-css / цвета-в-css / content /

CSS: свойство font-weight

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием font-weight с синтаксисом и примерами.

Описание

Свойство CSS font-weight определяет насыщенность или жирность шрифта.

Синтаксис

Синтаксис CSS-свойства font-weight:

.

  font-weight: value;  

Параметры или аргументы

значение

Толщина или жирность шрифта. Это может быть одно из следующих значений:

Элемент

Значение	Описание
нормальный	Нормальный вес шрифта (Normal = 400 font-weight) p {font-weight: normal; }
полужирный	Bold font-weight (Bold = 700 font-weight) p {font-weight: bold; }
смелее	На один шрифт темнее, чем его родительский элемент p {font-weight: bolder; }
зажигалка	На один font-weight легче, чем его родительский элемент p {font-weight: lighter; }
100, 200, 300, 400, 500, 600, 700, 800, 900	Числовые значения font-weight в диапазоне от 100-900, , где 100 - самый светлый, 900 - самый жирный. 400 = нормальный, 700 = жирный. p {font-weight: 400; }
унаследовать	унаследует font-weight от своего родительского элемента p {font-weight: inherit; }

Примечание

• Некоторые шрифты могут поддерживать только нормальный и полужирный .
• Если числовой вес шрифта находится в диапазоне 600-900, а точный числовой вес недоступен, будет использоваться ближайший доступный более темный вес шрифта.
• Если указан числовой вес шрифта от 100 до 500, а точный числовой вес недоступен, будет использоваться ближайший доступный меньший вес шрифта.

Совместимость с браузером

Свойство CSS font-weight имеет базовую поддержку в следующих браузерах:

• Хром
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Телефон
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Пример

Мы обсудим свойство font-weight ниже, исследуя примеры использования этого свойства в CSS.

Полужирным шрифтом

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

  span {font-weight: bold; }  

В этом примере CSS font-weight мы установили жирный шрифт текста в теге .

Обычное использование

Теперь давайте посмотрим на пример CSS font-weight, в котором мы устанавливаем нормальный текст.

  p {font-weight: normal; }  

В этом примере CSS font-weight мы установили нормальный вес шрифта для текста в теге

.

Использование числового значения

Давайте посмотрим на пример CSS font-weight, где мы устанавливаем текст в числовой font-weight.

  p {font-weight: 500; }  

В этом примере CSS font-weight мы установили вес шрифта для текста в теге

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

Текст · Bootstrap

Документация и примеры стандартных текстовых утилит для управления выравниванием, обтеканием, весом и т. Д.

Выравнивание текста

Простое выравнивание текста по компонентам с помощью классов выравнивания текста.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

  
 Ambitioni dedisse scripsisse iudicaretur.Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum. 
  

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

Текст с выравниванием по левому краю для всех размеров области просмотра.

Выровненный по центру текст на всех размерах области просмотра.

Текст с выравниванием по правому краю для всех размеров области просмотра.

Текст с выравниванием по левому краю в области просмотра размером SM (малый) или шире.

Текст с выравниванием по левому краю в области просмотра размером MD (средний) или шире.

Текст с выравниванием по левому краю в окнах просмотра размером LG (большой) или шире.

Текст с выравниванием по левому краю в области просмотра размером XL (очень большой) или шире.

  
 Текст с выравниванием по левому краю для всех размеров области просмотра 
 Выровненный по центру текст для всех размеров области просмотра.
 Выровненный по правому краю текст для всех размеров области просмотра. 

 Выровненный по левому краю текст в области просмотра размером SM (маленький) или шире. 
 Выровненный по левому краю текст в области просмотра размером MD (средний) или шире. 
 Выровненный по левому краю текст в области просмотра размером LG (большой) или шире. 
 Выровненный по левому краю текст в области просмотра размером XL (очень большой) или шире. 
  

Перенос и переполнение текста

Запретить перенос текста с помощью класса .text-nowrap .

Этот текст должен переполнять родительский.

  

  Этот текст должен переполнять родительский.
  

Для более длинного содержимого вы можете добавить класс .text-truncate , чтобы обрезать текст с многоточием. Требуется отображение : встроенный блок или отображение : блок .

Praeterea iter est quasdam res quas ex communi.

Praeterea iter est quasdam res quas ex communi.

  

  

    Praeterea iter est quasdam res quas ex communi.
  




  Praeterea iter est quasdam res quas ex communi.
  

Преобразование текста

Преобразование текста в компонентах с использованием классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

CapiTaliZed текст.

  
 Текст в нижнем регистре.
 Текст в верхнем регистре. 
 CapiTaliZed текст. 
  

Обратите внимание, что text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Плотность шрифта и курсив

Быстро изменить толщину (жирность) текста или выделить текст курсивом.

Жирный текст.

Текст нормального веса.

Облегченный текст.

Курсив.

  
 Жирный текст.
 Текст обычного веса. 
 Облегченный текст 
 Курсив. 
  

Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS

Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.

Введение

Cascading Style Sheets (CSS) - это язык, разработанный для двух дисциплин: программиста и дизайнера.Работа с текстом в сети - один из ярких примеров такой широкой доступности языка. Стилизация текста использует концепции из мира графического дизайна, но регулирует соглашения об именах для более широкой реализации.

Из этого туториала Вы узнаете о типографике web , искусстве стилизации текста. Подобно работе с печатным станком, вы разместите свой контент, примените визуальный стиль, чтобы помочь передать контент, и настройте контент для разборчивости и выделения.Цель стилизации текста в Интернете - создать визуальную иерархию по цвету, размеру, форме и пространству. Таким образом, заголовки выделяются из подзаголовков, которые выделяются из абзацев. Эти концепции помогают сделать текст более читабельным и читаемым.

Вы начнете обучение с написания HTML-структуры, которая будет состоять из содержимого заполнителя из Cupcake Ipsum. Вы будете работать с разными уровнями заголовков ( h2 - h6 ) и типами контента ( p , strong и em ) для применения нескольких свойств CSS, связанных с текстом, включая font-family , . font-size и цвет .Вы также загрузите пользовательские шрифты из Google Fonts, сторонней службы хостинга шрифтов. На каждом шаге этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к контенту. К концу у вас будет веб-страница с индивидуальным стилем.

Предварительные требования

Настройка примера HTML

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

Откройте файл index.html с помощью текстового редактора, например nano, Vim или Visual Studio Code. Добавьте следующий шаблонный HTML-код, чтобы предоставить файлу необходимый базовый код:

index.html

Элемент уже загружен в стилях .css , поэтому не забудьте подготовить и этот файл.

Затем вам нужно стилизовать контент. При создании текстовых стилей часто проекту нужны стили до того, как контент будет готов. В мире графического дизайна для этой цели используется заполнитель. Дизайнеры часто используют латинский текст в качестве заполнителя, известный как Lorem Ipsum. Есть много современных версий этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет справочная копия, используемая во всем HTML.

Для начала, HTML должен отображать иерархию , четкое различие и порядок содержания.В HTML это делается с помощью тегов заголовков: от

, самого верхнего заголовка, до

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

по умолчанию значительно больше, чем у

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

Чтобы создать этот иерархический контент, вы должны написать различные заголовки и заполнить каждый заголовок несколькими словами из Cupcake Ipsum в тегах в index.html . Вы будете следовать правильной семантике HTML , которая обеспечивает точное значение для браузера.

Для правильной семантики HTML:

• На странице будет только один элемент
  

  . Обычно это будет заголовок.

• Последующие уровни заголовков будут только на один меньший, равный или любой более высокий уровень.Например, единственный уровень заголовка, который идет после
  

  , будет либо

  , другой

  , либо

  , но никогда не будет

  или .

  .

Используя правила семантики заголовков, добавьте следующий выделенный HTML-код в index.html :

index.html

  ...
  
    
 Сахарная слива, чупа, чупс, шоколад, кекс, пончик 

    
 Макарун с овсяным пирогом "Тутси" 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Пудинг для яблочного пирога 

    
 Пряничный датский 

    
 Морковный пирог с леденцами на палочке мармеладные мишки 

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 
  
...
  

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

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

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

index.html

  ...
  
    
 Сахарная слива, чупа, чупс, шоколад, кекс, пончик 

    
 Макарун с овсяным пирогом "Тутси" 

    
 Конфеты "Джуджуб" брауни.Пирог с десертным роллом мармеладные конфеты с сахарной ватой. Сахарная слива Обожаю кексы. Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Обожаю зефирные конфеты. Кунжутные булочки по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка.Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

    
 Пудинг для яблочного пирога 

    
 Пирог с яблочным пирогом Я обожаю бисквит из мармелада. Шоколадный торт, тирамису, суфле, порошок, карамель, я люблю мороженое. Драже из солодки ириски в желейных бобах. Кунжут щелкает суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица.

    
 Пряничный датский 

    
 Пудра драже кунжута щелкает леденцами желе-о. Халва имбирный пряник вафельный чизкейк. Вафельный булочек Я люблю Я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски. Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

    
 Морковный пирог с леденцами на палочке мармеладные мишки 

    
 Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, кекс, коготь медведя.

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 

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

Наконец, добавьте , и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые подчеркнуты в содержании:

Индекс

.html

  ...
    
 Макарун с овсяным пирогом "Тутси" 

    
 Конфеты "Джуджуб" брауни. Пирог с десертным роллом мармеладные конфеты с сахарной ватой. Сахарная слива  Я люблю пирожные . Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Обожаю зефирные конфеты. Кунжутные хлопья  по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка. Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

    
 Пудинг для яблочного пирога 

    
 Пирог с яблочным пирогом Я обожаю бисквит из мармелада. Шоколадный торт тирамису  суфле порошок карамель  Я люблю мороженое.Драже из солодки ириски в желейных бобах. Кунжут щелкает суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица. 

    
 Пряничный датский 

    
 Пудра драже кунжута щелкает леденцами желе-о. Халва имбирный пряник вафельный чизкейк.   Вафельный булочек   Я люблю, я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски.Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

    
 Морковный пирог с леденцами на палочке мармеладные мишки 

    
 Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, кекс, медвежий коготь. 

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 

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

Теперь, когда у вас есть HTML-код, сохраните index.html и откройте его в своем браузере, чтобы увидеть, как страница выглядит со стилями браузера по умолчанию:

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

и

меньше, чем текст

.

На этом этапе вы настраиваете HTML-контент, который будет стилизован на протяжении всей оставшейся части учебника.Затем вы будете работать со свойством font-family , узнаете о стеке шрифтов , списке шрифтов, которые может использовать браузер, и примените шрифты к различным элементам.

Использование семейства шрифтов

Свойство

Затем вы будете работать со свойством CSS font-family и загрузить внешний файл шрифта из службы Google Fonts. Имя этого свойства происходит от термина типографики, который описывает набор шрифтов и варианты этого шрифта, включая полужирные и курсивные версии.У шрифта может быть множество из этих вариаций, но все они могут быть частью одного и того же семейства шрифтов , с теми вариациями, которые называются свойствами font-weight и font-style .

Чтобы начать работу с семейством шрифтов , полезно понять подробности о его вариантах значений. Значением свойства font-family является список шрифтов, называемый стеком шрифтов. Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства font-family :

  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  

Браузер сначала определит, доступна ли Helvetica Neue для использования, либо в виде шрифта, установленного на компьютере, либо в виде шрифта, предоставленного веб-сайтом.Если браузер не находит шрифт Helvetica Neue, он переходит вниз по списку к Helvetica, а затем к Arial. Если браузер не может найти какой-либо из этих шрифтов, то последний шрифт в списке, sans-serif , будет использовать то, что браузер установил в качестве шрифта по умолчанию для шрифта стиля sans-serif .

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

Создайте файл с именем styles.css в том же каталоге, что и index.html . Откройте его в текстовом редакторе и добавьте шрифт по умолчанию для страницы:

.

styles.css

  body {
  семейство шрифтов: "Avenir Next", Calibri, Verdana, без засечек;
}
  

В этом коде вы начинаете с селектора типа body со свойством font-family .Затем для стека шрифтов вы начинаете с «Avenir Next» , который будет доступен в браузерах iOS и macOS. Avenir Next заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт — Calibri для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий запасной вариант шрифта, вы затем используете Verdana , который был широко доступен на компьютерах с начала 2000-х годов. Наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию без засечек в качестве последней опции шрифта в стеке шрифтов.

Сохраните styles.css , затем откройте index.html в своем браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет выполняться рендеринг Calibri. На следующем изображении показано, как этот стек шрифтов выглядит в MacOS:

В этом разделе вы использовали свойство font-family , чтобы настроить стек шрифтов по умолчанию для веб-страницы.Вы также настраиваете свойство font-family , которое применяется конкретно к текстовому содержимому заголовка. В следующем разделе вы будете использовать службу Google Fonts, чтобы загрузить файл пользовательского шрифта и использовать его на странице.

Загрузка пользовательских шрифтов с помощью Google Fonts

Теперь, когда вы использовали свойство font-family со шрифтами, уже установленными на вашем компьютере, пришло время загрузить шрифты из внешней службы. Это расширит диапазон шрифтов, которые вы можете использовать для стилизации текста.В этом разделе вы будете работать со службой Google Fonts, чтобы загрузить и использовать шрифт на веб-странице.

Браузеры могут загружать любой шрифт при условии, что для этого браузера предоставляется соответствующий формат файла шрифта. Служба шрифтов, такая как Google Fonts, облегчает работу по определению и размещению шрифтов, предоставляя файлы CSS и шрифтов, необходимые для загрузки шрифта. Есть много других сервисов, таких как Google Fonts, но Google Fonts содержит лицензионные шрифты и шрифты с открытым исходным кодом и предлагает эту услугу бесплатно.

Для начала откройте в браузере fonts.google.com .

В Google Fonts вы можете выбирать из множества различных шрифтов. В этом руководстве будут использоваться два: Public Sans и Quicksand.

В поле поиска Google Fonts найдите Public Sans . Когда карточка шрифта появляется из результатов поиска, отображается предварительный просмотр шрифта. Щелкните карточку, чтобы перейти на страницу шрифта:

На странице шрифтов Public Sans будут перечислены все варианты шрифта.Они известны как весов , которые варьируются от 100 до 900. Для целей этого руководства найдите стили Regular (400) и Bold (700) и нажмите кнопку + Select this style next к каждому варианту стиля, а также их начертание курсивом.

Как только вы выберете первый стиль, появится выбранный семейный инструмент. Этот инструмент предоставит вам HTML и CSS, необходимые для использования этих шрифтов:

Выберите метод , чтобы загрузить шрифты в браузер и скопировать предоставленный HTML.Откройте index.html и добавьте код в элемент после loading styles.css . Не закрывайте Google Fonts, так как вы вернетесь к нему еще пару раз:

index.html

  ...

    
    

...
  

На этом этапе повторная загрузка index.html в вашем браузере не приведет к визуальным изменениям. Браузер загружает шрифт, но его необходимо добавить в стек шрифтов, чтобы применить шрифт к содержимому.

Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет набор шрифтов Public Sans и стандартный шрифт браузера sans-serif с семейством шрифтов : Public Sans, sans-serif; . Поскольку у вас уже есть стек шрифтов с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, — это имя для ссылки на Public Sans.

Используя существующий стек шрифтов в styles.css , замените Avenir Next и Calibri на Public Sans :

styles.css

  body {
  семейство шрифтов: "Public Sans", Verdana, sans-serif;
}
  

Теперь, когда объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans.

Одна из распространенных дизайнерских практик, позволяющих привлечь больше внимания к заголовкам, — использовать для заголовков шрифт, отличный от шрифта для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand». Это будет заголовок или display font для элементов с

по

на странице.

После того, как вы нашли Quicksand, выберите карточку шрифта и добавьте полужирный (полужирный) (600) и полужирный, (700) к выбранным шрифтам вместе с Public Sans. Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение href на новую ссылку в файле index.html :

index.html

  ...

    
    " rel = "таблица стилей">

...
  

Теперь, когда Quicksand настроен для загрузки в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив список селекторов CSS, разделенных запятыми, который называется групповым селектором , в файл styles.css . В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем используйте шрифт браузера по умолчанию sans-serif :

styles.css

  ...
h2, h3, h4, h5, h5, h6 {
  семейство шрифтов: «Зыбучие пески», без засечек;
}
  

Сохраните изменения в файле styles.css и вернитесь в браузер, чтобы перезагрузить индекс .html . Не стесняйтесь закрыть Google Fonts на этом этапе. Когда браузер загрузится, вы увидите, что отображаются два шрифта. Теперь Quicksand присутствует во всех заголовках, а Public Sans — во всем остальном содержимом, включая содержимое, выделенное жирным шрифтом и курсивом.

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

Использование

font-weight и font-style Properties

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

Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства font-weight , вы можете изменить толщину или тонкость отображения шрифта. Свойство font-weight имеет два общих значения: normal и bold . Нормальное значение — это значение по умолчанию font-weight для большей части текста в браузере. Значение полужирным шрифтом — это значение по умолчанию font-weight для заголовков и элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имени нормальных и жирных значений.

Числовые значения font-weight зависят от шрифта, который вы загружаете. Когда вы добавляли шрифт Public Sans из Google Fonts, вы выбрали толщину Обычный (400) и Полужирный (700). Цифры в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта. Кроме того, значение font-weight для 400 является числовым эквивалентом нормального , например, 700 является числовым эквивалентом жирным шрифтом .Текст, использующий Public Sans, то есть все, кроме заголовков, будет автоматически использовать эти веса.

В качестве альтернативы, выбор шрифтов Quicksand включал полужирный (600) и полужирный (700) шрифт. Значение 600 не имеет числового эквивалента и должно быть определено с использованием числового значения.

Вы начнете с установки начертания шрифта для всех заголовков полужирным шрифтом 600 Quicksand. В файле styles.css найдите селектор групп со всеми значениями заголовков и добавьте шрифт font-weight: 600; Объявление в блок селектора:

стилей.css

  ...
h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: «Зыбучие пески», без засечек;
    font-weight: 600;
}
  

После внесения этого изменения сохраните styles.css и повторно загрузите index.html в своем браузере. Вы увидите небольшое истончение заголовков по мере их изменения от значения Quicksand 700 до значения 600 .

Теперь, когда вы настроили все элементы заголовка для использования веса Quicksand 600 , все еще есть места для использования варианта шрифта 700 .Для начала создайте селектор типа h4 в файле styles.css и добавьте font-weight: 700; в блоке селектора:

styles.css

  ...
h4 {
    font-weight: 700;
}
  

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

Сохраните изменения в styles.css , а затем создайте новый селектор, нацеленный на текст, заключенный в теги и . В случае стилей, написанных до сих пор, этот тип текста получит вариант Public Sans жирным курсивом. Вместо этого установите стили для использования стека шрифтов Quicksand.

Так как HTML, чтобы получить жирный курсив, это ... и ... , вам нужно будет создать селектор групп комбинаторов в файле styles.css , а затем применить свойство font-family с «Quicksand», без засечек как значение:

styles.css

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
}
  

После внесения этого дополнения в файл styles.css сохраните его, а затем перезагрузите index.html в своем браузере.Текст, который был выделен полужирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта. Это называется faux italic , когда браузер понимает, что это содержимое должно быть курсивом по умолчанию, но, поскольку курсивный вариант не определен, вместо этого он искусственно наклоняет текст.

Свойство для обработки того, выделен ли текст курсивом или нет, — font-style . Варианты значений для свойства стиля шрифта : нормальный и курсив .Вместо использования имитационного полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте в селектор группы strong em, em strong в файл styles.css свойство font-style со значением normal :

styles.css

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
    стиль шрифта: нормальный;
}
  

Это изменит текст, выделенный полужирным курсивом, на полужирный шрифт Quicksand.

Сохраните изменения в styles.css и перезагрузите index.html в своем браузере, чтобы увидеть изменения:

Вы использовали свойства font-weight и font-style в этом разделе, чтобы применить вариации шрифта Quicksand, загруженного из Google Fonts. Затем вы воспользуетесь свойством font-size , чтобы создать более крупный и разборчивый текст с более четкой иерархией среди заголовков.

Использование

font-size Свойство

В этом разделе вы будете использовать свойство font-size для применения разных размеров шрифта к содержимому на всей странице.Размер текста - важный фактор в передаче информации. Текст хорошего размера легче читать, а заголовки подходящего размера помогают передать иерархию для облегчения беглого просмотра информации. Вы измените размер шрифта на всех элементов, которые вы создали в index.html , чтобы сделать документ более читабельным.

Начните с установки размера шрифта по умолчанию для элемента body . Браузер по умолчанию font-size - 16px , но может быть полезно для повышения разборчивости многих шрифтов, если они будут немного больше.Откройте файл styles.css и добавьте размер шрифта : 18 пикселей; к корпусу элемент:

styles.css

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
}
...
  

Откройте index.html в браузере или обновите страницу. Изменение размера шрифта в элементе body изменило все шрифты на странице, увеличив их размер.

Размеры шрифта по умолчанию для элементов имеют относительный размер на основе родительского элемента, в данном случае элемента , с использованием процентного значения для размера шрифта.Использование формулы (цель / база) * 100% даст вам процентное значение, относящееся к базовому размеру шрифта, установленному в элементе .

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

как 45px . Используя формулу, целевой размер составляет 45 пикселей , а базовый размер - 18 пикселей , поэтому формула для этого будет (45/18) * 100% , что составляет 250% .Это означает, что предполагаемый размер для

будет в 2,5 раза больше размера базового font-size .

Верните вам файл styles.css и добавьте селектор элементов для h2 и добавьте размер шрифта : 250%; свойство и значение для установки размера шрифта:

styles.css

  ...
h2 {
    размер шрифта: 250%;
}
...
  

Теперь, когда вы установили относительный размер шрифта для элемента

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

Откройте файл styles.css и начните с добавления комментария после свойства h2 font-size , объясняющего отображаемый размер. Затем для каждого заголовка примените формулу, так что h3 имеет размер шрифта , эквивалент 36px , h4 равен 32px , h5 – 26px , h5 – 22px. , и, наконец, h6 до базового размера 18px .Размер по умолчанию для элемента

меньше, чем базовый размер, поэтому установка его на 100% гарантирует, что он не опустится ниже базового значения:

styles.css

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
}

h3 {
    размер шрифта: 200%; / * 36 пикселей * /
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
}

h5 {
    размер шрифта: 162,5%; / * 26 пикселей * /
}

h5 {
    размер шрифта: 122%; / * 22px * /
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
}
...
  

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

На этом шаге вы использовали свойство font-size для изменения размера текста на веб-странице. Вы использовали концепцию дизайна размера, чтобы придать содержанию иерархию помимо стилей браузера по умолчанию. На следующем шаге вы продвинетесь к дизайну контента с помощью свойства color .

Использование свойства

цвета для выделения текста

Основное внимание в следующем разделе уделяется свойству color CSS, использующему цвет для определения порядка и добавления смысла к содержимому. Цвет является одним из наиболее распространенных дизайнерских соображений, в частности, при определении различного значения текста. В этом разделе вы будете использовать именованных цветов для установки цвета текста. Именованные цвета - это набор предопределенных цветов, который вырос с годами; они соответствуют другим значениям веб-цветов, например, шестнадцатеричным цветовым кодам.В этом разделе будет использоваться список именованных цветов, который можно найти на странице Википедии о веб-цветах. Вы можете оставить страницу веб-цветов Википедии открытой в вашем браузере для справки.

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

Чтобы начать использовать цвет , вернитесь к файлу styles.css в текстовом редакторе. Как и в случае с разделом font-size , найдите селектор body и добавьте свойство color . Цвет текста по умолчанию в большинстве браузеров - черный.Для доступного цветового контраста важно, чтобы основной цвет оставался темным на светлом фоне. Используйте именованный цвет DarkSlateGray , который здесь только верблюжий для удобочитаемости, но при желании может быть полностью строчным:

styles.css

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
    цвет: DarkSlateGray;
}
...
  

Сохраните файл styles.css и обновите index.html в браузере.Цвет содержимого изменится с черного на темно-сине-зеленый:

Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы обеспечить более визуальную иерархию. Начните с селектора h2 в файле styles.css и добавьте свойство color со значением Indigo :

styles.css

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
    цвет: индиго;
}
...
  

Сохраните свои стили .css , вернитесь в браузер и обновите index.html . Текст

теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию:

Затем вы примените цвета к другим заголовкам. Quicksand - это забавный закругленный шрифт, и вы используете необычный образец контента Cupcake Ipsum, поэтому создайте яркую и яркую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к styles.css и для каждого из селекторов заголовков добавьте свойство color и значение цвета.Для элемента h3 используйте MediumVioletRed , для h4 используйте LimeGreen , для h5 добавьте Chocolate , для h5 используйте Crimson , затем, наконец, для h6 используйте Глубокий синий :

styles.css

  ...
h3 {
    размер шрифта: 200%; / * 36 пикселей * /
    цвет: MediumVioletRed;
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
    цвет: салатовый;
}

h5 {
    размер шрифта: 162.5%; / * 26 пикселей * /
    цвет: шоколадный;
}

h5 {
    размер шрифта: 122%; / * 22px * /
    цвет: малиновый;
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
    цвет: DeepSkyBlue;
}
...
  

После добавления свойств color к заголовкам сохраните styles.css и вернитесь в браузер, чтобы обновить index.html . Ваш контент теперь полон цвета:

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

Заключение

Работа с текстом - основная часть написания CSS для Интернета. Текст передает значение не только в том, что он говорит, но и в том, как он выглядит. Используя инструменты, которые вы изучили со свойствами font-family , font-weight , font-style , font-size и color , вы можете управлять текстом, чтобы обеспечить содержательный контекст для вашего веб-сайта. .Эти свойства не ограничиваются заголовками, рассматриваемыми в этой статье: их можно использовать с любым элементом, содержащим текст.

Если вы хотите прочитать больше руководств по CSS, посетите нашу страницу темы CSS.

Как исправить проблему смещения элементов жирным шрифтом при наведении

Использование &: hover {font-weight: bold} - здравый смысл для разработчика FE. Но шрифт смещается вправо, когда мы используем полужирный . Иногда это может вызвать разрыв строки или проблему с макетом.

Вот два решения css-only :

1

тень текста


  тень текста: 0 0 1px черный;
тень текста: 0 0 1px черный, 0 0 1px черный; // смелее
  

Войти в полноэкранный режимВыйти из полноэкранного режима

значение
1. = Координата X

Значение

2. = Координата Y

Значение

3. = радиус размытия

Значение

4. = цвет тени

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

Примечание
Safari не поддерживает десятичное число, что означает, что оно должно быть 1 пикселем.
Firefox очень чувствителен к радиусу размытия, а 1 пиксель слишком много

2

текст


  text-stroke: 1px черный;
-webkit-text-stroke: 1px черный; // Firefox и Edge
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Note
IE не поддерживает text-stoke

3

Заключение


текстовый штрих


Вроде лучшее решение без IE.Вот лучшее решение, которое я могу найти, чтобы включить IE.
@media all и (-ms-high-Contrast: none), (-ms-high-Contra: active) может обнаруживать наведение IE.

  @mixin m-hover-ie {
  @media all and (-ms-high-Contrast: none), (-ms-high-Contrast: active) {
     @содержание;
  }
 a: hover {
        текстовая обводка: 1px черный;
        -webkit-text-stroke: 1px черный;
    }
     @include m-hover-ie {
       &: hover {
        тень текста: 0 0 1px черный;
       }
    }
  }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

тень текста


Если вы действительно хотите использовать text-shadow в IE...
-moz-touch-enabled может обнаруживать наведение Firefox. Но это не стандартная функция, и она будет работать не для всех пользователей.
По моему личному опыту, он работает в Firefox v60 и выше.

  @mixin m-hover-firefox {
    @media (-moz-touch-enabled: 0) {
        @содержание;
    }
}
a: hover {
      тень текста: 0 0 1px;
      @include m-hover-firefox {
        тень текста: 0 0 .2 пикселей;
      }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Как сделать текст жирным? - Веб-учебники

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

Автор: Дерон Эрикссон

Описание. В этом руководстве по CSS описывается, как использовать свойство font-weight для выделения текста жирным шрифтом.

Учебник создан с использованием:
Windows XP

Свойство font-weight можно использовать для управления жирностью текста. В соответствии со спецификацией CSSW 2.1 он может иметь следующие значения:

нормальный | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | наследовать
 

Наиболее часто встречаются значения «нормальный» и «жирный». Нормальный, очевидно, указывает на использование обычного начертания шрифта, а жирный шрифт указывает на использование жирного начертания шрифта.Значение «наследовать» означает использование веса шрифта, унаследованного от родителя. Значение «смелее» указывает на использование более жирного веса, чем родительский, а «легче» указывает на использование более легкого веса, чем родительский. Числовые значения определяют различную толщину шрифта, где 100 - самый светлый, а 900 - самый тяжелый. 400 означает «нормальный», а 700 - «полужирный». Обычно браузеры просто показывают «нормальный» и «жирный» вес и не показывают детализированных возможностей, предлагаемых числовыми значениями.

В файле style-test.html ниже показаны различные значения font-weight.

style-test.html

 font-weight: normal; 
 font-weight: жирный; 
 font-weight: полужирный; 
 font-weight: lighter; 
 font-weight: 100; 
 font-weight: 200; 
 font-weight: 300; 
 font-weight: 400; 
 font-weight: 500; 
 font-weight: 600; 
 font-weight: 700; 
 font-weight: 800; 
 font-weight: 900; 

 

На снимке экрана ниже показан style-test.html в IE7 и Firefox. Обратите внимание, что IE7, по-видимому, странным образом трактует font-weight 600.

.