В этом уроке мы продолжим тему, которую начали в предыдущем уроке и если там говорилось о наследовании в CSS, то вместе с наследованием идут, рука об року, такие моменты как каскадность и приоритетность.
И, давайте начнем с каскадности. Что такое каскадность? и почему таблица стилей называется каскадной?
Для примера возьмем абзац(параграф) p
, у которого есть определенные правила text-indent:30px;. Это будет означать, что для данного параграфа задан отступ 30px.
Обычный параграф для примера
body{
color: #ff0000;
font-size: 20px;
font-family: courier new;
}
P{
text-indent:30px;
}
Что мы видим далее? Мы также, уже знаем, что любой элемент может наследовать от своих родителей правила, таким образам данный наш элемент – параграф соберет в себя каскад правил, которые он унаследует от других элементов родителей. Таким образом, на наш параграф будут влиять не только те правила, которые мы указали непосредственно для самого параграфа, но и, будут влиять те правила, которые он унаследовал у своих родителей. Выше на примере видно, что у тега body установлены свои правила для абзаца – это цвет, размер и вид шрифта. Так абзац кроме своего свойства, которое указанно для него, собрал каскад правил, которые заданы у выше стоящего родителя body.
Данную запись, виртуально, нужно представлять следующим образом, как будто бы для элемента «P» заданы следующие условия:
P{
text-indent:30px;
color: #ff0000;
font-size: 20px;
font-family: courier new;
}
Это и является каскадностью.
С каскадностью надеюсь разобрались, поэтому перейдем к приоритетности.
Что такое приоритетность? Как мы уже знаем, у одного и того же элемента может быть множество родителей. И давайте рассмотрим такую ситуацию: У нас есть список <ul> </ul>, у которого, как уже известно, имеются элементы <li> </li>. Что подразумевает, что у элементов <li> </li> есть тег-родитель <ul> </ul>, а их общим родителем будет являться тег <body> </body>. Рассмотрим ниже наглядно, как это получается:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Список для примера
- Список для примера
- Список для примера
</body> </html>
Ниже, как мы видим, передаются правила от тега body и от тега ul, сам же элемент li своих правил не имеет. Однако, если Вы заметили, элемент li наследует цвет сразу от двух своих, выше стоящих, родителей body и ul.
body{
color: #ff0000;
font-size: 20px;
font-family: courier new;
}
ul{
color: #0000ff;
}
Наверняка возник интересный вопрос, а какой же цвет примет элемент li? Если цвет может быть только одни, а на то, что бы задать этот цвет, претендуют два родителя.
Тут и вступает первое правило приоритетности:
Если элемент наследует какое-то свойство сразу от двух и более выше стоящих родителей, то будет всегда использоваться свойства от ближайшего его родителя. И в примере выше ближайшим родителем для элемента li будет тег ul.
Теперь рассмотрим второе правило приоритетности и ситуацию, что рассмотрели выше, немного усложним и добавим для самого элемента li также свой цвет.
body{
color: #ff0000;
font-size: 20px;
font-family: courier new;
}
ul{
color: #0000ff;
}
li{
color: #00ff00;
}
Что получается в этом случае? На элемент li начинают действовать сразу три цвета один от body, второй от родителя ul и третий, задан для самого элемента.
В этой ситуации главным оказывается то правило, которое задано непосредственно для самого элемента li и все наследования от других элементов будут ИГНОРИРОВАТЬСЯ.
Далее рассмотрим ситуации по сложнее, когда для одного и того же элемента задано несколько одних и тех же правил, но разными путями. Давайте смоделируем такую ситуацию. Возьмем уже наш, выше рассмотренный, список и усложним его, добавив ему свой идентификатор, и для самого элемента списка добавим также идентификатор и класс, а также включим стиль непосредственно в сам элемент с помощью атрибута style. Получим такую картину:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Список для примера
- Список для примера
- Список для примера
</body> </html>
Какую сейчас картину мы будем наблюдать? Ведь, теперь, у нас элемент списка наследует цвет от элемента body, от элемента ul, от самого тега li, а далее зададим этому же элементу li цвет для класса list-class и его идентификатора listSuper.
Ну и совсем, чтоб все было очень весело, мы, для элемента родителя ul с идентификатором mylist для элемента li у которого класс list-class также зададим свой цвет.
В итоге, мы получаем следующую картину стилей для данного списка:
body{
color: #000000; /*черный*/
font-size: 20px;
font-family: courier new;
}
ul{
color: #ff0000; /*красный*/
}
li{
color: #00ff00; /*зеленый*/
}
.list-class{
color: #0000ff; /*синий*/
}
#listSuper {
color: #F8C549; /*желтый*/
}
#mylist li.list-class{
color: #800000; /*коричневый*/
}
Теперь для одного и того же тега задано очень много вариантов цвета.
1-й вариант - это через атрибут style сразу в самом элементе, где цвет будет малиновый.
2-й вариант - для самого тега li задан зеленый цвет.
3-й вариант - классом .list-class, который находится в теге li, задан цвет синий.
4-й вариант – идентификатором, в этом же теге #listSuper, задан желтый цвет.
5-й вариант - задаем цвет через родителя, идентификатор #mylist, у которого коричневый цвет.
6-й вариант – просто наследование от своего родителя ul, у которого красный цвет.
7-й вариант – наследование от элемента body, у которого черный цвет.
Теперь, по сути, у браузер должен определить какой вывести цвет для элемента, на который претендуют сразу семь правил с разными цветами. Что бы решить эту не простую задачу браузер будет использовать специальную таблицу приоритетов, которая выглядит следующим образом:
Как понимать данную таблицу? Каждый из селекторов имеет свой вес, который отмечается в виде балов и правило набравшее наибольшее количество балов и будет применено браузером в первую очередь.
И так, первый селектор тегов - это элемент li, который получает 1 бал.
Далее идет селектор классов, у нас он .list-class, который получает 10 балов.
Затем идет id селектор, который задан конкретно для элемента #listSuper, получает 100 балов.
И последний, это встроенный селектор, который встроен у нас через атрибут style, у которого 1000 балов.
Заключение.
И в завершение давайте подобьем итоги и определим какой же цвет выведется на экран:
И так, мы знаем что у элемента есть встроенный стиль style="color:#97057f", который набирает 1000 балов.
Смотрим дальше, у нас есть селектор тега li он набирает 1 бал. У этого селектора есть еще селектор класса .list-class и он получит 10 балов. Ну и под конец селектор id #listSuper, который наберет 100 балов. В сумме мы получаем 111 балов.
Далее рассмотрим сложный стиль: #mylist li.list-class - что мы имеем, селектор id #mylist получит 100 балов. Затем идет селектор тега li, он набирает 1 бал и селектор класса .list-class, у которого так же 10 балов. В итоге так же 111 балов.
Правила заданные в родителе ul и body в данный момент не учитываются, они вступают в силу, только тогда, когда не будут заданы правила для самого элемента, тогда и произойдет наследование этих правил.
ВЫВОД
Что, в результате, мы имеем после расчета? Смело можно сказать что, обновив страницу, у первого элемента списка будет малиновый цвет, так как встроенный селектор дал нам 1000 балов. Данный момент стоит запомнить, что встроенный селектор практически всегда будет набирать наибольшее количество балов, таким образом, он всегда будет применяться первым.
Следуем дальше, и у нас возникла такая ситуация что сложный селектор #mylist li.list-class и селекторы элемента набрали одинаковое количество балов по 111. В этом случае действует следующее правило, которое гласит, что ниже стоящий элемент в таблице стилей имеет большей приоритет. Другими совами тот вариант условия, который стоит ниже по коду и будет применен для элемента.
И на картинке наглядно видно как браузер расставил приоритетность для данного
элемента:
На этом будем завершать данный урок, урок достаточно сложный и Вам стоит уделить ему особое внимание. Разберитесь с этой темой, так как данная тема является очень важной в CSS.
CSS