CSS: Каскадность
Мы уже знаем, что CSS переводится как «Каскадные таблицы стилей». С таблицей стилей к этому моменту всё ясно, но что значит каскадные? Дело в том, что указать стили для элемента можно не только в одном месте.
Представьте каскад водопадов. Они перетекают друг в друга, накапливая всё больше и больше воды. В конечном итоге весь каскад окажется в общем бассейне. В CSS слово каскадность обозначает такое же действие, только вместо водопадов перетекают CSS свойства. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.
Создадим блок с классами text-bold
и text-dark
и укажем несколько свойств в разных селекторах:
<p class="text-bold text-dark">Важный текст о вреде сложного CSS</p>
p {
font-size: 20px;
}
.text-bold {
font-weight: bold;
}
.text-dark {
color: #333;
}
Если вставить этот пример в редактор, то выведется жирный текст размером 20 пикселей тёмного цвета. Произошло это благодаря каскадности — браузер объединил все стили из разных селекторов и получил следующие инструкции для стилизации элемента:
{
font-size: 20px;
font-weight: bold;
color: #333;
}
Это и есть каскадность стилей в CSS. Хоть мы и использовали разные селекторы, но, в конечном итоге, браузер объединил их в единый набор правил для элемента
Задание
Добавьте в редактор p
с классом cascade
и установите следующие правила:
- Для класса
cascade
установите размер шрифта 25 пикселей - Для тега
p
установите внутренний отступ в 15 пикселей со всех сторон. Это можно сделать с помощью правилаpadding: 15px;
Обратите внимание, как стили применятся одновременно. Стили запишите в теге <style>
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, '.cascade');
const style = getComputedStyle(element);
expect(style).to.have.property('font-size', '25px');
expect(style).to.have.property('padding', '15px');
});
Решение учителя откроется через:
20:00
