Конспект: Наследование и каскадирование

Ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Иерархическое дерево

HTML-документ представляет собой иерархическое дерево. 
Это означает, что у каждого элемента (кроме корневого) есть только один родитель, то есть элемент, 
внутри которого он располагается. 
У корневого раздела родитель отсутствует. 

Рассмотрим простейшую страницу:

<html>
   <head></head>
   <body>
      <p>Текст документа</p>
      <p class="text">Выделенная <span>строка</span></p>
   </body>
</html>

В данном примере видно, что у элемента span родителем является p.text, а у p.text родитель — body.
Иерархическая структура документа определяет основы концепции наследования.

HTML-документ представляет собой иерархическое дерево.

Это означает, что у каждого элемента (кроме корневого) есть только один родитель, то есть элемент,

внутри которого он располагается.

У корневого раздела родитель отсутствует.

Рассмотрим простейшую страницу:

<html>

<body>

Текст документа

Выделенная строка

</body>

</html>

В данном примере видно, что у элемента span родителем является p.text, а у p.text родитель — body.

Иерархическая структура документа определяет основы концепции наследования.

Наследование

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. 
Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, 
то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

<!DOCTYPE html>
<html>
  <head>
    <title>Наследование</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="setting.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Заголовок</h1>
    <ul>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
    <p>Текст первого параграфа.</p>
    <p>Текст второго параграфа.</p>
  </body>
</html>


body {
  font-family: "PT Sans", sans-serif;
  color: #2980b9;
  font-size: 12px;
}

li {
color: #1abc9c;
}

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно.

Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.

Наследование позволяет сократить размер таблицы стилей, но если стилей много,

то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

<!DOCTYPE html>

<html>

<head>

<title>Наследование</title>

</head>

<body>

<h1>Заголовок</h1>

<ul>

<li>Пункт списка</li>

</ul>

Текст первого параграфа.

Текст второго параграфа.

</body>

</html>

body {

font-family: "PT Sans", sans-serif;

color: #2980b9;

font-size: 12px;

}

li {

color: #1abc9c;

}

Наследование «на пальцах»

Рассмотрим пример:

<p class="text">Строка c выделенным <span>словом</span></p>

Представим, что нам нужно установить красный цвет текста для всего текста. 
Зададим CSS-свойства следующим образом:

.text {
  color: red;
}

Благодаря наследованию цвет текста в теге span автоматически станет красным:
Нам пришлось бы отдельно прописывать цвет текста для тега span.
И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой:
нужно было бы задавать свойства для всех возможных вложенных тегов.

Рассмотрим пример:

Строка c выделенным словом

Представим, что нам нужно установить красный цвет текста для всего текста.

Зададим CSS-свойства следующим образом:

.text {

color: red;

}

Благодаря наследованию цвет текста в теге span автоматически станет красным:

Нам пришлось бы отдельно прописывать цвет текста для тега span.

И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой:

нужно было бы задавать свойства для всех возможных вложенных тегов.

Ещё немного про наследование

Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.
Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.

Например, для этого куска кода:
<p class="bordered">Cтрока c выделенным <span>словом</span></p>

Установим CSS-свойство:
.bordered {
  border: 1px solid green;
}

На самом деле граница будет нарисована только у тега p.

Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.

Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.

Например, для этого куска кода:

Cтрока c выделенным словом

Установим CSS-свойство:

.bordered {

border: 1px solid green;

}

На самом деле граница будет нарисована только у тега p.

Наследуемые свойства

К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:
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.
https://www.w3.org/TR/CSS21/propidx.html 
Значение yes в колонке Inherited?.
Эти свойства можно и нужно задавать через предков, следуя семантике документа.

Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы: 
меню, основного содержания, информационных панелей. 
Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.

К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:

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.

https://www.w3.org/TR/CSS21/propidx.html

Значение yes в колонке Inherited?.

Эти свойства можно и нужно задавать через предков, следуя семантике документа.

Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы:

меню, основного содержания, информационных панелей.

Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.

Не наследуемые свойства

В предыдущем задании мы перечислили основные наследуемые свойства. 
Все остальные относятся к не наследуемым. 
Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.

А именно: 
background, border, padding, margin, width, height, position и др.

Весь список не наследуемых свойств смотрите в стандарте CSS. 
https://www.w3.org/TR/CSS21/propidx.html
Значение no в колонке Inherited?.

Не наследуются они из соображений здравого смысла. 
Например: 
если для какого-либо блока установлен внутренний отступ,
автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности. 
Эти параметры чаще всего уникальны для каждого отдельного блока.

В предыдущем задании мы перечислили основные наследуемые свойства.

Все остальные относятся к не наследуемым.

Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.

А именно:

background, border, padding, margin, width, height, position и др.

Весь список не наследуемых свойств смотрите в стандарте CSS.

https://www.w3.org/TR/CSS21/propidx.html

Значение no в колонке Inherited?.

Не наследуются они из соображений здравого смысла.

Например:

если для какого-либо блока установлен внутренний отступ,

автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности.

Эти параметры чаще всего уникальны для каждого отдельного блока.

Принудительное наследование

Для каждого свойства может быть задано значение inherit.
Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. 
Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:
p {
  background: inherit;
}

