Наследование и приоритеты CSS стилей

Наследование и приоритеты css

Итак, мы продолжаем изучать основы применения каскадных таблиц стилей css.

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

В основном это происходит из-за применения основных принципов применения css стилей — наследования и каскадирования.

То есть, к элементу может иметь отношение несколько css свойств, которые конфликтуют друг с другом (имеют разные значения). Естественно, все они примениться не могут. Применяется именно та css инструкция, которая имеет более высокий приоритет.

Но как же тогда определить, какая инструкция имеет больший приоритет? И как задать нужной нам инструкции больший приоритет, чтобы применилась именно она, а не какая-нибудь другая? Об этом мы и поговорим в этой статье.


Но сначала давайте рассмотрим основные принципы применения css стилей.

1. Принцип наследования css стилей.

Наследование css свойств

Ни для кого не секрет, что структура HTML кода любой интернет страницы имеет иерархическую структуру. То есть одни элементы входят в состав других, а те, в свою очередь — входят в состав третьих и так далее.

Для каждого уровня вложенности можно прописать свои css инструкции. Но если Вам нужно чтобы все одинаковые элементы страницы имели одинаковые стили, то Вам не нужно прописывать эти стили на каждом уровне вложенности.

Дочерние элементы (которые находятся внутри других) наследуют стили от своих предков. И нам нужно прописать стили только на самом верхнем уровне — и они применятся на всех уровнях.

Это очень удобно. Например: нам нужно задать цвет шрифта для всех элементов страницы. Мы прописываем css инструкцию для самого верхнего уровня:

body {
    color: #000000;}

Эта инструкция применит черный цвет текста для всех элементов, находящихся внутри тега <body>. А мы знаем, что все элементы страницы находятся внутри тега <body>. Больше ничего нам прописывать не нужно. Стиль применится на всех уровнях вложенности.

Нужно учесть, что элемент будет наследовать только те стили, которые он поддерживает. Так, строчные элементы не смогут наследовать  свойства, предназначенные для блочных элементов, например height (высота).

2. Каскадирование css.

Принцип каскадирования стилей css применяется в том случае, если одному и тому же элементу задано несколько css свойств с разными значениями и между ними возникает конфликт.

Что это значит? Для того, чтобы правильно назначить стили какому-либо элементу, мы можем использовать различные комбинации селекторов и придать нашему свойству более весомый приоритет, чем тот, который наследуется элементом от родителя или прописан в другой css инструкции.

3. Приоритеты css стилей.

Приоритеты CSS

Итак, мы с Вами подошли к самому интересному. Сейчас мы научимся правильно адресовать стили, чтобы они применялись именно там, где нам нужно, а не где попало.

Начнем с самого низа:

  1. Самым низким приоритетом обладают стили браузера. Не удивляйтесь — каждый браузер имеет свои стили по умолчанию. Они применяются, если для элемента вообще не заданы никакие стили. Поэтому, если Вы хотите, чтобы Ваш сайт во всех браузерах смотрелся одинаково — нужно обязательно прописывать стили всем элементам.Есть еще один способ на тот случай, если Вы все-таки забыли прописать стили к какому-нибудь элементу. Это сброс css стилей. Смысл заключается в том, чтобы изначально сбросить все стили браузеров. Для этого используются готовые блоки css инструкций, которые нужно просто вставить в начало вашего файла со стилями. Вот Вам один из вариантов такого «сбрасывающего» блока инструкций:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;}
     
    :focus {
        outline: 0;}
     
    body {
        line-height: 1;
        color: black;
        background: white;}
     
    ol, ul {
        list-style: none;}
     
    table {
        border-collapse: separate;
        border-spacing: 0;}
     
    caption, th, td {
        text-align: left;
        font-weight: normal;}
     
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";}
     
    blockquote, q {
        quotes: "" "";}
    Просто вставляете этот код в начало Вашего файла css и можете не беспокоиться о том, что Ваш сайт будет выглядеть в разных браузерах по разному.
  2. Вторыми по значимости являются стили, которые пользователь выставил в настройках браузера. Они тоже сбрасываются при помощи вышеуказанного списка инструкций.
  3. Следующим уровнем приоритета обладают стили, унаследованные элементами от своих предков. Это то, о чем мы говорили в начале статьи.
  4. Еще более высокий приоритет имеют стили, прописанные при помощи различных селекторов во внешнем файле с css стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье:  Как привязать CSS стили к HTML коду интернет страницы.
  5. Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов <style>.Часто бывает так, что к одному и тому же элементу имеют отношение стили, прописанные в разных селекторах. Чтобы разрешить этот конфликтиспользуется расчет специфичности селектора. И инструкции будут применяться к элементу в соответствии с этим расчетом. При расчёте специфичности селекторапринимается во внимание:
    • количество идентификаторов (#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
    • количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе — ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );
    • количество тегов в селекторе — ((0,0,1) за каждый объявленный тег в селекторе правила CSS).

    Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

    Поэтому, если у Вас не применяется какая-нибудь css инструкция — посмотрите, какая другая инструкция не дает ей примениться (имеет большую специфичность), рассчитайте ее специфичность  и пропишите к нужному селектору дополнительный идентификатор (какого-нибудь предка этого элемента). Тем самым вы повысите его специфичность, а значит и приоритет нужной Вам инструкции.

    Отслеживать селекторы проще всего при помощи дополнения к браузеру Mozilla FireFox — Firebug. Как его установить и использовать, я подробно описал здесь.
  6. Далее идут стили, прописанные непосредственно внутри тега элемента с помощью атрибута style.
  7. И наконец, самым высоким приоритетом обладают стили, отмеченные специальным сопроводительным словом !important.

На этом все на сегодня. Надеюсь, что информация оказалась полезной для Вас.

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.