generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
54 lines (38 loc) · 4.69 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
---
name: Обобщённое правило для шрифтов
theory: |
Удобным способом задать свойства для шрифта является использование правила `font`, которое позволяет указать:
* `font-style`
* `font-variant`
* `font-weight`
* `font-size` / `line-height` (эти два правила записываются через слэш)
* `font-family`
Шесть разных правил внутри одного! Это помогает сократить CSS код и улучшить его читабельность. Обязательными из них являются `font-size` и `font-family`. Остальные можно не указывать.
Пример записи со всеми возможными правилами: `font: italic small-caps bold 24px/1.2 Arial;`
Предположим, что нам нужен жирный курсив с размером шрифта 24 пикселя из семейства шрифтов Arial, тогда правило в CSS будет выглядеть следующим образом:
```css
.text {
font: italic bold 24px Arial;
}
```
<div class="hexlet-basics-example my-3" style="font: italic bold 24px Arial;">
Жирный курсив с размером шрифта 24 пикселя из семейства Arial
</div>
Обратите внимание на порядок использования значений внутри свойства `font`. Вначале идут стилистические правила, затем размер шрифта и его межстрочный интервал и потом семейство шрифта. Это важно, так как при другом порядке браузер может некорректно обработать результат.
При указании свойства `font-family` также рекомендуется указать универсальное семейство шрифтов. Это необходимо для того, чтобы при отсутствии шрифта у пользователя был выбран подходящий из установленных в его системе. Как и при указании одиночного свойства `font-family`, все шрифты должны быть отделены запятыми. Это же касается и семейства шрифта.
```css
.text {
font: italic bold 24px Arial, sans-serif;
}
```
## Использование одного правила или нескольких
Этот раздел относится не только к правилу `font`, но и ко всем обобщённым правилам, которые вы изучите в процессе прохождения курса. С одной стороны, кажется, что использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:
1. Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило
2. Обобщённые свойства перебивают отдельные. Если в коде вы указали `font-variant: small-caps;`, а потом для этого же элемента применили `font: 16px/24px sans-serif;`, то капитель будет сброшена в значение по умолчанию
instructions: |
Добавьте в редактор параграф с классом `bold-text` и установите следующие правила используя обобщённое свойство `font`:
* Жирное начертание
* Размер шрифта: `24px`
* Шрифта Verdana
* Семейство шрифтов: без засечек
Стили запишите в теге `<style>`