</tr>
<tr>
<td>4.</td>
<td>Арнд Пайффер <em>Германия</em></td>
<td><strong>105</strong></td>
</tr>
<tr>
<td>5.</td>
<td>Евгений Устюгов <em>Россия</em></td>
<td><strong>104</strong></td>
</tr>
</table>
</div>
</body>
</html>
Испытание. Дуэль. [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-документ представляет собой иерархическое дерево. Это означает, что у каждого элемента (кроме корневого) есть только один родитель, т.е. элемент, внутри которого он располагается. У корневого раздела родитель отсутствует. Рассмотрим простейшую страницу:
Для этой страницы можно нарисовать такое иерархическое дерево:
Оно схематически отображает структуру вложенности элементов. В данном примере видно, что у элемента 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
Еще немного про наследование [4/18]
Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.
Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.
Например, для этого куска кода:
<p class="bordered">Cтрока c выделенным <span>словом</span></p>
Установим CSS-свойство:
.bordered {
border: 1px solid green;
}
Если бы наследовались все свойства, то результат бы выглядел так:
Cтрока c выделенным словом
На самом деле граница будет нарисована только у тега p.
О том, какие именно свойства наследуются, мы расскажем в следующих заданиях.
Простое задание.
Наследуемые свойства [5/18]
К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:
font-size, font-family, font-style, font-weight, color, text-align, text-transform,text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.
Также к наследуемым свойствам относятся list-style, cursor, visibility, border-collapse и некоторые другие. Но они используются значительно реже.
Весь список наследуемых свойств смотрите в стандарте CSS. Значение yes в колонке Inherited?.
Эти свойства можно и нужно задавать через предков, следуя семантике документа.
Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы: меню, основного содержания, информационных панелей. Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.
Простое задание
<!DOCTYPE html>
<html>
<head>
<title>Ненаследуемые свойства</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="block1">
<p>Строка текста в первом блоке</p>
<p>Еще одна строка текста в первом блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
<div class="block2">
<p>Строка текста во втором блоке</p>
<p>Еще одна строка текста во втором блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
</body>
</html>
1. Для.block1 задайте внутренние отступы 10px и рамку 1px solid #1abc9c.
2. Цель 2 Для ul внутри.block2 установите цвет фона background: #3498db;.
3. Цель 3 Для li внутри.block2 — цвет фона #e74c3c.
Ненаследуемые свойства [6/18]
В предыдущем задании мы перечислили основные наследуемые свойства. Все остальные относятся к ненаследуемым. Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.
А именно: background, border, padding, margin, width, height, position и др.
Весь список ненаследуемых свойств смотрите в стандарте CSS. Значение no в колонке Inherited?.
Не наследуются они из соображений здравого смысла. Например: если для какого-либо блока установлен внутренний отступ, автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности. Эти параметры чаще всего уникальны для каждого отдельного блока.
Задание
1. Для.block1 задайте внутренние отступы 10px и рамку 1px solid #1abc9c.
2. Цель 2 Для ul внутри.block2 установите цвет фона background: #3498db;.
3. Цель 3 Для li внутри.block2 — цвет фона #e74c3
Файл css32.html
Принудительное наследование [7/18]
Для каждого свойства может быть задано значение inherit.
Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.
Запись выглядит следующим образом:
p {
background: inherit;
}
В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.
Каскадирование [8/18]
CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».
Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). Среди этих свойств могут быть и конфликтующие между собой. Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.
Например, для элемента:
<p class="text" style="color: red;"></p>
CSS-правила существуют как минимум в трёх разных местах:
1. в подключаемом файле style.css для селекторов p или.text;
2. в атрибуте style;
3. в стандартных стилях отображения, встроенных в браузер.
Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.
Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
1. важность;
2. специфичность;
3. порядок исходного кода.
Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.
Файл css33.html
<!DOCTYPE html>
<html>
<head>
<title>Каскадирование</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
font-family: "PT Sans", sans-serif;
}
p {
font-size: 11px;
}
.block1 {
color: #1abc9c;
}
p.message,
