Порог вхождения в CSS совсем невысок, прежде всего в силу самой природы его синтаксиса, прозрачного и лёгкого для понимания даже неопытному веб-дизайнеру. Это так просто, что на самом деле вы сможете закодить простенький сайт на CSS буквально после несколько часов изучения каскадных таблиц стилей. Но эта кажущаяся простота обманчива. После нескольких часов работы ваш идеально составленный сайт отлично смотрится в Safari, но всё идёт прахом, если вы не приняли необходимые меры заранее, чтобы всё работало нормально и в Internet Explorer. В панике вы добавляете кучу хаков и фильтров туда, где достаточно было только поправить несколько настроек или просто использовать другой подход. Знание того, как решать эти вопросы, приходит с опытом и с шишками, набитыми методом проб и ошибок, а также провалами, которые и выводят на правильный путь изучения CSS. Понимание некоторых концепций, которые на первый взгляд достаточно сложны для восприятия и выглядят на редкость скучными, крайне важно для дальнейшего использования. Но многие просто не уделяют их осмыслению достаточного внимания, что часто и является корнем всех проблем при их использовании. Две подобные концепции – это специфичность и наследование. Не очень часто встречающиеся слова в лексиконе веб-дизайнеров, не так ли? Рассуждать о border-radius и text-shadow куда интереснее и веселее, но специфичность и наследование – это фундаментальные базовые понятия, которые каждый, кто претендует на право зваться специалистом по CSS, должен чётко представлять. Понимание этих концепций поможет вам создавать чистые, удобные в поддержке и гибкие таблицы стилей. Давайте посмотрим на то, что они означают и как они работают. Понятие "Каскадирование" – самое что ни на есть сердце CSS. Оно, в конечном счете, определяет, какие свойства будет изменять данный элемент. Каскад связан с тремя основными концепциями: происхождение, приоритет и специфичность. Каскадирование CSS проходит через эти три шага-правила, чтобы определить, какие свойства назначить элементу. К концу этого процесса каскадом будет назначен вес для каждого правила, и этот вес определяет, какое правило имеет преимущество в случае наличия конкуренции.
Последнее обновление: 21.04.2016
Для упрощения определения стилей в CSS применяется механизм наследования стилей. Этот механизм предполагает, что вложенные элементы могут наследовать стили своих элементов-контейнеров. Например, пуcть у нас на веб-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта:
Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера - элемента body многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:
Текст про наследование стилей в CSS 3
В итоге определение стилей стало проще, а результат остался тем же.
Если нам нежелателен унаследованный стиль, то мы его можем переопределить для определенных элементов:
Body {color: red;} p {color: green;}
При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:
Текст про наследование стилей в CSS 3
Copyright MyCorp.com
Здесь веб-страница имеет следующую структуру:
Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль элемента body.
Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.
Кроме того, браузеры по умолчанию также применяют ряд предустановленных стилей к элементам. Например, заголовки имеют определенную высоту и т.д.
В этом уроке мы поговорим с вами о наследовании в CSS, хотя я уверен, что многие из вас уже догадались, что это такое и как оно работает. Да, в предыдущих занятиях мы уже не раз сталкивались с вами с эффектом наследования, причем не только сталкивались, но и успешно им пользовались. И все же есть у этого эффекта несколько таких тонкостей, которые возможно будут для вас определенным открытием, но обо всем по порядку, итак.
Наследование в CSS - это эффект, при котором значения некоторых свойств CSS примененных к определенному HTML-элементу автоматически применяются и к его потомкам в дереве документа. Что такое потомки элементов мы с вами проходили в уроке по селекторам потомков , поэтому повторно возвращаться к этому не будем, а сразу рассмотрим такой простой пример.
Пример наследования в CSS
Изучаем наследование в CSS.
Результат в браузере
Изучаем наследование в CSS .
И получаем от этого удовольствие. :)
В этом примере элементы внутри тела документа будут выводить текст по центру и зеленого цвета, так как свойства, отвечающие за это, являются наследуемыми. А вот рамка будет отображена только по периметру страницы, так как не наследуется.
А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в указано, что не может применяться к тегу , а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда - абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет - как раз и будет зависеть от правил языка CSS.
В нашем примере выравнивание текста по центру наследуется всеми элементами внутри тела документа без исключения, но вот применится оно только к тем, которые его поддерживают, у нас это теги . Чтобы вы получше запомнили этот момент, я вам покажу еще два небольших примера.
Результаты этих примеров будут абсолютно одинаковыми - заголовки всех таблиц на странице окажутся под таблицами. Просто в первом случае свойство будет унаследовано тегами от «сами знаете чего», а во втором оно будет применено непосредственно к каждому заголовку в отдельности. Ни на какие другие элементы данное свойство воздействовать не будет, ведь в спецификации CSS сказано, что оно может применяться только к табличным заголовкам.
Если вы используете относительные единицы измерения в значениях каких-то свойств, и если эти свойства наследуются, то имейте в виду, что элементы-потомки будут наследовать от предка не то значение, которое вы указали, а то, которое было вычислено браузером изначально. В общем-то, все это очень похоже на HTML, так что не будет для вас чем-то необычным. Смотрим пример.
Пример наследования относительных значений
Текст размером 24px.
Результат в браузере
Текст размером 24px.
Все свойства CSS делятся на те, которые наследуются элементами-потомками от своих элементов-предков, и те, которые не наследуются. Так, например, если для параграфа задать границу (сформировать рамку), то все вложенные в него элементы (элементы-потомки) не унаследуют это свойство CSS , поскольку в данном случае наследование не имеет положительного эффекта. Согласитесь, не совсем разумно было бы переопределять для каждого элемента-потомка унаследованные от абзаца-родителя границы. Но, если мы зададим для абзаца, например, синий цвет шрифта, то он будет унаследован всеми элементами потомками до тех пор, пока мы не переопределим его в случае необходимости для конкретного элемента, а это эффективнее, чем определять шрифт отдельно для каждого элемента-потомка. Посмотреть, какие стилевые свойства наследуются, а какие нет, можно на официальном сайте W3C ( таблицу свойств CSS ).
Каскадирование стилей - это встроенная особенность CSS , которая заключается в том, что если к элементу применяется сразу несколько стилей, то результирующий стиль будет сформирован из всех присутствующих в этих стилях видов свойств, при чем в случае наличия двух или более одинаковых свойств к элементу будет применено значение свойства с наибольшим в данной ситуации приоритетом.
Давайте для начала рассмотрим простейший случай, показанный в примере 1.26.
Текст простого абзаца.
Текст абзаца с классом.
Переопределяем и цвет шрифта, и ширину абзаца.
Пример 1.26. Простейший случай каскадности стилей CSS
Как видно из примера, к первому абзацу применяется только первый стиль из внутренней таблицы стилей, который задает ему черный фон и красный цвет шрифта. Ко второму абзацу применяется уже два стиля из внутренней таблицы стилей, поэтому результирующий стиль формируется следующим образом: сперва берутся все свойства стиля, у которого специфичность (конкретность) селектора больше (в нашем случае это второй стиль), затем добавляются отсутствующие в нем свойства из других, применяемых к данному элементу стилей, у которых специфичность (конкретность) селектора меньше (в нашем случае это первый стиль). Таким образом, для второго абзаца будет добавлена ширина, а фон будет переопределен с черного на желтый. К третьему абзацу применяется сразу три стиля: два из внутренней таблицы стилей и собственный встроенный стиль. Встроенный стиль обладает наибольшим приоритетом, поэтому он переопределит цвет шрифта, заданный в первом стиле, и ширину, заданную во втором стиле внутренней таблицы стилей.
Таким образом, чтобы правильно рассчитать результирующий стиль, применяемый к элементу, необходимо знать правила формирования этого стиля в случае наложения нескольких стилей сразу. Правила эти сводятся к расчету специфичности селекторов применяемых к элементу стилей, содержащих одинаковые css -свойства с разными значениями, а также, в случае равенства специфичности селекторов, к сравнению видов стилей, сравнению расположения таблиц с этими стилями или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Рассмотрим этот вопрос подробнее.
Если к одному и тому же элементу применяются два правила, содержащие одинаковые свойства CSS , но имеющие разные значения, возникает конфликт, который может быть решен при помощи сравнения специфичности селекторов этих правил. В результате этого решения к элементу будет применено свойство правила, у которого специфичность селектора больше.
Расчет специфичности селектора производится при помощи трех чисел (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. Сравнение специфичности селекторов
В случае равенства специфичности селекторов сравниваемых правил, приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Перечислим основные виды стилей в порядке возрастания их приоритета.
Авторский стиль представляет собой результирующий стиль, который формируется из различных видов составляющих его отдельных стилей, опять же, на основе каскадирования. Перечислим их в порядке возрастания приоритета в случае применения к одному и тому же элементу при условии равенства специфичности селекторов.
Отдельно следует сказать про служебный параметр !important , который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css -свойства через пробел, например, p {color : green !important ;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.
Из сказанного выше, следует простой вывод: чем ближе стиль расположен к элементу и чем более конкретнее его селектор, тем большим приоритетом он обладает.
В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями. Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.
Выполняя уроки в предыдущих главах, вы уже имели дело с наследованием стилей CSS (возможно, даже не задумываясь об этом). Определение данного термина довольно-таки очевидное.
Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).
Рассмотрим простой пример:
Body { color: #913D88; border: 1px solid #333; }
И результат на скриншоте:
Скриншот: пример CSS наследования
На скриншоте можно увидеть, что теги
Переняли стиль у своего предка
: цвет текста на странице стал #913D88 . А вот рамка border появляется только один раз – для тега , но не дляПочему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border , а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color , что видно на скриншоте.
Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS . Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.
С помощью inherit можно указать, чтобы элемент наследовал значение свойства у своего предка. Такое значение доступно практически для каждого свойства в CSS.
Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги
Унаследовать рамку border от своего предка
, необходимо записать:P {
border: inherit;
}
Скриншот: пример использования inherit
Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body , а на теги
Тратить время не нужно, так как стиль автоматически изменится и для них.
Благодаря тому, что наследование существует, вы можете экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась наша работа. При этом механизм наследования CSS хорошо продуман, поскольку не все свойства наследуются (и если бы они наследовались, то ни к чему хорошему это бы не привело).