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


Содержание

Наследование (inherit initial unset) | CSS

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

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

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

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

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

all: initial | inherit | unset;
unset если свойство наследуется, то как у родителя, если нет — то по умолчанию
inherit как у родителя
initial по умолчанию

Это те значения, которые можно применить к любому свойству 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

Похожий эффект: Атрибут contenteditable

Сводная таблица универсальных ключевых слов

Домашнее задание: в комментариях предложить свой пример использования значений 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

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

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

Зачем это нужно? Чтобы упростить тебе жизнь! Пример:

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

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

Надеюсь, я тебя убедил, что наследование — вещь полезная. Теперь давай посмотрим, как с ним управляться.

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

Да будет тебе известно, что наследуются далеко не все свойства. Было бы абсурдно наследовать, например, border.

Действительно, зачем мне границы вокруг каждого внутреннего тега? Это что, мне теперь их руками отменять надо?

Не волнуйся — не надо! Целый ряд свойств, наследование которых противоречит здравому смыслу, например, отступы, размеры, границы просто не наследуются.

Собственно, проще перечислить те свойства, которые наследуются. Вот они:

О специфичности

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

С этим связан интересный нюанс. Дело в том, что специфичность универсального селектора равна 0 (ты помнишь, в расчете специфичности правила мы просто не обращаем на него внимание).

Может, с точки зрения математики, это и чушь, но в CSS-наследовании считается, что специфичность «0» это больше, чем «вообще нет специфичности». Поэтому универсальный селектор перекроет все унаследованные правила.

Это одна из причин, по которой универсальный селектор нужно применять очень осмотрительно (а еще лучше — не применять совсем). Ведь он может вызвать эффект сродни короткому замыканию, перебив унаследованные правила. Например:

Фактически, этим примером мы поломали наследование свойства color и получили то же нехороший результат, что и на самом первом рисунке справа. Текст внутри span (или любого другого внутреннего тега) будет черный.

Наследование и стили браузера

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

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

Все просто. Где-то в таблице стилей браузера есть примерно такая запись, помещенная туда заботливыми руками разработчика:

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

Получается, чтобы «озеленить» ссылку, нужно не забыть указать ее в правиле:

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

Ну что, идем дальше? Следующая статья — Каскад в CSS.

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

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

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

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


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

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

На этой странице

Описание

Описание каждого CSS свойства говорит наследуется ли оно по-умолчанию («Наследуется: да/нет»). Наследование контролирует, что происходит, если значение свойства элемента не определено.

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

Когда никакого значения для свойства, которое наследуется, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

Типичный пример наследуемого свойства color . Стили:

слова «подчёркнутый текст» станут зелёными, т.к. тег em унаследовал значение свойства color от элемента p, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

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

Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla — сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства border . Стили:

у слов «подчёркнутый текст» не будет рамки (т.к. начальное значение border-style : none ).

Замечание

Ключевое слово inherit позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

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

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

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

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

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

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

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

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

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

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

CSS урок 2. Наследование

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

