Принудительное наследование [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-правила существуют как минимум в трёх разных местах:
в подключаемом файле style.css для селекторов p или .text;
в атрибуте style;
в стандартных стилях отображения, встроенных в браузер.
Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.
Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
важность;
специфичность;
порядок исходного кода.
Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.
Файл 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,
.block2 message > p.message
{
padding: 5px;
border: 1px solid #95a5a6;
color: #95a5a6;
}
</style>
</head>
<body>
<div class="block1">
<p>Строка текста в первом блоке</p>
<p class="message">Еще одна строка текста в первом блоке</p>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</div>
<div class="block2 message">
<p>Строка текста во втором блоке</p>
<p class="message">Еще одна строка текста во втором блоке</p>
</div>
</body>
</html>
Битва за курочку [9/18]
Перед тем как разбирать сложные правила работы каскадирования, расчёта специфичности и определения приоритетов, потренируемся на котиках.
Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</p>
А вот CSS-код c двумя правилами для этих классов:
.blue {
color: blue;
}
.red {
color: red;
}
Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?
Ответ: красного цвета, второе правило приоритетнее.
Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже. В нашем случае это правило для класса red.
В этой серии заданий вам нельзя менять значения CSS-свойств, но можно изменять селекторы или менять порядок CSS-правил в коде.