Css наследование стиля от родителя. Наследование свойств css

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

Большинство свойств не передают дочернему элементу свои значения от родителя

У некоторых значение по умолчанию подстраивается под родителя

И лишь немногие (см. список свойств CSS2, если в графе «Inherited» указано «yes») наследуют значение свойства от родителя

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

Это те значения, которые можно применить к любому свойству CSS. Везде происходит сброс стиля браузера, в том числе у тегов input , progress и т.д.

CSS наследование стилей от родителя: inherit

Если предку и потомку нужно указать одинаковые значения свойства, то удобней для дальнейшего редактирования использовать inherit - достаточно будет изменить значение только у родителя.

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

Пример 2: max-height: 100%; не работает

Пример 3: как сделать дубликат стилей CSS родителя

inherit переносит значение непосредственного родителя, а не определённого position

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial

Пример 1: запретить наследование свойства

Пример 2: убрать свойство для более узкого селектора

initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

Пример: для сторонних виджетов отключить наследование стиля и стили, установленные браузером

unset CSS: сбросить стиль браузера

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

Пример: обнулить все возможные стили input

Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана 🙂

5 комментариев:

Анонимный Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/

Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы Анонимный Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.

Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный Спасибо Нашёл.
vertical-align: с display:inline; и display:inline-block;

Даа. Как всё это забавно.
NMitra И почему при display:inline margiņ-top не работает? — Потому что он не блочный, у него нет высоты height

shpargalkablog.ru

Может ли класс CSS наследовать один или несколько других классов?

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

Мой вопрос в том, можно ли сделать класс CSS, который «наследует» от другого класса CSS (или более одного).

Например, скажем, что у нас было:

Что бы я хотел сделать, это примерно так:

где класс.composite будет отображаться в строке и иметь красный фон

27 ответов

Есть такие инструменты, как LESS, которые позволяют вам составлять CSS на более высоком уровне абстракции, аналогичном тому, что вы описываете.

Меньше вызовов этих «миксинов»

Вы можете добавить несколько классов в один элемент DOM, например.

Наследование не входит в стандарт CSS.

Да, но не совсем с этим синтаксисом.

Элемент может принимать несколько классов:

И это примерно так же близко, как вы к сожалению. Мне бы очень хотелось увидеть эту функцию вместе с классными алиасами.

Сохраняйте общие атрибуты и назначайте определенные (или переопределяющие) атрибуты снова.

Нет, вы не можете сделать что-то вроде

Это не «имена классов» в смысле OO. .something и.else больше не являются селекторами.

Но вы можете указать два класса для элемента

или вы можете изучить другую форму наследования

Если абстракции backgroundcolor и color наследуются от настроек в охватывающем div, который имеет стиль.foo . Возможно, вам придется проверить точную спецификацию W3C. inherit по умолчанию для большинства свойств по умолчанию, но не для всех.

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

Это найдет все элементы с классом «композит» и добавит к элементам классы «что-то» и «еще». Итак, что-то вроде

Идеальное время . Я перешел от этого вопроса к своей электронной почте, чтобы найти статью о Less, библиотека Ruby, которая, между прочим, делает это:

Так как super выглядит так же, как footer , но с другим шрифтом, я буду использовать метод включения Less class (они называют его mixin), чтобы он также включил эти объявления:

Лучшее, что вы можете сделать, это

SCSS для данного примера будет выглядеть примерно так:

К сожалению, CSS не обеспечивает «наследование» так, как это делают языки программирования, такие как С++, С# или Java. Вы не можете объявить класс CSS, а затем расширить его с помощью другого класса CSS.

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

CSS будет искать все стили, которые могут применяться на основе вашей разметки, и объединить стили CSS из этих нескольких правил вместе.

Как правило, стили объединяются, но когда возникают конфликты, более поздний объявленный стиль обычно выигрывает (если только важный атрибут не указан в одном из стилей, и в этом случае выигрывает). Кроме того, стили, применяемые непосредственно к элементу HTML, имеют приоритет над стилями класса CSS.

Я понимаю, что этот вопрос сейчас очень старый, но здесь нет ничего!

Если цель состоит в том, чтобы добавить один класс, который подразумевает свойства нескольких классов, как собственное решение, я бы рекомендовал использовать JavaScript/jQuery (jQuery действительно не нужен, но, безусловно, полезен)

Если у вас есть, например, .umbrellaClass , который «наследует» от.baseClass1 и.baseClass2 , у вас может быть какой-то JavaScript, готовый к работе.

