generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
107 lines (73 loc) · 6.71 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
---
name: Приоритет стилей
theory: |
Говоря о каскадности, возникает вопрос: «А что произойдёт, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:
* Стили в атрибуте тега
* Стили в отдельном файле
* Стили по умолчанию, которые добавляет браузер
Значения, указанные в атрибуте `style` будут важнее свойств в теге `<style>`, а они будут важнее стандартных стилей браузера.
## Приоритеты селекторов
Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета.
Разберём на примере. Создадим параграф с классом `red` и идентификатором `blue`
```html
<p id="blue" class="red">Текст с классом red и идентификатором blue</p>
```
Добавим противоречащие друг другу стили для класса, идентификатора и тега:
```css
p {
color: black;
}
.red {
color: red;
}
#blue {
color: blue;
}
```
Какого цвета будет параграф? Попробуйте выполнить этот пример в редакторе. Вы увидите, что текст будет синего цвета. С чем это связано?
У селекторов также существуют приоритеты. Условно можно расставить селекторы в следующем порядке по приоритету:
1. Селектор по идентификатору (`#blue`)
2. Селектор по классу (`.red`)
3. Селектор по тегу (`p`)
Где 1 — самый высокий приоритет, а 3 — самый низкий.
По этим правилам можно понять, что свойства указанные в селекторе по идентификатору будет обладать большим приоритетом, чем стили у селектора по тегу и классу. Поэтому параграф в прошлом примере был синим.
Это легко запомнить, если селекторы небольшие, но они могут быть сложнее. В качестве селектора может быть комбинация классов, тегов и так далее. Например:
```html
<p class="paragraph color-primary">Параграф</p>
```
```css
.paragraph.color-primary {
color: blue;
}
```
Здесь использовался селектор из двух классов сразу. Это означает, что стили будет применяться только для элемента, у которого есть оба класса. Такое разделение помогает разработчикам точечно устанавливать стили для схожих элементов. Например:
```html
<p class="paragraph color-primary">Параграф</p>
<p class="paragraph">Параграф</p>
<p class="paragraph color-primary">Параграф</p>
```
```css
.paragraph {
color: red;
}
.paragraph.color-primary {
color: blue;
}
```
В этом примере все параграфы с классом `paragraph` будут иметь красный цвет текста, но если дополнительно установлен класс `color-primary`, то цвет будет голубой. Почему так происходит? У таких селекторов также есть свои приоритеты. В сложных селекторах считается количество вхождений тех или иных селекторов и считается суммарный вес.
Для определения приоритета можно использовать следующие правила, где каждому селектору задаётся его «вес»:
* Селектор по тегу: **1**
* Селектор по классу: **10**
* Селектор по ID: **100**
* Стиль в атрибуте тега: **1000**
Чтобы узнать, какой селектор будет иметь больший вес, нужно сложить все полученные значения. Например:
* Селектор `.paragraph` состоит из одного класса, а значит его вес — 10
* Селектор `.paragraph.color-primary` состоит из двух классов. Его вес — 20
Таким образом свойства у селектора `.paragraph.color-primary` будут иметь больший приоритет, чем внутри селектора `.paragraph`.
Вышеприведённый список для вычисления «весов» или, как ещё говорят, «специфичности свойств» не является абсолютно полным, но этого способа достаточно на первых этапах изучения CSS. С практикой вы научитесь самостоятельно определять приоритет селекторов.
instructions: |
Добавьте в редактор параграф с классом `border` и id `no-border`. Установите следующие правила:
* Для класса `border` установите сплошную рамку любого цвета толщиной 1px. Это можно сделать так: `border: 1px solid #000;`
* Для id `no-border` отмените рамку. Используйте значение `none` у правила `border-style`
Первым укажите стили для селектора `.border`, вторым селектор `#no-border`
Стили запишите в теге `<style>`