Каскадность стилей

Оцените материал
(0 голосов)

Здравствуйте! На прошлом уроке мы рассмотрели такое понятие как наследование стилей. Сегодня рассмотрим что такое каскадность в 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 баллов

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
            #index {color: navy;}   /* темно-синий цет текста */
            .redLink {color: red; font-size: 20px;} /* красный цет текста и высота шрифта 20 пикселей */
            a {color: black; font-weight: bold;}    /* черный цет текста и выделение жирным */
        </style>
    </head>
    <body>
        <a id="index" class="redLink" href="/index.php">Основы CSS 3</a>
    </body>
</html>

Просмотреть  пример

Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:

font-size: 20px;
font-weight: bold;

которые устанавливают высоту шрифта 20 пикселей и выделение ссылки жирным. Так как каждое из эти правил определено только в одном стиле, то в итоге они будут суммироваться и применяться к ссылке без проблем. Кроме того, все три стиля содержат определение цвета текста, но каждый стиль определяет свой цвет текста. Так как селекторы идентификаторов имеют больший удельный вес, то в конечном счете будет применяться темно-синий цвет, задаваемый селектором:

#index {color: navy;}

Если селектор является составным, то происходит сложение баллов всех входящих в селектор подселекторов. Так, рассмотрим следующий пример:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
            a {font-size: 18px;}
            .nav li a {color: red;}  /* красный цет текста */
            #menu a {color: navy;}   /* темно-синий цет текста */
            .nav .menuItem {color: green;}  /* зеленый цет текста */
            a.menuItem:not(.newsLink) {color: orange;}  /* оранжевый цет текста */
            div ul li a {color: gray; } /* серый цет текста */
        </style>
    </head>
    <body>
        <div id="menu">
            <ul class="nav">
                <li><a class="menuItem">Главная</a></li>
                <li><a class="menuItem">Форум</a></li>
                <li><a class="menuItem">Блог</a></li>
                <li><a class="menuItem">О сайте</a></li>
            </ul>
        </div>
    </body>
</html>

Просмотреть  пример

В CSS определено аж пять различных селекторов, которые устанавливают цвет ссылок. В итоге браузер выберет селектор #menu a и окрасит ссылки в темно-синий цвет. Но почему, на каком основании браузер выберет этот селектор?

Рассмотрим, как у нас будут суммироваться баллы по каждому из пяти селекторов:

  Селектор

  Идентификаторы

  Классы

  Теги

  Сумма

 .nav li a

 0

  1

 2

  12

  #menu a

 1

  0

 1

  101

  .nav .menuItem

 0

  2

 0

  20

 a.menuItem:not(.newsLink)

 0

  2

 1

  21

  div ul li a

 0

  0

 4

  4

Итак, мы видим, что для селектора #menu a в колонке сумма оказалось больше всего баллов - 101. То есть в нем 1 идентификатор (100 баллов) и один тег(1 балл), которые в сумме дают 101 балл.

К примеру, в селекторе .nav .menuItem два селектора класса, каждый из которых дает 10 баллов, то есть в сумме 20 баллов.

При этом псевдокласс :not в отличие от других псевдокдассов не учитывается, однако учитывается тот селектор, который передается в псевдокласс not.

Правило !important

CSS предоставляет возможность полностью отменить значимость стилей. Для этого в конце стиля указывается значение !important:

a {font-size: 18px; color: red !important;}
#menu a {color: navy;}

В этом случае вне зависимости от наличия других селекторов с большим количеством баллов к ссылкам будет применяться красный цвет, определяемый первым стилем.

Прочитано 661 раз Последнее изменение Среда, 26 июля 2017 12:31
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+