Видеоверсия:
[iframe />Что такое наследование

Как было сказано выше, наследование является одним из важнейших явлений в CSS. Например, если мы придадим всем абзацам желтый цвет и шрифт Verdana размером в 14px, эти свойства будут унаследованы тегами вложенными в тег p.

В первом абзаце нашей веб-страницы есть два вложенных тега — strong и em. Правило, которое мы прописали для абзацев были приняты этими двумя вложенными тегами.

Наследование от абзаца

Как видно на скриншоте, слова находящиеся внутри вложенных тегов также отображаются шрифтом Verdana размером в 14px, хотя и имеют жирное и курсивное начертание.

Следующим шагом давайте придадим те же CSS свойства для тега body, при этом удалив предыдущее.

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

Наследование от тега body

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

В одном из следующих уроков мы научимся удалять базовые настройки браузера для болей гибкой работы с оформлением веб-страниц.

Зачем нужно наследование

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

В общем, для нас очень хорошо, что вложенные теги наследуют свойства своих родителей. Как вариант, при оформлении веб-страницы можно использовать селектор тегов и создавать отдельные правила для header, footer, aside, nav и так далее (новые теги HTML5). В этом случае вложенные теги также унаследуют свойства предков.

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

Возможно, вы уже догадались о том что не все свойства могут наследоваться. Например, возьмем тот же тег border (граница). Давайте пропишем ее для тега body:

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

свойство border не наследуется

Мы были правы в своих предположениях. Граница появляется только у тела документа. То, как выглядела бы веб-страница в случае наследования свойства border:

Вид страницы если бы свойство border наследовалась

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

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

На этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу
  2. [popup_trigger >Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на моем блоге

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

CSS :: Наследование, каскадирование и приоритетность стилей

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

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

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

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

Давайте для начала рассмотрим простейший случай, показанный в примере №1.

Пример №1. Простейший случай каскадности стилей CSS

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

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

Специфичность селекторов CSS


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

Расчет специфичности селектора производится при помощи трех чисел ( a , b , c ). Происходит это следующим образом:

  • числу a присваивается количество идентификаторов в селекторе;
  • числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
  • числу c присваивается суммарное количество элементов и псевдоэлементов.

После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a , в независимости от величины чисел b и c . Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b , а в случае необходимости и число c (см. пример №2).

Пример №2. Сравнение специфичности селекторов

Виды и приоритет стилей CSS

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

    обладает наиболее низким приоритетом и применяется по умолчанию к элементам html -кода, к которым не применяется другое форматирование, говоря проще – к ‘голому’ html -коду. устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя. устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

  • Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
  • Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента ‘link’ ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
  • Стили внутренних таблиц (расположены внутри контейнеров ‘style’) имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент ‘link’, при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов ‘style’, то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
  • Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Служебный параметр !important

Отдельно следует сказать про служебный параметр !important (от англ. important – важный), который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css -свойства через пробел, например, p (см. пример №3). Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

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

Использование одинаковых свойств CSS в одном правиле

В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями (см. пример №4). Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.

Наследование и приоритеты CSS стилей

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

В основном это происходит из-за применения основных принципов применения css стилей — наследования и каскадирования.

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

Но как же тогда определить, какая инструкция имеет больший приоритет? И как задать нужной нам инструкции больший приоритет, чтобы применилась именно она, а не какая-нибудь другая? Об этом мы и поговорим в этой статье.

Но сначала давайте рассмотрим основные принципы применения css стилей.

1. Принцип наследования css стилей.

Ни для кого не секрет, что структура HTML кода любой интернет страницы имеет иерархическую структуру. То есть одни элементы входят в состав других, а те, в свою очередь — входят в состав третьих и так далее.

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

Дочерние элементы (которые находятся внутри других) наследуют стили от своих предков. И нам нужно прописать стили только на самом верхнем уровне — и они применятся на всех уровнях.

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

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

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

2. Каскадирование css.

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

Что это значит? Для того, чтобы правильно назначить стили какому-либо элементу, мы можем использовать различные комбинации селекторов и придать нашему свойству более весомый приоритет, чем тот, который наследуется элементом от родителя или прописан в другой css инструкции.

3. Приоритеты css стилей.

Итак, мы с Вами подошли к самому интересному. Сейчас мы научимся правильно адресовать стили, чтобы они применялись именно там, где нам нужно, а не где попало.

Начнем с самого низа:

    Самым низким приоритетом обладают стили браузера. Не удивляйтесь — каждый браузер имеет свои стили по умолчанию. Они применяются, если для элемента вообще не заданы никакие стили. Поэтому, если Вы хотите, чтобы Ваш сайт во всех браузерах смотрелся одинаково — нужно обязательно прописывать стили всем элементам.Есть еще один способ на тот случай, если Вы все-таки забыли прописать стили к какому-нибудь элементу. Это сброс css стилей. Смысл заключается в том, чтобы изначально сбросить все стили браузеров. Для этого используются готовые блоки css инструкций, которые нужно просто вставить в начало вашего файла со стилями. Вот Вам один из вариантов такого «сбрасывающего» блока инструкций:

Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

Поэтому, если у Вас не применяется какая-нибудь css инструкция — посмотрите, какая другая инструкция не дает ей примениться (имеет большую специфичность), рассчитайте ее специфичность и пропишите к нужному селектору дополнительный идентификатор (какого-нибудь предка этого элемента). Тем самым вы повысите его специфичность, а значит и приоритет нужной Вам инструкции.

Отслеживать селекторы проще всего при помощи дополнения к браузеру Mozilla FireFox — Firebug. Как его установить и использовать, я подробно описал здесь.

  • Далее идут стили, прописанные непосредственно внутри тега элемента с помощью атрибута style.
  • И наконец, самым высоким приоритетом обладают стили, отмеченные специальным сопроводительным словом !important .
  • На этом все на сегодня. Надеюсь, что информация оказалась полезной для Вас.

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

    Собственно вопрос: Почему в div>p цвета не красные? id же приоритетом выше чем атрибут. Или p не наследует параметров div , хотя font-weight наследуется.

    Был бы рад если подкинули статью.

    1 ответ 1

    Вы правы в том, что id выше приоритетом, чем сам тэг. Но приоритет выше относительно тэга, к которому относится id , т.е. у

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

    Статью не посоветую, но посоветую книгу:

    Макфарланд Дэвид — Большая книга CSS3. 3-е изд. — СПб.: Питер, 2014. — 608 с.: ил. — (Серия «Бестселлеры O’Reilly»). ISBN 978-5-496-00428-2.

    Наследование в 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

    Может ли класс 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 максимально доступно и эффективно. Как это у меня получилось? Судить вам. Уровень вашей активности при подписке на новые материалы блога дадут ответ на этот вопрос. Засим разрешите откланяться. Напоследок не помешает небольшая разрядка, особенно тем, кто неравнодушен к КВН:

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

    Что такое наследование в CSS?

    Наследование в CSS — это эффект, при котором значения некоторых свойств CSS примененных к определенному HTML-элементу автоматически применяются и к его потомкам в дереве документа. Что такое потомки элементов мы с вами проходили в уроке по селекторам потомков , поэтому повторно возвращаться к этому не будем, а сразу рассмотрим такой простой пример.

    Илон Маск рекомендует:  Безлимитный хостинг в России от компании SmartApe
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL
    unset если свойство наследуется, то как у родителя, если нет — то по умолчанию
    inherit как у родителя
    initial по умолчанию