Наследование, каскадирование и специфичность CSS

 

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

Наследование, каскадирование и специфичность CSS

Но для начала разберемся, что означает само понятие Cascading Style Sheets, данный вопрос кстати могут задать на собеседование, разбираемся…

Cascading Style Sheets переводиться как «каскадная таблица стилей». Расшифровывать данное понятие будем с конца.

Что такое стиль?

Стиль это  набор правил оформления и форматирования, который может быть применен к различным элементам страницы или «по бытовому» это селектор с набором свойств и их значений, пример стиля

Что такое таблица стилей?

Это набор стилей, пример

Почему каскадная таблица стилей?

Каскадная это потому, что css использует принцип каскадирования

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

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

Все элементы наследники body, будут иметь текст красного цвета.

 

Разберемся с приоритетами

 

Перечислим таблицы стилей по возрастанию приоритетов

  1. наименьший приоритет имеют таблицы стилей расположенные в недрах самого браузера, они играют роль стилей по умолчанию
  2. чуть важнее идут по приоритету таблицы стилей созданные пользователем в настройках браузера (что редкость)
  3. далее стили web страницы, и что характерно, таблицы стилей web страницы могут быть объявлены тремя способами, каждый из способов создает таблицу со своим приоритетом, перечислим их по возрастанию:

3.1. таблицы подключаемые через тэг <link>, располагаются во внешнем файле css и имеют наименьший приоритет среди других таблиц web документа

3.2. таблицы помещенные в сам html документ, между тэгами <style> … </style>, имеют более высокий приоритет чем таблицы в 3.1

3.3. таблицы стилей которые располагаются в атрибуте style=» … «, более приоритетны чем таблицы 3.2 

3.4. самый высоки приоритет у стилей с меткой на конце «!important»

По важности таблицы стилей согласно данным пунктам можно записать так:

3.4>3.3>3.2>3.1>3>2>1 

 Пример, есть три стиля на web странице

  1. первый стиль расположен в файле main.css с содержимым
  2. второй стиль объявлен между тэгами <style>…</style> в заголовке страницы
  3. и наконец последний объявлен в самом тэге p через атрибут style, таким образом

    Результирующий стиль для p будет color:green, так как он имеет наибольший приоритет.

Каскад строился таким образом: стиль в main.css заменил стиль для p, который располагается в браузере в качестве «по умолчанию», т.к. он имеет приоритет выше; далее стиль в <style></style> «победил» стиль для p указанным main.css; у нас есть еще стиль в атрибуте самого тэга p, т.к. он по приоритету выше чем стиль color:red указанный в <style></style>, то он заменяет его, в итоге результирующий стиль будет color:green.

 

 

А что такое специфичность?

 

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

h1 в html документе будете расположен так:

Какого цвета будет заголовок h1? Ответ: голубого

Оказывается стили в одной таблицы не всегда равны по приоритету между собой, важность стиля определяет такое понятие как специфичность. Это означает что чем специфичные селектор, тем более приоритетный стиль, в нашем случае селектор «article  h1″ более специфичный чем «h1».

Определить специфичность  приоритетом можно по следующему правилу:

Специфичность селектору будем выражать в баллах, следующим образом:

  • селектор за каждый идентификатор получает — 100 баллов (пример идентификатора «#id«)
  • селектор за каждый класс, либо псевдо класс — 10 баллов (пример класса и псевдокласса «.my«, «:href«)
  • селектор за каждый тег получает— 1 балл (пример «h1«)

В нашем случае первый селектор «h1» имеет 1 балл, а второй селектор «article h1» имеет 2 балла, следовательно стиль color:blue важнее чем color:red, поэтому в результате цвет заголовка будет голубой.

Приведу пример специфичностей селекторов, в левом столбце селекторы, в правом «баллы специфичности»

 

 #my p#id  201 балл
 #my #id  200 балл
 #my p  101 балл
 #id  100 балл
 .wrapper .content p  21 балл
 .content div p  12 балл
 .content p  11 балл
 p  1 балл

 

 

После всего сказанного …

 

Хочу отметить несколько моментов, на которые стоит обратить внимания

  1. Вопрос про приоритеты, специфичность стилей идет только тогда, когда к одному элементу применяется два и более стилей, т.е. когда возникает конфликт стилей.
  2. Конфликт стилей будет только тогда, когда стили указывают на один элемент непосредственно. Например, если мы обозначим для тэга article {color:blue;} что цвет текста должен быть голубым, а потом для его дочернего элемента h1 {color:green;} что цвет текста должен быть зеленым, то результат для h1 будет зеленый, никакого конфликта не возникает. Правило задающее стиль непосредственно элементу «не конкурент» правилу унаследованное от родительского элемента, он всегда важнее.
  3. Если два и более конфликтующих правила одинаковы по специфичности (одинаковые баллы), то  применяется тот который написан последним.



Буду признателен если вы поделитесь данным постом


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


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены