Эта статья будет посвящена такой важной теме как наследование стилей. Основная цель данной статьи учебника заключается в том, чтобы донести до Вас механизм работы наследования стилей, объяснить Вам в чем заключаются его основные плюсы и разобрать некоторые не очевидные на этот счет вещи.
Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: "яблоко от яблони недалеко падает". Что касается наследования в 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, хотя я уверен, что многие из вас уже догадались, что это такое и как оно работает. Да, в предыдущих занятиях мы уже не раз сталкивались с вами с эффектом наследования, причем не только сталкивались, но и успешно им пользовались. И все же есть у этого эффекта несколько таких тонкостей, которые возможно будут для вас определенным открытием, но обо всем по порядку, итак.
Что такое наследование в CSS?
Наследование в CSS - это эффект, при котором значения некоторых свойств CSS примененных к определенному HTML-элементу автоматически применяются и к его потомкам в дереве документа. Что такое потомки элементов мы с вами проходили в уроке по селекторам потомков , поэтому повторно возвращаться к этому не будем, а сразу рассмотрим такой простой пример.
Пример наследования в CSS
Изучаем наследование в CSS.
Результат в браузере
Изучаем наследование в CSS .
И получаем от этого удовольствие. :)
В этом примере элементы внутри тела документа будут выводить текст по центру и зеленого цвета, так как свойства, отвечающие за это, являются наследуемыми. А вот рамка будет отображена только по периметру страницы, так как не наследуется.
А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в указано, что не может применяться к тегу , а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда - абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет - как раз и будет зависеть от правил языка CSS.
В нашем примере выравнивание текста по центру наследуется всеми элементами внутри тела документа без исключения, но вот применится оно только к тем, которые его поддерживают, у нас это теги . Чтобы вы получше запомнили этот момент, я вам покажу еще два небольших примера.
Результаты этих примеров будут абсолютно одинаковыми - заголовки всех таблиц на странице окажутся под таблицами. Просто в первом случае свойство будет унаследовано тегами от «сами знаете чего», а во втором оно будет применено непосредственно к каждому заголовку в отдельности. Ни на какие другие элементы данное свойство воздействовать не будет, ведь в спецификации CSS сказано, что оно может применяться только к табличным заголовкам.
Наследование относительных значений в CSS
Если вы используете относительные единицы измерения в значениях каких-то свойств, и если эти свойства наследуются, то имейте в виду, что элементы-потомки будут наследовать от предка не то значение, которое вы указали, а то, которое было вычислено браузером изначально. В общем-то, все это очень похоже на HTML, так что не будет для вас чем-то необычным. Смотрим пример.
Пример наследования относительных значений
Текст размером 24px.
Результат в браузере
Текст размером 24px.
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер
|
. Если в стилях для селектора TABLE
задать цвет текста, то он автоматически устанавливается для содержимого ячеек,
как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег |
наследует свойства тега |
