Приоритеты и наследование в CSS

Доброго времени суток, дорогие мои читатели. В последних статьях я довольно часто затрагиваю тему основ языка CSS, и это не случайно. Во-первых я очень давно в рубрику основы html и css ничего не писал, а во-вторых информацию лучше преподносить по частям. И в-третьих, в статье SEO 2014 я написал, что особое внимание в новом году стоит уделить именно внутренней оптимизации.

Селекторы в CSS

А одной из основных ее частей является такая неконтролируемая вещь, как поведенческие факторы. Напрямую на них повлиять нельзя (накрутку сразу отметаем, т.к. можно схлопотать фильтр от поисковиков), а вот косвенно — пожалуйста. Улучшайте дизайн сайта, добавляйте всякие интересные штуки, социализируйте сайт (кнопки, опросы) — эти действия и могут повлиять на пользователей.

Как я уже сказал в статье об основах CSS, он создан для того чтобы оптимизировать весь дизайн сайта (точнее описание внешнего вида сайта). Без языка стилей нам бы пришлось прописывать все элементы внешнего вида в html-тегах. Во-первых это все делать крайне не удобно — представьте, в каждый элемент, внешний вид которого вы хотите изменить, придется прописывать еще несколько тегов и атрибутов. Долго и нудно, если честно.

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

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

Предки, потомки и сестринские элементы в HTML

Наверное, пора уже перейти к основной теме статьи. Немногим ранее мы рассмотрели виды css селекторов, а также правила их написания и примеры. И в той же статье я затронул тему приоритетов селекторов. Но сейчас немного общей информации. Как вы уже знаете из темы html тегов, в коде страницы все элементы делятся на предков и потомков. Оба понятия применяются относительно какого-либо тега. Итак, открыв исходный код какой-либо страницы, вы можете увидеть примерно следующее (в качестве примера я взял свой блог):

Исходный код страницы

Все современные браузеры позволяют просматривать код одновременно со страницей, а при изменении исходника сразу отображают результат (крайне удобная вещь при настройке дизайна сайта).

Итак, возьмем в качестве исследуемого объекта тег

<span class="desc">

.Его предком будет этот тег:

<a href="http://monetavinternete.ru/" class="font-4001">MonetaVInternete.ru </a>

А потомком вот этот:

<div class="logo">

И остается еще несколько элементов. которые называются сестринскими:

<div class="font-400">
<div class="poisk_l">

Иными словами, элемент, который находится внутри другого, является его потомком. Можно представить код в одну строку:

<div class="logo"> <span class="desc"><a href="http://monetavinternete.ru/" class="font-4001">MonetaVInternete.ru </a></span></div>

Думаю, с этим все понятно. Перейдем к приоритетам в CSS.

Приоритеты и наследование в CSS

Все приоритеты я распишу списком, чем больше цифра, тем сильнее приоритет.

  1. Самым низким приоритетом обладают стили, которые прописаны в самом браузере. В файлах каждого интернет-обозревателя находится информация о стандартных css-стилях. В старых браузерах есть возможность загрузить свой css-файл или изменить стандартные стили.
  2. Следующим по значимости идет авторский стиль — все элементы, которые прописаны в коде страницы. Это и подключенный файл и селекторы в атрибуте style. Данный пункт является обобщающим для всех последующих, т.к. все они задаются автором сайта...
  3. Стили, унаследованные элементом от потомков. Вернемся к материалу выше (не зря же я его писал). Если к тегу <div class="logo"> применены какие-либо стили, то они же будут действовать для тега <span class="desc">.
  4. Далее идут стили, прописанные во внешнем подключенном файле. В данном случае, все селекторы, примененные к потомкам не имеют силы.
  5. Более высоким приоритетом обладают стили, которые прописываются в теге <style> в начале HTML документа. Но тут возникает проблема: зачастую, к одному и тому же элементу применяются стили, прописанные в различных селекторах. В таком случае применяется правило расчета специфичности каждого селектора по такому принципу:
    • Количество идентификаторов (#id) в селекторе — (1,0,0) за каждый.
    • Количество классов (.class) и псевдоклассов (:pseudoclass) — (0,1,0) за каждый.
    • Количество тегов и псевдоэлементов (::pseudo-element) — (0,0,1) за каждый.
    Итак, как вы понимаете, приоритет рассчитывается в зависимости от количества «очков». Учтите, что (1,0,0) больше чем (0,2,10).
  6. В большем приоритете будут стили, прописанные прямо в теге, с помощью атрибута style.
  7. И, наконец,  высшим приоритетом обладают стили, в которых содержится слово !important. Но есть небольшое исключение — если такие стили объявлены и автором и пользователем, то будут применены только пользовательские.

Если в стилях прописываются абсолютно одинаковые по приоритету параметры, то будет использоваться тот, что стоит выше по списку. Например, если в селекторе вы прописали два одинаковых свойства, но с разными значениями, то в результате будет применен первый:

 p {
color:red;
font-family: Garamond, serif;
background: white;
color:blue;
} 

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

Думаю, с основами CSS можно закончить. В следующих статьях я буду описывать сами селекторы и их функции. До скорых встреч на страницах блога MonetaVInternete.ru!

Оставить ответ