Термин «каскадный» относится к иерархическому порядку, в котором различные типы таблиц стилей взаимодействуют при возникновении конфликтов. Таблицы стилей каскадируются в следующем порядке (от наименьшего приоритета к наивысшему):
<link rel="stylesheet" href="mystyle.css">
<style>
body{
background-color:grey;
}
</style>
<body>
<h2>Hello world</h2>
</body>
<p style="color:blue;font-size:46px;">
I'm a big, blue, <strong>strong</strong> paragraph
</p>
Этот список можно свести к одному основному правилу: если два стиля вступают в конфликт, приоритет будет иметь последний использованный. Это звучит немного противоречащим списку каскадных порядков? Давайте рассмотрим это правило:
Что означает «два правила вступают в конфликт»? Это просто означает, что два противоречащих друг другу стиля назначены одному и тому же элементу. Например, предположим, что внешний файл стилей объявляет, что все абзацы имеют зеленый шрифт, но встроенные стили декларируют, что все абзацы имеют синий шрифт. Какого цвета это будет? В этом случае ваши абзацы будут иметь синий шрифт, поскольку встроенная таблица стилей располагается после внешней таблицы стилей и, следовательно, имеет более высокий приоритет.
Это правило начнет выполняться только в том случае, если два правила конфликтуют друг с другом в одном элементе. Если же в различных таблицах стилей указаны разные наборы свойств, которые не противоречат друг другу, то в этом случае будет использоваться весь набор стилей. Таблицы стилей будут дополнять друг друга.
Наследование относится к способу передачи свойств на странице. HTML использует родительско-дочерние отношения. Дочерний элемент обычно приобретает характеристики родительского элемента, если не указано иное. Например, взгляните на этот код:
<html>
<head>
<style type="text/css">
body{
color: blue;
font-family: arial;
}
</style>
</head>
<body>
<p>Привет Мир</p>
</body>
</html>
В браузере это будет выглядеть так:
Как видите, поскольку тег абзаца (дочерний элемент) находится внутри тега body (родительский элемент), он наследует все стили, назначенные тегу body. А что, если вы хотите, чтобы тег p наследовал не все стили родительского элемента? Мы может просто переопределить нужные правили для дочернего элемента. Пример:
<html>
<head>
<style type="text/css">
body{
color: blue;
font-family: arial;
}
p{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Привет Мир</p>
</body>
</html>
Теперь страница в браузере будет выглядеть так:
Вы можете заметить несколько вещей:
Правила приоритета также применяются и к различным типам селекторов. Приоритет селектора происходит в следующем порядке (3 - наивысший приоритет):
Другими словами, если у вас есть элемент с селектором класса и селектора id, и они содержат конфликтующие стили, стили идентификатора имеет более высокий приоритет.
Правило !important :
!mportant (в начале восклицательный знак) - это способ указать в CSS какое правило имеет больший приоритет. Это способ отменяет общее правило каскадного порядка. Если два стиля вступают в конфликт в одном элементе, и одному из них назначено правило !important, будет использоваться этот стиль.
<html>
<head>
<style type="text/css">
body{
color: green;
font-family: arial;
}
p{
color: red !important;
font-weight: bold;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>Привет Мир</p>
</body>
</html>
Несмотря на то, что синий цвет шрифта расположен ниже при объявлении стилей (был переопределен), цвет абзаца будет красным. В этой ситуации возникает конфликт между двумя существующими правилами, но т.к. крассный цвет имеет пометку !important, то используется именно он. Это применимо только в том случае, если конфликтующие стили используются в одном элементе. При использовании в разных элементах по-прежнему применяется общее правило каскадного порядка.
Работая с каскадным порядком и наследованием, следует помнить о трех правилах:
