CSS: Классы
Основное решение для стилизации конкретного участка страницы — использование классов. Они помогают задать нужный нам стиль не разом для всех элементов на странице, а только для тех элементов, у которых указан необходимый класс.
Чтобы задать стиль для класса в CSS используется селектор .название-класса. Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.
<p class="paragraph">
The text of our paragraph.
It's the paragraph class in CSS that
will set properties for this block of text.
</p>.paragraph {
color: #333333;
/*
The color property sets the color of the text.
In this case, it is gray with a value of #333333
*/
}Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен paragraph.

Задание
В редакторе добавьте параграф с классом news и укажите для него цвет текста #553333. Стили подключите с помощью тега <style>.
CSS: Классы
Основное решение для стилизации конкретного участка страницы — использование классов. Они помогают задать нужный нам стиль не разом для всех элементов на странице, а только для тех элементов, у которых указан необходимый класс.
Чтобы задать стиль для класса в CSS используется селектор .название-класса. Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.
<p class="paragraph">
The text of our paragraph.
It's the paragraph class in CSS that
will set properties for this block of text.
</p>.paragraph {
color: #333333;
/*
The color property sets the color of the text.
In this case, it is gray with a value of #333333
*/
}Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен paragraph.

Задание
В редакторе добавьте параграф с классом news и укажите для него цвет текста #553333. Стили подключите с помощью тега <style>.
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
expect(element).to.have.class('news');
const style = getComputedStyle(element);
// NOTE: Почему-то тест с #55333 значением не работает и требуется rgb
// AssertionError: expected { Object (0, 1, ...) } to have property 'color' of '#553333', but got 'rgb(85, 51, 51)'
expect(style).to.have.property('color', 'rgb(85, 51, 51)');
});Решение учителя откроется через:
20:00
