Испытание. Дуэль. [18/18]
В финальном испытании снова вернёмся к биатлону.
Это необычное испытание, так как вам не надо менять HTML-код. Также все CSS-правила уже содержат правильные стили.
Но есть загвоздка: у CSS-правил потерялись селекторы. Вам нужно всего лишь подобрать нужные селекторы для каждого CSS-правила.
Подсказка: начните с перебора классов.
.shhoter-1 > ul.target > li.miss:nth-child(3) .level+span,
Порядок у меня такой: body само тело .shooter-1 верхний игрок .shooter-2 нижний игрок .target белая прямоугольная область под мишени li круги черного цвета (как бы все круги, все пункты списка) li:last-child отступ у последних кругов 1 и 2 мишени справа = 0, чтобы они выровнялись li .hitbox это серые кружки внутри черных кругов (списка) .lever это закрытая мишень (светло-серый цвет) .lever span это та самая палочка от закрытой мишени до этого пункта все мишени закрыты, открываем их: .shooter-1 li:nth-child(2) .lever, открываем мишень 2 у 1 игрока .shooter-1 li:nth-child(3) .lever, открываем мишень 3 у 1 игрока .shooter-1 li:nth-child(5) .lever открываем мишень 5 у 1 игрока .shooter-2 li:nth-child(1) .lever, открываем мишень 1 у 2 игрока .shooter-2 li:nth-child(4) .lever, открываем мишень 4 у 2 игрока .shooter-2 li:nth-child(5) .lever открываем мишень 5 у 2 игрока
css/css4-29.html
Курс «Наследование и каскадирование» Иерархическое дерево [1/18]
HTML-документ представляет собой иерархическое дерево. Это означает, что у каждого элемента (кроме корневого) есть только один родитель, т.е. элемент, внутри которого он располагается. У корневого раздела родитель отсутствует. Рассмотрим простейшую страницу:
<html>
<head></head>
<body>
<p>Текст документа</p>
<p class="text">Выделенная <span>строка</span></p>
</body>
</html>
Для этой страницы можно нарисовать такое иерархическое дерево:
Оно схематически отображает структуру вложенности элементов. В данном примере видно, что у элемента span родителем является p.text, а у p.text родитель — body.
Иерархическая структура документа определяет основы концепции наследования.
По картинке строим html-документ
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Произвольный текст</title>
</head>
<body>
<div>
<h1> </h1>
<p> </p>
</div>
<div class="empty"> </div>
<ul>
<li class="first"> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
Наследование [2/18]
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.
Здесь простое задание.
Наследование «на пальцах» [3/18]
Давайте на простых примерах подробнее разберёмся, в чём же преимущество наследования.
Рассмотрим пример:
<p class="text">Cтрока c выделенным <span>словом</span></p>
Представим, что нам нужно установить красный цвет шрифта для всего текста. Зададим CSS-свойства следующим образом:
.text {
color: red;
}
Благодаря наследованию цвет шрифта в теге span автоматически станет красным:
Cтрока c выделенным словом
А так бы выглядел результат, если бы наследование не работало:
Cтрока c выделенным словом
Нам пришлось бы отдельно прописывать цвет шрифта для тега span. И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой: нужно было бы задавать свойства для всех возможных вложенных тегов.
Файл css31.html