Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Сделайте цвет текста
спан 2красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.
Рассмотрим пример первый.
<!DOCTYPE html>
<html>
<head>
<title>codebra</title>
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
</ol>
</body>
</html>HTML документы строятся на иерархии элементов. Каждый элемент является родителем или потомком, или и тем, и другим. Например, элемент body является родителем для элемента ol. А элемент ol является родителем для элементов li. body является дочерним элементу html и так далее.
Родителем и потомком называют те элементы, разница между которыми один уровень. Если разница между элементами несколько уровней, например, body и li, то такие элементы называют предок (body) и потомок (li).
И теперь давайте посмотрим реальный пример.
<p>
<span>спан в абзаце</span>
</p>
<h1>
<span>спан в заголовке</span>
</h1>Теперь первый span (родитель p) сделаем красного цвета. Второй span (родитель h1) сделаем зеленого цвета. Это реализовано в третьем примере.
p span {
color: red;
}
h1 span {
color: green;
}Рассмотрим четвертый пример.
<p>
<b>
<span>жирный спан в абзаце</span>
</b>
</p>То есть можно и больше двух селекторов использовать.
p b span {
color: red;
}Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
