generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
50 lines (36 loc) · 4.25 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
---
name: Селекторы
theory: |
В уроках уже встречались селекторы по тегу и классу. Селектор — это описание того, к чему нужно применить тот или иной стиль CSS. Они бывают достаточно сложными, указывая не просто конкретный элемент, но и место, где он находится или внутри какого тега. Вспомним про селектор по классу. Он применяется к любому элементу, класс которого мы указали.
```html
<p class="text-bold">Жирный текст внутри параграфа</p>
<div class="text-bold">Ещё один текст внутри простого блочного элемента. Так как у него тоже есть класс text-bold, то он будет с жирным начертанием</div>
```
```css
.text-bold {
font-weight: bold;
}
```
Свойство `font-weight` со значением **bold** установит жирное начертание текста. С этим свойством вы подробнее познакомитесь при изучении оформления текста. Сейчас самое главное — этот стиль будет применён и к параграфу, и к блочному элементу `<div>`, так как они имеют один и тот же класс.
Ещё один уже знакомый селектор — селектор по тегу. Его назначение — установка стилей для всех тегов на странице. Это очень полезно, если нужно установить первоначальные стили для тегов в рамках всего проекта. Например, установить шрифт, его размер и насыщенность.
```css
p {
color: #333;
font: 18px/1.5 sans-serif;
}
```
Используйте селектор по тегу только для установки глобальных правил в рамках всего проекта. Это важно, так как стили будут применяться для всех тегов разом и можно, случайно, перезаписать уже существующие стили
Ещё одним способом указать стили является использование селектора по идентификатору. Используя атрибут `id`, можно указать уникальное имя для любого элемента на странице. Если данное имя указано, то к элементу возможно обратиться используя селектор по идентификатору. Для этого используется селектор вида `#имя_идентификатора`
```html
<p id="red">Красный параграф</p>
```
```css
#red {
color: red;
}
```
Важно помнить, что значение идентификатора уникально. На странице может быть только один элемент с одним конкретным значением. Например, в примере выше уже использован идентификатор `red` на параграфе. Второго такого элемента на странице не может быть. По этой причине идентификаторы указывают для больших обёрток, например для основной шапки сайта, но это не обязательное условие
instructions: |
В редакторе создайте параграф с идентификатором **red** и классом **bold**. Установите следующие свойства:
* Для идентификатора red установите красный цвет текста
* Для класса bold установите жирное начертание текста