generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
40 lines (28 loc) · 3.07 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
---
name: Цвета
theory: |
Выделение цветом участка текста — распространённый способ привлечь внимание пользователя на странице. Различные рекламные баннеры так и норовят сообщить нам о невероятной скидке, или что предложение закончится сегодня. Также такое выделение может обозначать важную информацию, которая обязательно должна быть прочитана.
Используя CSS, можно устанавливать цвет текста как для всей страницы, так и для небольшого участка. Это определяется селектором, который будет выбран. Сам же цвет устанавливается с помощью свойства `color`, значением которого является код цвета или его алиас.
В этом уроке цвет будет указываться в формате `HEX` — это шестнадцатеричное представление цвета, где `#ffffff` означает белый цвет, а `#000000` чёрный. Для удобства, в конце урока, оставлена ссылка на портал, где можно выбрать любой цвет и получить его значение в формате `HEX`. Подробнее про цветовые модели в CSS будет рассказано в одном из следующих уроков.
Создадим параграф и выделим в нём одно слово. Для этого обернём его в строчный тег `<span>` и дадим произвольный класс, с помощью которого и будем выбирать элемент в CSS:
```html
<p><span class="info">Внимание!</span> Важная информация</p>
```
```css
.info {
color: #5263f3;
}
```
<div class="hexlet-basics-example my-3">
<p class="m-0"><span style="color:#5263f3;">Внимание!</span> Важная информация</p>
</div>
Чтобы установить цвет текста для всей страницы можно использовать селектор `body`. Свойство `color` является наследуемым, поэтому цвет будет установлен для всех текстовых элементов:
```css
body {
color: #333333;
}
```
instructions: |
В редакторе добавьте элемент `<span>` с классом `violet` и установите для него цвет равный `#9400d3`. Для подключения стилей воспользуйтесь тегом `<style>`.
tips:
- Выбрать цвет и получить его `hex`-код можно на [HTML Color Codes](https://htmlcolorcodes.com/)