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

Рад снова всех вас приветствовать на страницах блога Site on! В прошлой статье мы кратко поговорили об и разобрали несколько простых примеров. Сегодня наша тема – это такая важная вещь, как наследование в CSS. Наследованием в CSS называется передача свойств от элемента родителя к дочерним элементам. Или если вам будет понятней: передача CSS свойств от верхнего тега к вложенным в него. Причём наследуется ли свойство или не наследуется зависит от самого свойства, а не от тегов, к которым оно применено. Как это работает? Да очень просто, вернёмся к нашему макету, с помощью которого мы научились :

Если мы запишем в CSS:

Body{ color: green; }

То цвет надписи «И здесь пишем любой интересующий нас текст» как ни странно станет зелёным. А что будет, если мы нашу надпись заключим в блок? То есть вот какой стала интересующая нас часть кода:

То надпись всё равно останется зелёной, так как свойство color наследуется, а значит, передалось от тега body к вложенному в него тегу div и дальше (если бы было куда). И сразу вам задачка: какого цвета будет наша надпись, если мы имеем следующий код

Для справки - тег, который просто обозначает какой-либо участок текста. Если в CSS для него ничего не задано, то он ничего и не делает.

Правильный ответ: красным . Так как тег div перебил наследование от body (но только для тегов, вложенных внутрь div).

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

Да ровным счётом никакого. Приоритет наследования в CSS даже не равняется нулю, его просто нет. О чём нам это говорит? Да о том, что любое свойство, заданное вложенному тегу напрямую, будет исполняться вместо того свойства, которое он бы унаследовал (но мы не дали этому случится, так как указали это же самое свойство, но с другим значением).

Об этом ярко свидетельствует предыдущий пример, где тег div не дал тегу span унаследовать зелёный цвет текста от тега body , а всё потому, что мы для тега div явно объявили красный цвет, а значит, приоритет у красного цвета наивысший…

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

Div p { Color: green; } p{ color:red; }

И там и там явно указан цвет именно для параграфов, но в одном из случаев, только для параграфов внутри блока, посмотрим же результат:

А просто внутри параграфа - красный

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

Подытожим: наследование в CSS имеет наименьший из возможных приоритетов, однако стоит помнить, что не все свойства наследуются. Свойства, у которых имеется уточнение обстоятельств (при наведении мыши; если один тег вложен в другой, и тд.) имеют приоритет над свойствами, указанными для всех остальных случаев.

Ещё один важный момент: если после значения CSS свойства поставить пробел и написать !important , то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:

P{ color:red !important; }

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

И напоследок вот что вы должны иметь ввиду, если у вас что-то не получается - если написать так:

P{ color:red; } p{ color:green; }

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

1) Свойства, указанные для класса (class) или уникального идентификатора (id), имеют высший приоритет, причём приоритет у id, выше чем у class. Всё об этих селекторах и о понятии селектора в целом вы узнаете в следующей статье.

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

На сегодня всё, спасибо за ваше внимание!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A:link {color: blue}

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

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

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

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

Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).

Рассмотрим простой пример:

Body { color: #913D88; border: 1px solid #333; }

И результат на скриншоте:

Скриншот: пример CSS наследования

На скриншоте можно увидеть, что теги

Переняли стиль у своего предка : цвет текста на странице стал #913D88 . А вот рамка border появляется только один раз – для тега , но не для

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

Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS . Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Значение inherit

С помощью inherit можно указать, чтобы элемент наследовал значение свойства у своего предка. Такое значение доступно практически для каждого свойства в CSS.

Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги

Унаследовать рамку border от своего предка , необходимо записать:

P { border: inherit; }
Скриншот: пример использования inherit

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

Тратить время не нужно, так как стиль автоматически изменится и для них.

Итоги

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

Порог вхождения в 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. Особенно в случае специфичности важно знать, как она влияет на таблицы стилей и как планировать её так, чтобы она вызывала лишь минимальное количество проблем при кодировании. А лучше, чтобы вообще не вызывала.

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

Что такое наследование в CSS?

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

Пример наследования в CSS

Изучаем наследование в CSS.

Результат в браузере

Изучаем наследование в CSS .

И получаем от этого удовольствие. :)

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

А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в указано, что не может применяться к тегу , а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда - абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет - как раз и будет зависеть от правил языка CSS.

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

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

Наследование относительных значений в CSS

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

Пример наследования относительных значений