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>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