Испытание: Галерея путешествий. Оформление
В этой демонстрации мы разберём испытание «Галерея путешествий. Оформление» из части «Основы CSS».
В этом испытании нам нужно:
- добавить одному из элементов на странице свойство, меняющее цвет фона
background-color: #333333;
- сменить у одного из элементов цвет текста на
color: white;
- подобрать правильное значение ширины
width
у абзаца (значение кратно 10 и меньше 500px); - добавить правило с заданием цвета текста
color: orange;
- подобрать нужные селекторы к двум правилам
selector
Поехали!
Первый пункт ТЗ:
- добавить одному из элементов на странице свойство, меняющее цвет фона
background-color: #333333;
#333333
— это тёмно-серый цвет. В образце такой фон у параграфа.
Добавим в правило для тега p
новое свойство.
Цвет фона мы параграфу изменили, но цвет текста явно не совпадает. И верно, вторым пунктом в ТЗ идёт:
- сменить у одного из элементов цвет текста на
color: white;
Изменим значение свойства color
в правиле для тега p
.
Переходим к следующему пункту ТЗ:
- подобрать правильное значение ширины
width
у абзаца (значение кратно 10 и меньше 500px);
Методом проб и ошибок находим правильную ширину — 460px
!
Цвет текста в абзаце мы изменили, но ссылка в нём должна быть оранжевой. В ТЗ есть соответствующий пункт:
- добавить правило с заданием цвета текста
color: orange;
Создадим новое правило для ссылки. Это тег a
.
Зададим тегу a
оранжевый цвет текста.
Остался последний пункт ТЗ:
- подобрать нужные селекторы к двум правилам
selector
Рассмотрим первое правило. В нём элементу задана оранжевая рамка шириной 5px.
В образце оранжевая рамка есть у второй картинки.
В разметке у этой картинки имеется класс new
.
Получается, первое правило selector
относится к классу new
. Укажем его.
Остался последний selector
. В правиле задаются отступ справа, выравнивание по верхнему краю и скругление.
Похоже, что последнее правило подходит для всех картинок в галерее. Это теги img
.
Укажем правильный селектор для последнего правила.
Наше решение совпадает с образцом. Испытание пройдено!
Вернуться к испытанию