Наследование — это механизм, с помощью которого стили применяются не только к указанным элементам, но и к их потомкам.

Зачем это нужно? Чтобы упростить тебе жизнь! Пример:

Если бы не было наследования, определение «окрасить в зеленый цвет» касалось бы только самого тега с классом green, а расположенный внутри него тег остался бы черным.

Слева — результат, полученный благодаря наследованию.
Справа — результат, который получился бы, если бы наследования не существовало.

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

Надеюсь, я тебя убедил, что наследование — вещь полезная. Теперь давай посмотрим, как с ним управляться.

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

Да будет тебе известно, что наследуются далеко не все свойства. Было бы абсурдно наследовать, например, .

Действительно, зачем мне границы вокруг каждого внутреннего тега? Это что, мне теперь их руками отменять надо?

Не волнуйся — не надо! Целый ряд свойств, наследование которых противоречит здравому смыслу, например, отступы, размеры, границы просто не наследуются.

Собственно, проще перечислить те свойства, которые наследуются. Вот они:

О специфичности

Унаследованные свойства, это очень удобно, когда нужно задать стили потомкам элемента. Но если я явно задаю какой-нибудь стиль, было бы, конечно, неправильно, если бы он «перебился» унаследованным. Для того, чтобы на корню исключить такую возможность, договорились, что унаследованные свойства вообще не имеют специфичности. Никакой. Даже нулевой. В результате, любой явно заданный стиль всегда победит унаследованного.

С этим связан интересный нюанс. Дело в том, что специфичность универсального селектора равна 0 (ты помнишь, в расчете специфичности правила мы просто не обращаем на него внимание).

Может, с точки зрения математики, это и чушь, но в -наследовании считается, что специфичность «0» это больше, чем «вообще нет специфичности». Поэтому универсальный селектор перекроет все унаследованные правила.

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