Теперь все элементы.umbrellaClass будут иметь все свойства как.baseClass s. Обратите внимание, что, подобно наследованию ООП, .umbrellaClass может иметь или не иметь свои собственные свойства.

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

Отстой css не имеет нативного наследования.

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

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

Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер

Пример 18.1. Наследование параметров цвета

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY , добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).

Пример 18.2. Параметры текста для всей веб-страницы

В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY . Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется всё-таки изменить цвет для отдельного контейнера. В этом случае придётся переопределять нужные параметры явно, как показано в примере 18.3.

Пример 18.3. Изменение свойств наследуемого элемента

В данном примере цвет первого абзаца наследуется от селектора BODY , а для второго установлен явно через класс с именем red .

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

Главным драйвером роста веба на рубеже тысячелетий было потребление контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.

В процессе этих трансформаций и миграций выяснилось, что рост трудоемкости создания и поддержания веб-интерфейса значительно опережает рост его сложности. Проблему пытались (и пытаются до сих пор) решить путем разбиения на модули, абстрагирования, инкапсуляции. С этой целю было создано большое количество JavaScript-фреймворков (Backbone , Ember , Angular), HTML-шаблонизаторов (Jade , Handlebars), систем управления зависимостями (RequireJS) и т.п.

Наиболее сложным с этой точки зрения оказался CSS, где по дизайну языка любое свойство, объявленное в любом подключенном CSS-файле или тэге style , может повлиять на отображение любого элемента DOM-дерева.

Формализация задачи.

Предположим для простоты, что весь JavaScript-код заключен в модули, которые ничего не знают друг о друге и инкапсулируют в себе все необходимое им для своей работы. Модуль знает как сгенерить свое HTML-представление (назовем его блок ) и куда его вставить в DOM-дереве. При этом блоки могут вкладываться друг в друга. На уровне разметки блок состоит из корневого элемента и дочерних элементов .
Задача заключается в том, чтобы на отображение элементов любого блока можно было повлиять только намеренным изменением в HTML-представлении и соответствующих CSS-файлах и тэгах style .

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

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

Иточники протечек стилей

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

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

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

2. Конформизм свойств

При отсутствии у CSS-свойства какого-либо элемента явно заданного значения используется значение по умолчанию. Если это свойство подстраивается под свойство родительского элемента (к примеру, как свойства width и height со значением по умолчанию auto) или мимикрирует (к примеру, как свойство background-color со значением по умолчанию transparent), то у конечного пользователя будет создаваться впечатление, что стили родительского элемента протекли на стили дочернего элемента.

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

3. Каскадный беспредел

(general sibling combinator) - до самого первого сестринского элемента.

Единственным способом ограничить пространство поиска является использование дочернего комбинатора > (child combinator) и ближайшего сестринского комбинатора + (adjacent sibling combinator). Для этого необходимо задавать точный путь в DOM-дереве от целевого элемента к корневому элементу блока, что приводит к увеличению связанности CSS и HTML-кода.

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

Таким образом, при определенных условиях (используемые комбинаторы, соотношение специфичностей, порядок объявления) стили элементов внешнего блока могут влиять на стили элементов вложенного блока. Этого влияния можно было бы избежать, если бы можно было указывать область DOM-дерева, в которой следует выбирать и фильтровать целевые элементы.

4. Позиционная обусловленность

) или псевдоклассов (:first-child и т.п.).

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

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

Вторая часть статьи («Инкапсуляция CSS-стилей - Часть 2. Решения») будет посвящена анализу того, насколько текущие подходы (OOCSS, SMACSS, ACSS, BEM, CSS-препроцессоры) соответствуют идеалу, а также их классификации.

Буду рад полезным советам и конструктивной критике.

Наследование и группирование в CSS

Здравствуйте, уважаемые читатели! Сегодня в рамках рубрики «Учебник CSS» важнейшие понятия группирования и наследования в CSS . Кто уже давно следит за моими публикациями, наверное, уже проникся мыслью о необходимости постижения основ каскадных таблиц стилей (Cascading Style Sheets). И это правильно, поскольку современный вебмастер непременно должен знать базовые понятия и алгоритм применения основных знаний HTML и CSS на практике.

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

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

Группирование в CSS

Возьмем для примера теги заголовков h1 h2 h3, стили которых прописаны в файле style.css. Например, так:

Если вы внимательно посмотрите, то можете заметить, что для тегов всех заголовков есть одна общая составляющая стилей CSS, а именно значение font-family, которое определяет вид шрифта. Можно объединить селекторы h1-h3 по этому признаку и составить для них общее правило касательно значения font-family:

А индивидуальные свойства для каждого селектора, которые не являются общими, оформить отдельно:

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

