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

Наследование (inherit initial unset) | 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, а то у меня фантазия уже исчерпана 🙂

Анонимный Здравствуйте!
Не подскажите почему так?
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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Наследование в CSS: что это и как работает

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

Читайте так же:  Налог на депозиты ставка рефинансирования

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

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

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

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

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

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

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

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

Значение inherit

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

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

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

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

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

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

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

В следующей главе учебника мы будем изучать каскадность CSS.

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

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

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

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

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

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

Есть такие инструменты, как 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 не имеет нативного наследования.

Наследование в CSS на примерах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте так же:  Перспектива обучение грамоте методическое пособие с поурочными разработками

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

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

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

Распространение значения

Значение color может быть унаследовано от предка. Учитывая, что мы хотим изменить всю веб-страницу, то выберем предка всех элементов HTML — тег :

Все дочерние элементы наследуют значение grey от их общего предка , которое естественным образом охватывает все элементы.

Мы также можем использовать тег .

Наследуемые свойства

Только несколько свойств CSS могут быть унаследованы от предков. Это в основном текстовые свойства:

  • цвет текста;
  • шрифт (семейство, размер, стиль, насыщенность);
  • межстрочное расстояние.

Некоторые элементы HTML не наследуют от своих предков. Ссылки, к примеру, не наследуют свойство color .

Заметки разработчика

Заметки об используемых в работе языках программирования, фреймворках, инструментах и технологиях.

четверг, 23 декабря 2010 г.

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

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

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

Наследование является механизмом отделённым от каскада: наследование относится к дереву DOM ( Document Object Model ), в то время как каскад относится к правилам CSS ( Cascade Style Sheet ). Однако CSS свойства, определённые для элемента через каскад могут быть унаследованы дочерними элементами.

Например, если элементу div задан font-size равный 20px , полагая, что никакие другие значения font-size не были определены, то все дочерние элементы так же унаследуют этот размер шрифта.

Почему это хорошо? Давайте рассмотрим следующий фрагмент кода:

Если бы наследование не работало, то в приведённом выше коде пришлось бы задавать значения font-size для всех элементов, что бы убедиться, что всё предложение будет отображено c размером шрифта 20px :

С использованием наследования, мы просто должны установить свойство font-size у родительского элемента и все дочерние элементы наследуют его автоматически. Именно по этому вам нужно лишь установить font-size для элемента body что бы получить целую страницу с указанным размером шрифта, конечно если он не был переопределён в другом месте.

Ошибки наследования в режиме совместимости (Quirk Mode)

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

Наследование font-size

В приведённом выше примере мы использовали размер шрифта равный 20px установленный для родительского элемента div . Это значение было унаследовано дочерними элементами, но что будет если мы укажем свойство font-size в процентах:

На первый взгляд кажется, что элемент p внутри внутри элемента div унаследует font-size:130% и будет на 130% больше чем его родительский элемент. Вам не нужно беспокоится об этом, элемент p унаследует фактический размер шрифта, а не 130% коэффициент размера шрифта родительского элемента, и по этому будет такого же размера как и родительский элемент. Это не то же самое как если бы мы указали:

В приведённом выше коде, элемент p будет на 130% больше, чем его родительский элемент div , вложенный элемент a будет на 130% больше чем его родительский элемент p . Будьте осторожны когда указывает размер шрифта в процентах или em для вложенных элементов или вы столкнётесь с прецедентами такого рода.

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

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

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

С другой стороны, вы передавать свойства фона по наследству. Для этого вы можете использовать значение inherit для свойств фона.

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