Приоритеты в CSS.

Приоритеты, которые нужно знать при написании кода css.

Здравствуйте. Сегодня поговорим о приоритетах при написании css кода. Зачастую, начинающие верстальщики мало уделяют этому вопросу внимания. К сожалению. И в результате удивляются, почему написанный ими css код работает не так, как задумывалось изначально, либо получился слишком большой, и так далее. Поэтому давайте рассмотрим основные правила приоритетов в css.

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


Lorem ipsum dolor sit



Цвет текста будет красным, несмотря на то, что в пользовательских стилях мы задали зеленый.
Следующим по значимости идет селектор идентификатора. Атрибут id превосходит по значимости и просто селектор тега и селектор класса.
Пример:


Lorem ipsum dolor sit



Цвет текста зеленый, так как задан в id.
Затем идут последовательно селекторы классов, псевдоклассов и атрибутов. Ниже, чем у них приоритет только у селекторов тегов.
Пример:


Lorem ipsum dolor sit



Цвет текста синий поскольку задан в селекторе атрибута.
Пример2:


Lorem ipsum dolor sit



Цвет текста желтый поскольку задан в классе.
Теперь рассмотрим составные селекторы. Общий вес составного селектора складывается из веса входящих в него селекторов. К примеру приоритет у селектора div p{} будет выше, чем у просто div{} или просто p{}. Или приоритет у p#text{} будет выше чем у div.box{} так как приоритет id выше, чем у class.
Пример:


Lorem ipsum dolor sit



Цвет текста красный поскольку общий вес div #text больше.
В случае с равными приоритетами преимущество будет у самого последнего селектора.
Для повышения приоритета можно к значению свойства селектора добавить !important.
Пример:


Lorem ipsum dolor sit



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


См. так же:
Свойство float и проблемы с ним связанные.

1 комментарий :

  1. А как насчет приоритета не внутри css-файла, а между несколькими css'ками?!! Данный вопрос в Вашем посте даже не упомянут...

    ОтветитьУдалить

Ваш комментарий: