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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Думаю, с этим все понятно. Перейдем к приоритетам в 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. Но есть небольшое исключение — если такие стили объявлены и автором и пользователем, то будут применены только пользовательские.

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

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

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