Наследование
Наследование в CSS — это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам.
Пример
Как это понять
Для некоторых HTML-тегов предопределены особые CSS-свойства по умолчанию (их ещё называют user agent -стили — т. е. стили от браузера), которые характерны только для конкретно этих элементов, например, margin: 8px для <body> , color: #00c для ссылок или font-weight: bolder для <b> . Их можно переопределить, но некоторые свойства (цвета текста, размера шрифта, внешнего вида курсора и другие) будут применяться для любых вложенных элементов, пока для них не будет указано иного значения. Такая наследуемость не случайна и обусловлена одним очень интересным CSS-значением у этих свойств — inherit , что буквально и значит «наследуемое».
Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.
Наследуемые свойства
- Свойства шрифта: font и его «производных»: font-style , font-variant , font-weight , font-stretch , font-size и font-family ; color и line-height .
- Свойства межбуквенных и «межсловных» расстояний: letter-spacing , word-spacing и white-space .
- Параметры текста: text-align , text-indent , text-shadow , text-transform ;
- оформление пунктов списков: list-style , list-style-type , list-style-position .
- Внешний вид курсора: cursor и отображение содержимого элемента visibility .
Например, в отличие от color , ненаследуемое свойство border не будет применено к вложенным элементам:
Но если мы укажем у <p> свойство border как inherit (т. е. наследуемое):
Подсказки
💡 Другой пример наследования — использование вместо указания цвета значения currentColor , который равен цвету текста текущего элемента, т. е. значению свойства color . Если color текущего элемента равен inerit (т. е. наследует значение «родителя»), то и currentColor также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color . См. раздел «На практике».
Значения rem и em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem ).
Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes .
Значение любого CSS-свойства можно «позаимствовать» (унаследовать) у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.
На практике
Realetive
🛠 Удобно делать всякие трюки, используя currentColor . Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за color .
Наследование в CSS: что это и как работает
Выполняя уроки в предыдущих главах, вы уже имели дело с наследованием стилей CSS (возможно, даже не задумываясь об этом). Определение данного термина довольно-таки очевидное.
Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).
Рассмотрим простой пример:
И результат на скриншоте:
Скриншот: пример CSS наследования
На скриншоте можно увидеть, что теги <p> переняли стиль у своего предка <body> : цвет текста на странице стал #913D88 . А вот рамка border появляется только один раз – для тега <body> , но не для <p> .
Почему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border , а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color , что видно на скриншоте.
Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.
Значение inherit
С помощью inherit можно указать, чтобы элемент наследовал значение свойства у своего предка. Такое значение доступно практически для каждого свойства в CSS.
Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги <p> унаследовать рамку border от своего предка <body> , необходимо записать:
Скриншот: пример использования inherit
Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body , а на теги <p> тратить время не нужно, так как стиль автоматически изменится и для них.
Итоги
Благодаря тому, что наследование существует, вы можете экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась наша работа. При этом механизм наследования CSS хорошо продуман, поскольку не все свойства наследуются (и если бы они наследовались, то ни к чему хорошему это бы не привело).
CSS. Специфичность и Наследование
Порог вхождения в CSS совсем невысок, прежде всего в силу самой природы его синтаксиса, прозрачного и лёгкого для понимания даже неопытному веб-дизайнеру. Это так просто, что на самом деле вы сможете закодить простенький сайт на CSS буквально после несколько часов изучения каскадных таблиц стилей. Но эта кажущаяся простота обманчива. После нескольких часов работы ваш идеально составленный сайт отлично смотрится в Safari, но всё идёт прахом, если вы не приняли необходимые меры заранее, чтобы всё работало нормально и в Internet Explorer. В панике вы добавляете кучу хаков и фильтров туда, где достаточно было только поправить несколько настроек или просто использовать другой подход. Знание того, как решать эти вопросы, приходит с опытом и с шишками, набитыми методом проб и ошибок, а также провалами, которые и выводят на правильный путь изучения CSS. Понимание некоторых концепций, которые на первый взгляд достаточно сложны для восприятия и выглядят на редкость скучными, крайне важно для дальнейшего использования. Но многие просто не уделяют их осмыслению достаточного внимания, что часто и является корнем всех проблем при их использовании. Две подобные концепции – это специфичность и наследование. Не очень часто встречающиеся слова в лексиконе веб-дизайнеров, не так ли? Рассуждать о border-radius и text-shadow куда интереснее и веселее, но специфичность и наследование – это фундаментальные базовые понятия, которые каждый, кто претендует на право зваться специалистом по CSS, должен чётко представлять. Понимание этих концепций поможет вам создавать чистые, удобные в поддержке и гибкие таблицы стилей. Давайте посмотрим на то, что они означают и как они работают. Понятие "Каскадирование" – самое что ни на есть сердце CSS. Оно, в конечном счете, определяет, какие свойства будет изменять данный элемент. Каскад связан с тремя основными концепциями: происхождение, приоритет и специфичность. Каскадирование CSS проходит через эти три шага-правила, чтобы определить, какие свойства назначить элементу. К концу этого процесса каскадом будет назначен вес для каждого правила, и этот вес определяет, какое правило имеет преимущество в случае наличия конкуренции.
Происхождение и приоритет
- User agent
- Например, дефолтный стиль браузера
- User
- Стиль, указанный пользователем в настройках браузера
- Author
- Авторский стиль, указываемый автором странички (внешний, встроенный или inline-стиль, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style)
- User agent объявления,
- Пользовательские объявления,
- Авторские объявления,
- Aвторские объявления с конструкцией !important,
- Пользовательские объявления с конструкцией !important.
Специфичность
Как рассчитывать специфичность?
- a = 1, если inline стиль,
- b = количество удостоверений,
- c= число атрибутов селекторов, классов и псевдоклассов,
- d = количество имен элементов и псевдоэлементов.
- a=1, b=0, c=0, d=0 → 1000
- a=0, b=0, c=1, d=3 → 0013
- a=0, b=1, c=1, d=1 → 0111
Как заставить специфичность работать на вас
- Когда начинаем работу над CSS, использовать общие селекторы и добавить конкретики по ходу работы и её уточнения
- Использование сложных селекторов не означает необходимости максимального их усложнения
- Полагаться стоит больше на специфичность, нежели на порядок следования селекторов, так ваши таблицы стилей будут более удобными для редактирования и поддержки (особенно людям со стороны).
Наследование
Как работает наследование?
- Специфицированное значение. User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид.
- Вычисленное значение. Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено.
- Используемое значение. Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после
- Действительное значение. Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).
Использование наследования
Использование инструментов
Если вы используете такие инструменты, как Firebug или Safari веб-инспектор, можно увидеть, как данный каскад работает, какие селекторы имеют более высокую специфичность и как наследование работает для конкретного элемента. Вот, например, ниже Firebug в действии, проверка элемента на странице. Вы можете увидеть, что некоторые свойства переопределяются (на скриншоте они зачёркнуты) на другие, более специфичные (конкретные) правила: 
В следующем скриншоте Safari веб-инспектор показывает расчетные значения элемента. Таким образом, вы можете увидеть значения, даже если они не были четко прописаны в таблице стилей: 