CSS. Специфичность и Наследование. Наследование в CSS на примерах
Все свойства 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 свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).
Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента
, который определяет видимое содержимое страницы.Создадим стиль для элемента
, который будет изменять цвет и тип шрифта:Заголовок второго уровня
Полный абзац
В этом примере для элемента
мы установили зеленый цвет текста и тип шрифта Arial . CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS .
Результат нашего примера:
В выше рассмотренном примере все элементы, расположенные внутри
(его потомки) унаследовали его свойства. Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент , который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента . В этом заключается основной смысл наследования, который используется в CSS.Механизм наследования значительно сокращает код CSS, например, если бы наш элемент получил цвет по умолчанию – чёрный, то нам пришлось бы отдельно для этого элемента устанавливать стиль, который бы определял как цвет, так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку конкретной страницы.
Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу
, то в этом случае все элементы, вложенные в него также унаследуют эти свойства.Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.
Ограничения и нюансы наследования
Ограничения:
- Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS .
- Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).
Нюансы:
Все современные браузеры используют собственные встроенные CSS стили для HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного элемента на сайте в справочнике HTML (значение CSS по умолчанию). В следующей статье мы научимся обнулять встроенные стили для отображения ваших страниц одинаково во всех популярных браузерах.
А сейчас на примере элемента , определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:
Абзац, который содержит внутри себя href = "#" >
гиперссылку .В этом примере для элемента
мы установили следующие стили: зеленый цвет текста и отсутствие декорирования текста (убрали нижнее подчеркивание снизу). Обратите внимание на элемент на изображении, он полностью не изменился. Давайте разберемся ниже (после просмотра изображения) почему так происходит.Результат нашего примера:
При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet ) имеет любая ссылка (any link ) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link - значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).
Ниже отображаются свойства, которые были унаследованы (Inherited from ) элементом от . Как вы можете заметить, браузер отбросил все стили элемента , по той причине, что у элемента стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента это свойство тоже явно определно).
Такие конфликты между стилями всегда разрешает браузер, а по каким правилам определяет, кому отдает приоритет и как он в том, или ином случае себя должен повести, на чью сторону встать, определяется правилами каскадности . Подробнее о правилах каскадности мы поговорим в следующей статье учебника.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы.
» важнейшие понятия группирования и наследования в CSS . Кто уже давно следит за моими публикациями, наверное, уже проникся мыслью о необходимости постижения основ каскадных таблиц стилей (Cascading Style Sheets). И это правильно, поскольку современный вебмастер непременно должен знать базовые понятия и алгоритм применения основных знаний HTML и CSS на практике.
Я уже предоставил на суд суд читателей довольно приличную серию материалов на эту тему, в том числе публикации о различных видах селекторов CSS, а также . Эта часть каскадных таблиц стилей очень важна, впрочем, маловажные мы не рассматриваем.
Ну, а теперь переходим непосредственно к сегодняшней теме и разберем правила группирования и наследования в CSS , благодаря которым появляется возможность упорядочить и оптимизировать документы, описывающие стили элементов вебстраниц сайта.
Группирование в CSS
На скриншоте красной рамкой обведены данные о том, какие свойства CSS наследуются, а какие - нет. И напоследок разъясню более подробно по столбцам, какая информация здесь представлена:
«Name» - название CSS свойства;
«Values» - все возможные значения для этого свойства;
«Initial value» - начальное значение для данного свойства, которое используется по умолчанию (об этом я упоминал)
«Applies to» - к каким элементам применяется правило, в которое входит свойство CSS;
«Inherited?» - наследуется это правило или нет.
Это все, о чем я хотел сегодня вам рассказать. Постарался преподать нюансы группирования и наследования CSS максимально доступно и эффективно. Как это у меня получилось? Судить вам. Уровень вашей активности при подписке на новые материалы блога дадут ответ на этот вопрос. Засим разрешите откланяться. Напоследок не помешает небольшая разрядка, особенно тем, кто неравнодушен к КВН:
Мы продолжаем изучение CSS, мы уже рассмотрели достаточно много свойств и в этом уроке мы немного отдохнем от этого назойливого слова. И перейдем мы к, достаточно интересной теме, - наследованию. Данный метод сильно облегчает использование CSS, поэтому стоит понять, как это все работает и для чего это вообще нужно.
Если понять и уловить саму суть, то по существу здесь и нечего рассматривать, но увы без этого сложно будет продвигается дальше. И так, попытаюсь рассказать о наследовании простым языком и вкратце, чтобы не запутать Вас сильнее.
И так, идея состоит в чем, создавая страничку зачастую на ней используется много одинаковых элементов, например: один и тот же тип и размер шрифта. И было бы неплохо задать все нужные свойства для шрифта в одном месте, а затем, чтобы во всех блоках, шрифт их сам унаследовал, вместо того, чтобы каждый раз, в разных блоках для одного и того же шрифта задавать одно и тоже свойство.
Думаю мысль Вы поняли, и такая ситуация со всеми элементами. Зачем это все делать? Во-первых, это сокращает Вами написанный код, и код становится более наглядным. Ну, а во-вторых написанный код становится более динамичным, то есть если вы захотите изменить размер шрифта или тип его, то Вам стоит внести изменения только в одном месте и далее текст автоматически унаследует новые значения, и Вам не придется лезть во все свойства, каждого текстового блока, и их менять.
Вот для этого и существует наследование. В одном из уроков мы рассмотрели тему родства Селекторы предков и потомков CSS и там было обусловлено, что все теги, которые находятся внутри другого тега, являются по отношению к нему потомками, а он же в свою очередь, для них является, родителем.
Таким образом если прописать CSS свойство для родителя, например: для тега , то свойства автоматически будут унаследованы всеми тегами, которые находятся внутри него.
И теперь, давайте создадим ситуацию, когда у нас на странице имеются заголовки, параграфы, списки, ссылки. А затем попробуем через родителя передать свойства всем перечисленным выше элементам (потомкам).
HTML
Заголовок первого уровня
Обычный параграф для примера
- Список для приммера
- Список для приммера
- Список для приммера
Обычный заголовок второго уровня
Обычный параграф для примера
Обычный заголовок третьего уровня
Обычный параграф для примера
Мы создали ряд элементов. Как видно у них нет ни каких стилей, самый обычный текст, который браузер установил по умолчанию.
Теперь нашему родителю тегу зададим свойства: размер, цвет и гарнитуру шрифта и посмотрим его потомки (все теги, которые в него входят) наследуют эти свойства или нет.
HTML
Body{
color: #ff0000;
font-size: 20px;
font-family: courier new;
}
После того, как задали родителю определенные свойства, обновим страницу и наши потомки должны будут унаследовать указанные стили (весь текст красный, размером в 20px с гарнитурой courier new ).
Но, те кто внимательнее скажет, что некоторые элементы не полностью унаследовали свойства: Заголовок остался большим, а ссылка не приняла заданный цвет. Все это связанно с тем, что есть элементы исключения, которые не полностью наследуют все свойства от родителя.
И давайте разберем исключения немного подробней.
Заголовок: как мы уже заметили, ни один заголовок не унаследовал размер, это связано с тем, что у браузера уже есть встроенные стили для заголовков. И если, не указать для заголовка, размер напрямую, то он, по умолчанию, будет отображаться крупнее остального текста. Иначе, если бы заголовок унаследовал размер текста, то он бы превратился в обычный текст и смысл в заголовке бы пропал. Поэтому заголовки не наследуют размер шрифта.
Стоит рассмотреть еще момент, когда не наследуются все свойства, например для тега задать рамку.
HTML
Body{ color: #ff0000; font-size: 20px; font-family: courier new; borde:2px solid #00ff00; }
В результате, как мы видим рамка появилась только у самого элемента , а все остальные элементы не унаследовали рамку.
От сюда стало ясно, что есть свойства, которые наследуются, а есть которые нет. Узнать, какие свойства наследуются, какие нет можно посмотрев спецификацию CSS . Там Вы найдете все нужные для Вас свойства и в колонке Inherited? указано наследуется свойство или нет. И если Вы, для интереса, посмотрите свойство border , то там будет установлен статут в NO , то есть не наследовать, в чем мы сами ранее и убедились.
Вот так используется наследование свойств, это сильно облегчает работу и часто используется при создании сайтов. Ну а на этом здесь все, переходим к следующему уроку, в котором рассмотрим каскадность и приоритетность.
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер
|
. Если в стилях для селектора TABLE
задать цвет текста, то он автоматически устанавливается для содержимого ячеек,
как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег |
наследует свойства тега |