В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.


<!DOCTYPE html>
<html>
  <head>
    <title>Принудительное наследование</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="setting.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Первый список</p>
    <ul class="first-list">
      <li>Первый элемент списка</li>
      <li>Второй элемент списка</li>
      <li>Третий элемент списка</li>
    </ul>
    <p>Второй список</p>
    <ul class="second-list">
      <li>Первый элемент списка</li>
      <li>Второй элемент списка</li>
      <li>Третий элемент списка</li>
    </ul>
  </body>
</html>


body {
  font-family: "PT Sans", sans-serif;
}

ul {
  margin: 5px;
  padding: 5px;
  border: 1px solid #666666;

  list-style: none;
}

.second-list li {
  border: inherit;
  margin: inherit;
  padding: inherit;
  }

Для каждого свойства может быть задано значение inherit.

Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента.

Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:

p {

background: inherit;

}

В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.

<!DOCTYPE html>

<html>

<head>

<title>Принудительное наследование</title>

</head>

<body>

Первый список

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ul>

Второй список

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ul>

</body>

</html>

body {

font-family: "PT Sans", sans-serif;

}

ul {

margin: 5px;

padding: 5px;

border: 1px solid #666666;

list-style: none;

}

.second-list li {

border: inherit;

margin: inherit;

padding: inherit;

}

Каскадирование

CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».
Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). 
Среди этих свойств могут быть и конфликтующие между собой.
Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.

Например, для элемента:
<p class="text" style="color: red;"></p>

CSS-правила существуют как минимум в трёх разных местах:
в подключаемом файле style.css для селекторов p или .text;
в атрибуте style;
в стандартных стилях отображения, встроенных в браузер.
Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.

Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
важность;
специфичность;
порядок исходного кода.
Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.

CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».

Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств).

Среди этих свойств могут быть и конфликтующие между собой.

Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.

Например, для элемента:

CSS-правила существуют как минимум в трёх разных местах:

в подключаемом файле style.css для селекторов p или .text;

в атрибуте style;

в стандартных стилях отображения, встроенных в браузер.

Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.

Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:

важность;

специфичность;

порядок исходного кода.

Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.

Битва за курочку

Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</p>
А вот CSS-код c двумя правилами для этих классов:

.blue {
  color: blue;
}

.red {
  color: red;
}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?
Ответ: красного цвета, второе правило приоритетнее.

Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. 
В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.
В нашем случае это правило для класса red.

Вот HTML-код, в котором есть абзац с двумя классами:

Синий или красный?

А вот CSS-код c двумя правилами для этих классов:

.blue {

color: blue;

}

.red {

color: red;

}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?

Ответ: красного цвета, второе правило приоритетнее.

Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью.

В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.

В нашем случае это правило для класса red.

Битва за курочку. Раунд второй

Чуть более сложный пример. 
Тот же HTML:
<p class="red blue">Синий или красный?</p>

Немного другой CSS:
p.blue {
  color: blue;
}

.red {
  color: red;
}

В этом случае текст абзаца будет синим. 
Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.

Простое объяснение специфичности звучит так:
Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.
В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.

Чуть более сложный пример.

Тот же HTML:

Синий или красный?

Немного другой CSS:

p.blue {

color: blue;

}

.red {

color: red;

}

В этом случае текст абзаца будет синим.

Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.

Простое объяснение специфичности звучит так:

Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.

В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.

Битва за курочку. Борьба накаляется

Как вы уже знаете, существуют селекторы не только по классам, но и по id. 
Они начинаются с решётки #.

HTML:

<div id="experiment-1" class="experiment">
  <p class="red blue">Синий или красный?</p>
</div>

CSS:

#experiment-1 .blue {
  color: blue;
}
.experiment .red {
  color: red;
}

Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы. 
То есть, может существовать только один тег с определённым значением id.
Получается, что селектор по id может выбрать только один элемент.
И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.
Синий победит.

Как вы уже знаете, существуют селекторы не только по классам, но и по id.

Они начинаются с решётки #.

HTML:

Синий или красный?

</div>

CSS:

#experiment-1 .blue {

color: blue;

}

.experiment .red {

color: red;

}

Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы.

То есть, может существовать только один тег с определённым значением id.

Получается, что селектор по id может выбрать только один элемент.

И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.

Синий победит.

Битва за курочку. Запрещённый приём

CSS-правила, которые прописаны в style обладают наивысшим приоритетом. 
Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов. 
Поэтому мы и назвали этот приём запрещённым.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. 
Для этого нужно использовать ключевое слово !important. 
Оно задаёт CSS-свойству усиленный приоритет. 

Вот пример:
HTML:

<p style="color: red;" class="blue">Синий или красный?</p>
CSS:

.blue {
  color: blue !important;
}

Цвет текста в этом примере будет синим.

CSS-правила, которые прописаны в style обладают наивысшим приоритетом.

Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов.

Поэтому мы и назвали этот приём запрещённым.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style.

Для этого нужно использовать ключевое слово !important.

Оно задаёт CSS-свойству усиленный приоритет.

Вот пример:

HTML:

Синий или красный?

CSS:

.blue {

color: blue !important;

}

Цвет текста в этом примере будет синим.