* { color: #000; /* черный */ } .green { color: #539127; /* зеленый */ }

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

Наследование и стили браузера

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

Green { color: #539127; /* зеленый */ }

В результате такого кода мы увидим зеленый цвет надписи и, скорее всего, синюю ссылку. Почему синюю? Почему ссылка не унаследовала цвет родителя?

Все просто. Где-то в таблице стилей браузера есть примерно такая запись, помещенная туда заботливыми руками разработчика:

A:link {color: blue}

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

Green, .green a { color: #539127; /* зеленый */ }

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

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

Каскадирование стилей CSS

Каскадирование стилей - это встроенная особенность CSS , которая заключается в том, что если к элементу применяется сразу несколько стилей, то результирующий стиль будет сформирован из всех присутствующих в этих стилях видов свойств, при чем в случае наличия двух или более одинаковых свойств к элементу будет применено значение свойства с наибольшим в данной ситуации приоритетом.

Давайте для начала рассмотрим простейший случай, показанный в примере 1.26.

Текст простого абзаца.

Текст абзаца с классом.

Переопределяем и цвет шрифта, и ширину абзаца.

Пример 1.26. Простейший случай каскадности стилей CSS

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

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

Специфичность селекторов CSS

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

Расчет специфичности селектора производится при помощи трех чисел (a , b , c ). Происходит это следующим образом:

• числу a присваивается количество идентификаторов в селекторе;
• числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
• числу c присваивается суммарное количество элементов и псевдоэлементов.

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

/* Запишем пример кода html */ /*

Текст...

*/ /* Здесь а=1, т.к. в селекторе есть 1 идентификатор; */ /* b=0, т.к. есть 0 классов, 0 атрибутов и 0 псевдоклассов; */ /* с=0, т.к. есть 0 элементов и 0 псевдоэлементов; */ /* т.о. специфичность равна (1,0,0). */ #m_id{ color: blue; } /* Здесь а=0, т.к. в селекторе отсутствуют идентификаторы; */ /* b=3, т.к. есть 1 класс, 1 атрибут и 1 псевдокласс; */ /* с=2, т.к. присутствуют два элемента: "p" и "em"; */ /* т.о. специфичность равна (0,3,2). */ p.my_class em:hover{ color: red; } /* Значит цвет текста в примере кода будет синим, т.к. во втором правиле число а=0, а в первом правиле а=1. */ /* А вот если бы специфичности селекторов были равны, то приоритет имел бы стиль нижнего правила. */

Пример 1.27. Сравнение специфичности селекторов

Виды и приоритет стилей CSS

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

• Стиль браузера обладает наиболее низким приоритетом и применяется по умолчанию к элементам html -кода, к которым не применяется другое форматирование, говоря проще - к "голому" html -коду.
• Стиль пользователя устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя.
• Стиль автора устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

• Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
• Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента "link" ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
• Стили внутренних таблиц (расположены внутри контейнеров "style" ) имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент "link" , при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов "style" , то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
• Еще большим приоритетом обладают встроенные стили , которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Служебный параметр!important

Отдельно следует сказать про служебный параметр !important , который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css -свойства через пробел, например, p {color : green !important ;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

Использование одинаковых свойств CSS в одном правиле

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

Быстрый переход к другим страницам

• Наследование, каскадирование и приоритетность стилей CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Приоритеты 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 стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье:
5. Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов

   Цвет текста заголовка красный

   Цвет текста абзаца тоже красный.

   Наследуемые свойства можно переопределить, применив индивидуальное правило для нужного элемента:

   Цвет текста заголовка синий

   Цвет текста абзаца красный.

   Вычисление специфичности (приоритета) селекторов

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

   Специфичность селекторов (selector"s specificity) определяет их приоритет в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

   • Считается число идентификаторов в селекторе (группа a)
   • Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (группа b)
   • Считается число селекторов типа и псевдо-элементов в селекторе (группа c)
   • Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
   • Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

   В примере ниже селекторы расположены в порядке увеличения их специфичности:

   * /* a=0 b=0 c=0 -> специфичность = 0 */ li /* a=0 b=0 c=1 -> специфичность = 1 */ ul li /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li /* a=0 b=0 c=3 -> специфичность = 3 */ h1 + * /* a=0 b=1 c=1 -> специфичность = 11 */ ul ol li.red /* a=0 b=1 c=3 -> специфичность = 13 */ li.red.level /* a=0 b=2 c=1 -> специфичность = 21 */ #x34y /* a=1 b=0 c=0 -> специфичность = 100 */ #s12:not(p) /* a=1 b=0 c=1 -> специфичность = 101 */

   Самый высокий приоритет имеет число из группы «a», число группы «b» имеет средний приоритет, число из группы «c» имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора «101» - это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).

   Встроенный стиль, имеет больший приоритет, чем стиль определённый во внутренней или внешней таблице стилей. Однако, если для конкретного свойства во внутренней или внешней таблице стилей указать специальное объявление!important, то оно будет иметь больший приоритет, чем значение аналогичного свойства, у внутреннего стиля. Объявление!important указывается после значения свойства перед точкой с запятой:

   Первый абзац

   Второй абзац.

   Каскадность

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

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

   Цвет текста абзаца зелёный.

   Если разные правила для одного элемента содержат свойства, которые не конфликтуют, то они объединяются в один стиль, т.е. каждое новое правило добавляет новую информацию о стиле к тому правилу, которое находится выше:

   H1 { color: gray; font-family: sans-serif; } h1 { border-bottom: 1px solid black; }

   Код, расположенный в примере выше, равносилен коду в примере ниже, в котором все три свойства указаны в одном правиле:

   H1 { color: gray; font-family: sans-serif; border-bottom: 1px solid black; }

   Обычно дополнительные правила для элемента указываются в тех случаях, когда был задан один стиль сразу для нескольких элементов, но помимо этого необходимо добавить что-то ещё для определённого элемента:

   H1, h2, h3 { /* одинаковый стиль для трёх элементов */ color: gray; font-family: sans-serif; } /* дополнительное правило для заголовков второго уровня */ h2 { border-bottom: 1px solid black; }

   Порог вхождения в CSS совсем невысок, прежде всего в силу самой природы его синтаксиса, прозрачного и лёгкого для понимания даже неопытному веб-дизайнеру. Это так просто, что на самом деле вы сможете закодить простенький сайт на CSS буквально после несколько часов изучения каскадных таблиц стилей. Но эта кажущаяся простота обманчива. После нескольких часов работы ваш идеально составленный сайт отлично смотрится в Safari, но всё идёт прахом, если вы не приняли необходимые меры заранее, чтобы всё работало нормально и в Internet Explorer. В панике вы добавляете кучу хаков и фильтров туда, где достаточно было только поправить несколько настроек или просто использовать другой подход. Знание того, как решать эти вопросы, приходит с опытом и с шишками, набитыми методом проб и ошибок, а также провалами, которые и выводят на правильный путь изучения CSS. Понимание некоторых концепций, которые на первый взгляд достаточно сложны для восприятия и выглядят на редкость скучными, крайне важно для дальнейшего использования. Но многие просто не уделяют их осмыслению достаточного внимания, что часто и является корнем всех проблем при их использовании. Две подобные концепции – это специфичность и наследование. Не очень часто встречающиеся слова в лексиконе веб-дизайнеров, не так ли? Рассуждать о border-radius и text-shadow куда интереснее и веселее, но специфичность и наследование – это фундаментальные базовые понятия, которые каждый, кто претендует на право зваться специалистом по CSS, должен чётко представлять. Понимание этих концепций поможет вам создавать чистые, удобные в поддержке и гибкие таблицы стилей. Давайте посмотрим на то, что они означают и как они работают. Понятие "Каскадирование" – самое что ни на есть сердце CSS. Оно, в конечном счете, определяет, какие свойства будет изменять данный элемент. Каскад связан с тремя основными концепциями: происхождение, приоритет и специфичность. Каскадирование CSS проходит через эти три шага-правила, чтобы определить, какие свойства назначить элементу. К концу этого процесса каскадом будет назначен вес для каждого правила, и этот вес определяет, какое правило имеет преимущество в случае наличия конкуренции.

   Происхождение и приоритет

   Таблицы стилей могут иметь несколько источников происхождения:
   1. User agent
      • Например, дефолтный стиль браузера
   2. User
      • Стиль, указанный пользователем в настройках браузера
   3. Author
      • Авторский стиль, указываемый автором странички (внешний, встроенный или inline-стиль, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style)
   По умолчанию есть порядок, в котором стили из различных источников обрабатываются – так, правила автора переопределяют пользовательские и браузерные и т.д. Существует также конструкция приоритета!important, которая используется для приведения к балансу использования пользовательских и авторских таблиц стилей. В то время как авторская таблица стилей по умолчанию имеет преимущество над другими, пользовательское правило, объявленное с конструкцией!importan, будет переопределять даже авторское с такой же конструкцией. Зная об этом, давайте посмотрим на окончательный список, в порядке возрастания значимости по приоритету и происхождению:
   1. User agent объявления,
   2. Пользовательские объявления,
   3. Авторские объявления,
   4. Aвторские объявления с конструкцией!important,
   5. Пользовательские объявления с конструкцией!important.
   Такая гибкость в плане приоритетов является ключевой в каскадных таблицах стилей, поскольку она позволяет пользователям переопределять стили, которые могли бы препятствовать доступности веб-сайта. (Пользователю может требоваться более крупный шрифт или другой цвет текста, например.)

   Специфичность

   Как мы выяснили выше, каждое правило CSS имеет определённый вес, то есть оно может быть более или менее важным, чем другие, или же быть равным по степени своей важности. Этот вес определяет, какие свойства будут применены к элементу, когда существуют конкурирующие нормы. После сортировки по приоритету и происхождению каскадирование ранжирует получившиеся равными по данным параметрам правила по специфичности - если одно правило является более специфичным (конкретным), чем другое, оно перекрывает его. Если два правила имеют один и тот же вес (происхождение, приоритет и специфичность), используется то, которое было объявлено позже.

   Как рассчитывать специфичность?

   Если несколько методов расчёта специфичности селекторов. Наиболее быстрый способ заключается в следующем: Добавить 1 к каждому элементу или псевдоэлементу (например, :before и:after); добавить 10 каждому атрибуту (например ), классу или псевдоклассу (:link или:hover); добавить 100 для каждого ID, а к inline стилю добавить 1000. Давайте подсчитаем специфичность следующих селекторов, используя данный метод: p.note - 1 класс + 1 элемент = 11 #sidebar p - 1 ID + 1 атрибут + 1 элемент = 111 body #main .post ul li:last-child - 1 ID + 1 класс + 1 псевдокласс + 3 элемента = 123 Аналогичный метод, описанный в спецификации W3C, предлагает нам начинать с оценки специфичности как нулевой (в числе abcd каждый разряд нулевой a = 0, b = 0, c = 0 и d = 0) и заменять цифры согласно наличию у селектора элементов, атрибутов и т.д.):
   • a = 1, если inline стиль,
   • b = количество удостоверений,
   • c= число атрибутов селекторов, классов и псевдоклассов,
   • d = количество имен элементов и псевдоэлементов.
   Давайте подсчитаем специфичность следующего набора селекторов:
   • a=1, b=0, c=0, d=0 → 1000 footer nav li:last-child
   • a=0, b=0, c=1, d=3 → 0013 #sidebar input:not()
   • a=0, b=1, c=1, d=1 → 0111
   Помните, что не-CSS презентационной разметке присуждается значение специфичности ноль, применяться это будет, к примеру, для тэга font. Возвращаясь к конструкции!important, не забывайте, что использование данного приоритета для сокращённых свойств автоматически придаёт его и всем подсвойствам, даже если это возвращает им изначальные значения. Если вы используете импортируемые таблицы стилей в CSS (@import), вы должны объявлять их перед всеми остальными правилами, чтобы они считались, таким образом, предшествующими всем правилам CSS файла.

   Как заставить специфичность работать на вас

   Если невнимательно следить за специфичностью, то она может привести вас к созданию вместо грамотной таблицы стилей чего-то малопонятного с массивной иерархической структурой ненужных и слишком сложных правил. Чтобы избегать этого, стоит не забывать об основных правилах работы со специфичностью:
   • Когда начинаем работу над CSS, использовать общие селекторы и добавить конкретики по ходу работы и её уточнения
   • Использование сложных селекторов не означает необходимости максимального их усложнения
   • Полагаться стоит больше на специфичность, нежели на порядок следования селекторов, так ваши таблицы стилей будут более удобными для редактирования и поддержки (особенно людям со стороны).
   Рефакторинг CSS селекторов, менее специфичных в экспоненциальной степени, сложнее, чем просто добавление специфичных правил по мере возникновения ситуаций.

   Наследование

   Наследование является способом распространения значения свойств элементов от родителей к детям. Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если вы установите body тегу страницы конкретный шрифт,то шрифт будет наследоваться другими элементами, например, заголовками и абзацами, не требуя соответствующей прописки каждый раз. CSS спецификация определяет, в каких случаях наследование каждого свойства идёт по умолчанию. Не все свойства наследуются, но мы можем заставить какие-то свойства наследоваться посредством присвоения значения inherit. Хотя это несколько выходит за рамки данной статьи, всё-таки необходимо упомянуть, что наследование в CSS не стоит путать с наследованием в объектно-ориентированном программировании (ООП). Вот как выглядит определение ООП наследования от Википедии, что и уточняет, что речь не идет об одном и том же: В объектно-ориентированном программировании (ООП) наследование является способом формирования новых классов [...] с помощью классов, которые уже были определены. Наследование используется, чтобы помочь использовать существующий код с минимальными изменениями. Новые [классы...] наследуют атрибуты и поведение уже существующих классов. ...

   Как работает наследование?

   Когда элемент наследует значение от своего предка, он наследует его вычисленное значение. Что это означает? Каждое свойство в CSS проходит через четырёхступенчатый процесс определения значения. Вот цитата из W3C спецификации: Окончательное значение свойства является результатом четырёхступенчатого вычисления: значение определённое спецификацией (специфицированное значение), затем разрешается в значение, используемое для наследования (вычисленное значение), которое при необходимости конвертируется в абсолютное значение, и уже окончательно трансформируется в значение, соответствующее ограничениям локальной среды ("реальное значение"). Иначе говоря:
   1. Специфицированное значение.
   User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид.
   2. Вычисленное значение.
   Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено.
   3. Используемое значение.
   Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после
   4. Действительное значение.
   Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).
   Если вы посмотрите спецификацию какого-либо CSS свойства, то увидите, что она описывает его первоначальное значение (дефолтное), элементы к которым оно применяется, статус наследование и его вычисленное значение (среди других). Например, спецификация свойства цвета заливки фона (background-color) выглядит следующим образом: Name: background-color Value: Initial: transparent Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: the computed color(s) Смущает несколько? Может быть. Итак, что же мы должны понять из всего этого? И почему это имеет отношение к наследству? Давайте обратимся к первому предложению данного раздела, которое сейчас будет нам понятнее. Когда элемент наследует значение от своего предка, он наследует его вычисленное значение. Вычисленное значение существует, даже если его не было в таблице стилей и соответственно даже в таком случае может наследоваться и принимать значение, которое существовало по умолчанию. Таким образом, вы можете использовать наследование, даже если родительский элемент не имел специфицированного конкретного значения.

   Использование наследования

   Самая главная вещь, которую вы должны знать о наследовании – это его существование и как оно работает. Вообще на самом деле наследование в данном случае совсем простое для понимания. Представьте себе, что вы должны были бы указывать размер шрифта или семейство шрифтов для каждого элемента, а не просто добавить его в body тэг? Это было бы жутко громоздким, и поэтому наследования так полезно. Не разрывайте его, используя универсальный селектор (*) со свойствами, которые наследуются по умолчанию. Вы не должны помнить все наследуемые значения, но в свою очередь вам необходимо о них не забывать. Редко CSS-статья не содержит каких-то плохих новостей о Internet Explorer. Эта статья не является исключением. IE поддерживает наследуют значение только с версии 8, за исключением direction и visibility свойств. Круто.

   Использование инструментов

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

   Заключение

   Даже если вы не особо задумываетесь о них, эти вопросы находятся в вашей повседневной работе как работе человека, занимающегося кодированием CSS. Особенно в случае специфичности важно знать, как она влияет на таблицы стилей и как планировать её так, чтобы она вызывала лишь минимальное количество проблем при кодировании. А лучше, чтобы вообще не вызывала.