11.1 Каскадирование (Cascading)
Основные принципы CSS включают каскадирование, наследование и специфичность. Понимание этих принципов помогает лучше контролировать стиль и внешний вид веб-страниц.
Каскадирование (Cascading)
Каскадирование — это основной принцип CSS, который определяет, как применять стили, когда несколько правил конфликтуют. При каскадировании браузер использует следующие правила для разрешения конфликтов:
- Последовательность источников: стили могут быть определены в разных местах — внешние таблицы стилей (CSS-файлы), внутренние таблицы стилей (внутри тега
<style>) и встроенные стили (в атрибутеstyleHTML-элемента). Правила применяются в порядке их появления. - Специфичность: каждый селектор имеет свой уровень специфичности. Чем выше специфичность селектора, тем выше его приоритет.
- Важность (Importance): правила с директивой
!importantимеют высший приоритет и применяются даже при наличии других конфликтующих правил.
Пример каскадирования:
В этом примере цвет фона будет желтым, так как встроенный стиль имеет приоритет над внутренним стилем. Цвет текста будет красным, так как встроенный стиль имеет приоритет над внутренним.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример каскадирования CSS</title>
<style>
body {
background-color: lightblue; /* Внутренний стиль */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Встроенный стиль -->
<p style="color: red;">Пример каскадирования CSS</p>
</body>
</html>
11.2 Наследование (Inheritance)
Наследование — это процесс, при котором дочерние элементы принимают стили своих родительских элементов. Не все свойства CSS наследуются. Наследуемые свойства включают цвет текста, семейство шрифтов, межстрочный интервал и некоторые другие.
Пример наследования:
В этом примере элемент <p> наследует шрифт и цвет от элемента <body>, а размер шрифта от класса .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример наследования CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Этот текст наследует шрифт и цвет от body, а размер шрифта от ".container".</p>
</div>
</body>
</html>
11.3 Специфичность (Specificity)
Специфичность определяет, какое правило CSS будет применено к элементу, когда несколько правил соответствуют одному и тому же элементу. Специфичность рассчитывается на основе количества и типов селекторов в правиле.
Правила расчета специфичности:
- Встроенные стили (inline styles) имеют наивысшую специфичность
- Идентификаторы (selectors by ID) имеют более высокую специфичность, чем классы, псевдоклассы и атрибуты
- Классы, псевдоклассы и атрибуты имеют более высокую специфичность, чем элементы и псевдоэлементы
- Элементы и псевдоэлементы имеют наименьшую специфичность
Пример расчета специфичности:
В этом примере текст будет красным, так как селектор #unique имеет наивысшую специфичность.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример специфичности CSS</title>
<style>
p {
color: blue; /* Специфичность 0-0-0-1 */
}
.highlight {
color: green; /* Специфичность 0-0-1-0 */
}
#unique {
color: red; /* Специфичность 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Этот текст будет красным.</p>
</body>
</html>
11.4 Важность (Importance)
CSS позволяет разработчикам явно указывать приоритетность стилей с помощью директивы !important. Правила с этой директивой будут применяться независимо от специфичности других правил.
Пример использования !important:
В этом примере текст будет синим, потому что правило с !important имеет высший приоритет.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример !important в CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Этот текст будет синим из-за "!important".</p>
</body>
</html>
11.5 Примеры использования принципов CSS
Примеры использования принципов CSS в реальных задачах.
Пример каскадирования и специфичности:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример каскадирования и специфичности CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Этот текст будет красным, потому что .important имеет более высокую специфичность, чем "p".</p>
</body>
</html>
Пример наследования и специфичности:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример наследования и специфичности CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Перезаписывает цвет от body для всех дочерних элементов */
}
.highlight {
color: red; /* Имеет более высокую специфичность, чем .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Этот текст будет красным из-за специфичности класса ".highlight".</p>
</div>
</body>
</html>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