Здравствуйте! На прошлом уроке мы рассмотрели такое понятие как наследование стилей. Сегодня рассмотрим что такое каскадность в CSS.
Когда к определенному элементу применяется один стиль, то все относительно просто. Однако если же к одному и тому же элементу применяется сразу несколько различных стилей, то возникает вопрос, какой же из этих стилей будет в реальности применяться? В CSS действует механизм каскадности, которую можно определить как набор правил, определяющих последовательность применения множества стилей к одному и тому же элементу.
К примеру, у нас определена следующая веб-страница:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Каскадность стилей в CSS3</title>
<style>
.redLink {color: red;} /* красный цет текста */
.footer a {font-weight: bold;} /* выделение жирным */
a {text-decoration: none;} /* отмена подчеркивания ссылки */
</style>
</head>
<body>
<p class="footer">Для просмотра подробной информации пройдите по ссылке:
<a class="redLink" href="/index.php">Основы CSS 3</a></p>
</body>
</html>
В CSS определено три стиля и все они применяются к ссылке. Если к элементу веб-страницы применяется несколько стилей, которые не конфликтуют между собой, то браузер объединяет их в один стиль. Так, в данном случае, все три стиля не конфликтуют между собой, поэтому все эти стили будут применяться к ссылке:
Если же стили конфликтуют между собой, например, определяют разный цвет текста, то в этом случае применяется сложная система правил для вычисления значимости каждого стиля. Все эти правила описаны в спецификации по CSS: Calculating a selectors specificity. Вкратце разберем их.
Для определения стиля к элементу могут применяться различные селекторы, и важность каждого селектора оценивается в баллах. Чем больше у селектора пунктов, тем он важнее, и тем больший приоритет его стили имеют над стилями других селекторов.
-
Селекторы тегов имеют важность, оцениваемую в 1 балл
-
Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов
-
Селекторы идентификаторов оцениваются в 100 баллов
-
Встроенные inline-стили (задаваемые через атрибут style) оцениваются в 1000 баллов
Это интересно
0
|
|||
Последние откомментированные темы:
-
Обзор смартфона LG Optimus L9
(1)
hobert
,
01.03.2022
-
Антивирусные приложения Android для защиты устройства
(1)
Наталья_ласточка
,
27.02.2022
-
Как отключить уведомления от Сбербанк за 60 рублей через приложение Сбербанк онлайн и ещё 5 методов!
(1)
bbob
,
15.02.2022
-
Обходим блокировку сайтов.
(3)
Евгений_к
,
07.02.2022
20250425094457