Абревіатура CSS розшифровується як Cascading Style Sheets (каскадні таблиці стилів), де одним з ключових слів виступає «каскад». Під каскадом в даному випадку розуміється одночасне застосування різних стильових правил до елементів документа - за допомогою підключення декількох стильових файлів, успадкування властивостей і інших методів. Щоб в подібній ситуації браузер розумів, яке в підсумку правило застосовувати до елементу, і не виникало конфліктів в поведінці різних браузерів, введені деякі пріоритети.
Нижче наведені пріоритети браузерів, якими вони керуються при обробці стильових правил. Чим вище в списку знаходиться пункт, тим нижче його пріоритет, і навпаки.
- Стиль браузера.
- Стиль автора.
- Стиль користувача.
- стиль автора з додаванням! important.
- стиль користувача з додаванням! important.
найнижчим пріоритетом має стиль браузера - оформлення, яке за умовчанням застосовується до елементів веб-сторінки браузером. Це оформлення можна побачити в разі «голого» HTML, коли до документу не додається ніяких стилів.
Як задавати власний стиль розповідалося в чолі 1 (див. рис. 1.3 і 1.4).
! Important
Ключове слово ! Important грає роль в тому випадку, коли користувачі підключають свою власну таблицю стилів. Якщо виникає суперечність, коли стиль автора сторінки і користувача для одного і того ж елемента не збігається, то ! Important дозволяє підвищити пріоритет стилю або його важливість, іншими словами.
При використанні користувальницької таблиці стилів або одночасному застосуванні різного стилю автора і користувача до одного і того ж селектору, браузер керується наступним алгоритмом.
- ! Important доданий в авторський стиль - буде застосовуватися стиль автора.
- ! Important доданий в призначений для користувача стиль - буде застосовуватися стиль користувача.
- ! Important немає як в авторському стилі, так і стилі користувача - буде застосовуватися стиль користувача.
- ! Important міститься в авторському стилі і стилі користувача - буде застосовуватися стиль користувача.
Синтаксис застосування ! Important наступний.
Властивість: значення! important
Спочатку пишеться бажане стильова властивість, потім через двокрапку його значення і в кінці після пробілу ставиться ключове слово ! important .
підвищення важливості потрібно не тільки для регулювання пріоритету між авторською та користувальницької таблицею стилів, але і для підвищення специфічності певного селектора.
Специфічність
Якщо до одного елементу одночасно застосовуються суперечливі сти ліві правила, то вищий пріоритет має правило, у якого значення специфічності селектора більше. Специфічність це деяка умовна величина, що обчислюється в такий спосіб. За кожен ідентифікатор (надалі будемо позначати їх кількість через a) нараховується 100, за кожен клас і псевдоклас (b) нараховується 10, за кожен селектор тега і псевдоелемент (c) нараховується 1. Складаючи вказані значення в певному порядку, отримаємо значення специфічності для даного селектора.
* {} /* a=0 b=0 c=0 ->
специфічність=0 */ li {} /* a=0 b=0 c=1 ->
специфічність=1 */ li: first-line {} /* a=0 b=0 c=2 ->
специфічність=2 */ ul li {} /* a=0 b=0 c=2 ->
специфічність=2 */ ul ol + li {} /* a=0 b=0 c=3 ->
специфічність=3 */ ul li.red {} /* a=0 b=1 c=2 ->
специфічність=12 */ li.red.level {} /* a=0 b=2 c=1 ->
специфічність=21 */ #t34 {} /* a=1 b=0 c=0 ->
специфічність=100 */ #content #wrap {} /* a=2 b=0 c=0 ->
специфічність=200 */ Вбудований стиль, який додається до тегу через атрибут style, має специфічність 1000, тому завжди перекриває пов'язані і глобальні стилі. Однак додавання ! Important перекриває в тому числі і вбудовані стилі.
Якщо два селектора мають однакову специфічність, то застосовуватися буде той стиль, що зазначений в коді нижче.
У прикладі 19.1 показано, як впливає специфічність на стиль елементів списку.
Приклад 19.1. Колір списку
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Список </title>
<style>
#menu ul li {color: green; } .Two {color: red; } </style>
</head>
<body>
<div id="menu">
<ul>
<li>
Перший </li>
<li class="two">
Другий </li>
<li>
Третій </li>
</ul>
</div>
</body>
</html>
В даному прикладі колір тексту списку заданий зеленим, а другий пункт списку з допомогою класу two виділений червоним кольором. Обчислюємо специфічність селектора #menu ul li - один ідентифікатор (100) і два тега (2) в сумі дають значення 102, а селектор .two матиме значення специфічності 10, що явно менше. Тому текст фарбуватися червоним кольором не буде. Щоб виправити ситуацію, необхідно або знизити специфічність першого селектора, або підвищити специфічність другого (приклад 19.2).
Приклад 19.2. Зміна специфічності
/* Знижуємо специфічність першого селектора */ ul li {...} /* Прибираємо ідентифікатор */ .two {...} /* Підвищуємо специфічність другого селектора */ #menu ul li {...} #menu .two {...} /* Додаємо ідентифікатор */ #menu ul li {...} .two {color: red! important; } /* Додаємо! Important */ Додавання ідентифікатора використовується не тільки для зміни специфічності селектора, але і для застосування стилю тільки до зазначеного списку. Тому зниження специфічності за рахунок прибирання ідентифікатора застосовується рідко, в основному, підвищується специфічність потрібного селектора.
Питання для перевірки
1. Яка специфіка буде у селектора table.forum tr: hover p?
- 14
- 22
- 23
- 32
- 41
2. Яка специфіка буде у селектора #catalog .col3 .height div?
- 301
- 203
- 121
- 40
- 31
Відповіді
1. 23
2. 121