generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
73 lines (55 loc) · 2.85 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
---
name: Рамки
theory: |
Любой блочный элемент в HTML можно выделять с помощью рамок. Такой стилистический приём позволяет удобно отделить однотонные компоненты друг от друга, или выделить ключевой элемент на странице
<div class="hexlet-basics-example my-3">
<p class="m-0">Этот текст находится в рамке, поэтому его легко найти с первого взгляда на страницу</p>
</div>
Для создания границы у элемента используется свойство `border`, которое является сокращением от нескольких свойств:
* `border-width` — ширина границы
* `border-style` — стиль границы
* `border-color` — цвет границы
Можно указывать несколько свойств, а можно всё объединить в рамках свойства `border`. Такой вариант встречается чаще всего и выглядит он так:
```css
.element {
border: 1px solid #ccc;
}
```
где:
* `1px` — ширина границы
* `solid` — стиль границы
* `#ccc` — цвет границы
Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:
* `dotted`
* `dashed`
* `solid`
* `double`
* `groove`
* `ridge`
* `inset`
* `outset`
и есть значение `none`, которое «удалит» границу, так как при значении `border-style: none` браузеры игнорируют другие свойства и удаляют границу
## Примеры границ
<div style="border: 3px solid #000; margin-bottom: 10px;" class="p-2">
solid (сплошная)
</div>
<div style="border: 3px dotted #000; margin-bottom: 10px;" class="p-2">
dotted (пунктирная)
</div>
<div style="border: 3px dashed #000; margin-bottom: 10px;" class="p-2">
dashed (штриховая)
</div>
```html
<style>
.border-dotted {
border: 1px dotted #000;
}
</style>
<div class="border-dotted">
Блок с пунктирной рамкой и чёрным цветом
</div>
```
instructions: |
Добавьте в редактор `<div>` с классом `border-bold` и установите сплошную границу толщиной 5 пикселей. Цвет рамки `#2196F3`. Стили запишите в теге `<style>`
tips:
- Попробуйте разные стили границ в редакторе