Наследование в CSS

Как совершенно явно вытекает из самого названия, наследование предполагает перенос правил стилей для элементов, находящихся внутри других. Такие элементы называются дочерними и они наследуют стилевые свойства своих родителей. Наиболее удачным примером, на котором можно наглядно исследовать нюансы наследования CSS, является, на мой скромный взгляд, таблица html, которая создается с помощью тегов table, tr и td. Допустим, заданы свойства оформления для тега table:

Теперь составим простенькую таблицу из 4 ячеек:

На вебстранице она будет выглядеть следующим образом:

Для данной таблицы установлен зеленый цвет текста, поэтому в ячейках слова приняли этот оттенок. Это следствие того, что дочерний элемент тег td наследует свойства своего родителя тега table . Надеюсь, здесь все ясно. Но нужно понимать, что не все стилевые свойства подвержены наследованию.

Например, border определяет рамку вокруг таблицы, но не вокруг ячеек, поэтому эти ячейки не выделены рамкой внутри таблицы. Также не наследуется свойство background. Однако, в этом случае возникает вопрос: почему же цвет фона ячеек приобрел песочный цвет, который указан в качестве значения родительского тега table, если он не наследуется?

Здесь все дело в том, что у свойства background в качестве значения по умолчанию для тега td выступает transparent, то есть прозрачность . Таким образом, цвет фона родительского элемента “просматривается” сквозь фон дочернего элемента, который является прозрачным. Отмечу, что во многих случаях для большинства свойств CSS предусмотрены значения по умолчанию. Поэтому, если для какого-то свойства явно не заданы параметры, до вступает в силу предусмотренное значение по умолчанию.

Наследование позволяет определять значения один раз, задавая их для родительского элемента верхнего уровня. Допустим, что нам необходимо задать цвет и шрифт для основного текста вебстраницы блога или сайта. Для этого достаточно определить нужные значения для селектора body и задача будет выполнена:

Теперь любой абзац на данной вебстранице, например, такой:

Будет оформлен соответствующим стилем:

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

Теперь обычный параграф на странице будет иметь такой вид:

А уникальный параграф с отдельно прописанным значением color будет таким:

Вот так, используя там, где это необходимо, алгоритмы группирования и наследования, можно максимально оптимизировать файл стилей, сделав его одновременно легко читаемым. Я уже упоминал выше что не все свойства CSS наследуются, поэтому приведу вам одну из страниц официального сайта W3C, где вы при желании можете почерпнуть более подробную информацию по этому вопросу. Итак, страница «Full property table»:

На скриншоте красной рамкой обведены данные о том, какие свойства CSS наследуются, а какие — нет. И напоследок разъясню более подробно по столбцам, какая информация здесь представлена:

«Name» — название CSS свойства;
«Values» — все возможные значения для этого свойства;
«Initial value» — начальное значение для данного свойства, которое используется по умолчанию (об этом я упоминал)
«Applies to» — к каким элементам применяется правило, в которое входит свойство CSS;
«Inherited?» — наследуется это правило или нет.

Это все, о чем я хотел сегодня вам рассказать. Постарался преподать нюансы группирования и наследования CSS максимально доступно и эффективно. Как это у меня получилось? Судить вам. Уровень вашей активности при подписке на новые материалы блога дадут ответ на этот вопрос. Засим разрешите откланяться. Напоследок не помешает небольшая разрядка, особенно тем, кто неравнодушен к КВН:

goldbusinessnet.com

Последнее обновление: 21.04.2016

Для упрощения определения стилей в CSS применяется механизм наследования стилей. Этот механизм предполагает, что вложенные элементы могут наследовать стили своих элементов-контейнеров. Например, пуcть у нас на веб-странице есть заголовок и параграф, которые должны иметь текст красного цвета. Мы можем отдельно к параграфу и заголовку применить соответствующий стиль, который установит нужный цвет шрифта:

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

Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера - элемента body многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:

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

Текст про наследование стилей в CSS 3

В итоге определение стилей стало проще, а результат остался тем же.

Если нам нежелателен унаследованный стиль, то мы его можем переопределить для определенных элементов:

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

При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:

Copyright MyCorp.com

Здесь веб-страница имеет следующую структуру:

Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль элемента body.

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin, padding) и границы (border) элементов, не наследуются.

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

Выполняя уроки в предыдущих главах, вы уже имели дело с наследованием стилей 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 свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).

Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере 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 ) элементом от . Как вы можете заметить, браузер отбросил все стили элемента , по той причине, что у элемента стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента это свойство тоже явно определно).

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

Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы.