Главная›Тарифы›Css отключить наследование стилей. Наследование CSS. Наследование и группирование в CSS
Css отключить наследование стилей. Наследование CSS. Наследование и группирование в CSS
Эта статья будет посвящена такой важной теме как наследование стилей. Основная цель данной статьи учебника заключается в том, чтобы донести до Вас механизм работы наследования стилей, объяснить Вам в чем заключаются его основные плюсы и разобрать некоторые не очевидные на этот счет вещи.
Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: "яблоко от яблони недалеко падает". Что касается наследования в CSS, то это не что иное, как метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).
Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента
, который определяет видимое содержимое страницы.
Создадим стиль для элемента
, который будет изменять цвет и тип шрифта:
</span>Пример наследования стиля в CSS
Заголовок второго уровня
Полный
абзац
В этом примере для элемента
мы установили зеленый
цвет текста и тип шрифта Arial
.
CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).
Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS .
Результат нашего примера:
В выше рассмотренном примере все элементы, расположенные внутри
(его потомки) унаследовали его свойства.
Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент , который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента . В этом заключается основной смысл наследования, который используется в CSS.
Механизм наследования значительно сокращает код CSS, например, если бы наш элемент получил цвет по умолчанию – чёрный, то нам пришлось бы отдельно для этого элемента устанавливать стиль, который бы определял как цвет, так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку конкретной страницы.
Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу
, то в этом случае все элементы, вложенные в него также унаследуют эти свойства.
Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.
Ограничения и нюансы наследования
Ограничения:
Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS .
Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).
Нюансы:
Все современные браузеры используют собственные встроенные CSS стили для HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного элемента на сайте в справочнике HTML (значение CSS по умолчанию). В следующей статье мы научимся обнулять встроенные стили для отображения ваших страниц одинаково во всех популярных браузерах.
А сейчас на примере элемента , определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:
Такие конфликты между стилями всегда разрешает браузер, а по каким правилам определяет, кому отдает приоритет и как он в том, или ином случае себя должен повести, на чью сторону встать, определяется правилами каскадности
. Подробнее о правилах каскадности мы поговорим в следующей статье учебника.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы.
Мы продолжаем изучение CSS, мы уже рассмотрели достаточно много свойств и в этом уроке мы немного отдохнем от этого назойливого слова. И перейдем мы к, достаточно интересной теме, - наследованию. Данный метод сильно облегчает использование CSS, поэтому стоит понять, как это все работает и для чего это вообще нужно.
Если понять и уловить саму суть, то по существу здесь и нечего рассматривать, но увы без этого сложно будет продвигается дальше. И так, попытаюсь рассказать о наследовании простым языком и вкратце, чтобы не запутать Вас сильнее.
И так, идея состоит в чем, создавая страничку зачастую на ней используется много одинаковых элементов, например: один и тот же тип и размер шрифта. И было бы неплохо задать все нужные свойства для шрифта в одном месте, а затем, чтобы во всех блоках, шрифт их сам унаследовал, вместо того, чтобы каждый раз, в разных блоках для одного и того же шрифта задавать одно и тоже свойство.
Думаю мысль Вы поняли, и такая ситуация со всеми элементами. Зачем это все делать? Во-первых, это сокращает Вами написанный код, и код становится более наглядным. Ну, а во-вторых написанный код становится более динамичным, то есть если вы захотите изменить размер шрифта или тип его, то Вам стоит внести изменения только в одном месте и далее текст автоматически унаследует новые значения, и Вам не придется лезть во все свойства, каждого текстового блока, и их менять.
Вот для этого и существует наследование. В одном из уроков мы рассмотрели тему родства Селекторы предков и потомков CSS
и там было обусловлено, что все теги, которые находятся внутри другого тега, являются по отношению к нему потомками, а он же в свою очередь, для них является, родителем.
Таким образом если прописать CSS свойство для родителя, например: для тега , то свойства автоматически будут унаследованы всеми тегами, которые находятся внутри него.
И теперь, давайте создадим ситуацию, когда у нас на странице имеются заголовки, параграфы, списки, ссылки. А затем попробуем через родителя передать свойства всем перечисленным выше элементам (потомкам).
HTML
HTML страница
Заголовок первого уровня
Обычный параграф для примера
Список для приммера
Список для приммера
Список для приммера
Обычный заголовок второго уровня
Обычный параграф для примера
Обычный заголовок третьего уровня
Обычный параграф для примера
Мы создали ряд элементов. Как видно у них нет ни каких стилей, самый обычный текст, который браузер установил по умолчанию.
Теперь нашему родителю тегу зададим свойства: размер, цвет и гарнитуру шрифта и посмотрим его потомки (все теги, которые в него входят) наследуют эти свойства или нет.
После того, как задали родителю определенные свойства, обновим страницу и наши потомки должны будут унаследовать указанные стили (весь текст красный, размером в 20px
с гарнитурой courier new
).
Но, те кто внимательнее скажет, что некоторые элементы не полностью унаследовали свойства: Заголовок остался большим, а ссылка не приняла заданный цвет. Все это связанно с тем, что есть элементы исключения, которые не полностью наследуют все свойства от родителя.
И давайте разберем исключения немного подробней.
Заголовок: как мы уже заметили, ни один заголовок не унаследовал размер, это связано с тем, что у браузера уже есть встроенные стили для заголовков. И если, не указать для заголовка, размер напрямую, то он, по умолчанию, будет отображаться крупнее остального текста. Иначе, если бы заголовок унаследовал размер текста, то он бы превратился в обычный текст и смысл в заголовке бы пропал. Поэтому заголовки не наследуют размер шрифта.
Стоит рассмотреть еще момент, когда не наследуются все свойства, например для тега задать рамку.
В результате, как мы видим рамка появилась только у самого элемента , а все остальные элементы не унаследовали рамку.
От сюда стало ясно, что есть свойства, которые наследуются, а есть которые нет. Узнать, какие свойства наследуются, какие нет можно посмотрев спецификацию CSS
. Там Вы найдете все нужные для Вас свойства и в колонке Inherited?
указано наследуется свойство или нет. И если Вы, для интереса, посмотрите свойство border
, то там будет установлен статут в NO
, то есть не наследовать, в чем мы сами ранее и убедились.
Вот так используется наследование свойств, это сильно облегчает работу и часто используется при создании сайтов. Ну а на этом здесь все, переходим к следующему уроку, в котором рассмотрим каскадность и приоритетность.
Наследование
— это механизм, с помощью которого стили применяются не только к указанным элементам, но и к их потомкам.
Зачем это нужно? Чтобы упростить тебе жизнь! Пример:
Этот текст будет зеленым
Если бы не было наследования, определение «окрасить в зеленый цвет» касалось бы только самого тега с классом green, а расположенный внутри него тег остался бы черным.
Слева — результат, полученный благодаря наследованию.
Справа — результат, который получился бы, если бы наследования не существовало.
Получается, такое простое действие, как, например, задать общий для страницы цвет шрифта, превратилось бы в целое дело! Пришлось бы предусмотреть все внутренние теги. И так каждый раз, когда нужно задать стили для элемента и его потомков!
Надеюсь, я тебя убедил, что наследование — вещь полезная. Теперь давай посмотрим, как с ним управляться.
Наследование свойств
Да будет тебе известно, что наследуются далеко не все свойства. Было бы абсурдно наследовать, например, .
Действительно, зачем мне границы вокруг каждого внутреннего тега? Это что, мне теперь их руками отменять надо?
Не волнуйся — не надо! Целый ряд свойств, наследование которых противоречит здравому смыслу, например, отступы, размеры, границы просто не наследуются.
Собственно, проще перечислить те свойства, которые наследуются. Вот они:
О специфичности
Унаследованные свойства, это очень удобно, когда нужно задать стили потомкам элемента. Но если я явно задаю какой-нибудь стиль, было бы, конечно, неправильно, если бы он «перебился» унаследованным. Для того, чтобы на корню исключить такую возможность, договорились, что унаследованные свойства вообще не имеют специфичности. Никакой. Даже нулевой. В результате, любой явно заданный стиль всегда победит унаследованного.
С этим связан интересный нюанс. Дело в том, что специфичность универсального селектора равна 0 (ты помнишь, в расчете специфичности правила мы просто не обращаем на него внимание).
Может, с точки зрения математики, это и чушь, но в -наследовании считается, что специфичность «0» это больше, чем «вообще нет специфичности». Поэтому универсальный селектор перекроет все унаследованные правила.
Это одна из причин, по которой универсальный селектор нужно применять очень осмотрительно (а еще лучше — не применять совсем). Ведь он может вызвать эффект сродни короткому замыканию, перебив унаследованные правила. Например:
Фактически, этим примером мы поломали наследование свойства color и получили то же нехороший результат, что и на самом первом рисунке справа. Текст внутри span (или любого другого внутреннего тега) будет черный.
Наследование и стили браузера
Так уж повелось, что у каждого браузера есть свои собственные стили для некоторых тегов. Наиболее ярко это видно, на примере ссылки.
Тут идет текст и ссылка
Green {
color: #539127; /* зеленый */
}
В результате такого кода мы увидим зеленый цвет надписи и, скорее всего, синюю ссылку. Почему синюю? Почему ссылка не унаследовала цвет родителя?
Все просто. Где-то в таблице стилей браузера есть примерно такая запись, помещенная туда заботливыми руками разработчика:
A:link {color: blue}
Вот и получается, что унаследованный стиль перебился явно (пускай даже не мной) заданным.
Green,
.green a {
color: #539127; /* зеленый */
}
Я специально привел этот пример, чтобы ты, встретив такую ситуацию, не воспринял ее как сбой в механизме наследования.
Заметка:
активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Рад снова всех вас приветствовать на страницах блога Site
on!
В прошлой статье мы кратко поговорили об и разобрали несколько простых примеров. Сегодня наша тема – это такая важная вещь, как наследование в CSS. Наследованием в CSS
называется передача свойств от элемента родителя к дочерним элементам. Или если вам будет понятней: передача CSS свойств от верхнего тега к вложенным в него. Причём наследуется ли свойство или не наследуется зависит от самого свойства, а не от тегов, к которым оно применено. Как это работает? Да очень просто, вернёмся к нашему макету, с помощью которого мы научились :
Как создать веб страницу?
Если мы запишем в CSS:
Body{
color: green;
}
То цвет надписи «И здесь пишем любой интересующий нас текст» как ни странно станет зелёным. А что будет, если мы нашу надпись заключим в блок? То есть вот какой стала интересующая нас часть кода:
И здесь пишем любой интересующий нас текст.
То надпись всё равно останется зелёной, так как свойство color
наследуется, а значит, передалось от тега body
к вложенному в него тегу div
и дальше (если бы было куда). И сразу вам задачка: какого цвета будет наша надпись, если мы имеем следующий код
И здесь пишем любой интересующий нас текст.
Для справки - тег, который просто обозначает какой-либо участок текста. Если в CSS для него ничего не задано, то он ничего и не делает.
Правильный ответ: красным
. Так как тег div перебил наследование от body (но только для тегов, вложенных внутрь div).
Какой приоритет имеет наследование в CSS ?
Да ровным счётом никакого. Приоритет наследования в CSS даже не равняется нулю, его просто нет. О чём нам это говорит? Да о том, что любое свойство, заданное вложенному тегу напрямую, будет исполняться вместо того свойства, которое он бы унаследовал (но мы не дали этому случится, так как указали это же самое свойство, но с другим значением).
Об этом ярко свидетельствует предыдущий пример, где тег div
не дал тегу span
унаследовать зелёный цвет текста от тега body
, а всё потому, что мы для тега div
явно объявили красный цвет, а значит, приоритет у красного цвета наивысший…
А может быть и нет? Давайте рассмотрим пример ниже, где для одного и того же тега будет явно, но различным образом, указано одно и тоже свойство. Итак, смотрим наш CSS:
Div p {
Color: green;
}
p{
color:red;
}
И там и там явно указан цвет именно для параграфов, но в одном из случаев, только для параграфов внутри блока, посмотрим же результат:
Текст внутри блока зелённый
А просто внутри параграфа - красный
Да друзья, на этот раз ничего революционного, победила логика:) Ведь действительно, на то они и каскадные таблицы, чтобы было можно указывать цвета отдельно для вложенных элементов и не беспокоится за «пересекающиеся» свойства.
Подытожим:
наследование в CSS имеет наименьший из возможных приоритетов, однако стоит помнить, что не все свойства наследуются. Свойства, у которых имеется уточнение обстоятельств (при наведении мыши; если один тег вложен в другой, и тд.) имеют приоритет над свойствами, указанными для всех остальных случаев.
Ещё один важный момент: если после значения CSS свойства поставить пробел и написать !important
, то это свойство всегда и везде будет иметь наивысший приоритет. Пример записи:
P{
color:red !important;
}
Я бы советовал избегать такого приёма, вместо этого заранее продумать правильную структуру, чтобы не приходилось так грубо перекрывать одно свойство другим, однако иногда его использование может быть очень практичным.
И напоследок вот что вы должны иметь ввиду, если у вас что-то не получается - если написать так:
P{
color:red;
}
p{
color:green;
}
То применится то значение, которое в коде находится ниже, то есть green
. Подобных случаев может быть много, особенно пока у вас мало опыта и при этом они могут быть довольно разнообразными, чтобы быстро сориентироваться в проблеме, советую использовать . О том, как ими пользоваться и что это такое вы можете прочесть по приведённой выше ссылке.
1) Свойства, указанные для класса (class) или уникального идентификатора (id), имеют высший приоритет, причём приоритет у id, выше чем у class. Всё об этих селекторах и о понятии селектора в целом вы узнаете в следующей статье.
Ещё раз напомню вам о том, что лучший учитель по HTML и CSS – это практика + справочник, который я, между прочим, рекомендовал в статье об . Также рекомендую подписаться на обновления моего блога, так как после общеобразовательных и вступительных статей я обязательно напишу о некоторых тонкостях и, если можно так выразиться, секретах правильной вёрстки сайта.
На сегодня всё, спасибо за ваше внимание!
Здравствуй
, уважаемый читатель.
Это девятый урок изучения CSS. В этом уроке мы рассмотрим что такое наследование и как избежать ошибок при наследовании.
Перед изучением данного урока (наследование в CSS) пройдите предыдущие уроки:
Теория и практика
При написании CSS стилей мы сталкиваемся с проблемой, что некоторые наши свойства могут перекрывать другие свойства, которые июмет больший приоритет. Но также, как вы уже знаете из прошлых уроков, некоторые свойства могут наследовать значения от родителей. Рассмотрим как в коде наглядно это дело обстоит.
<html
>
<head
>
<title
>
Главная</
title
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
</
head
>
<body
>
<div
id
=
"content"
>
<div
class
=
"firstPar"
>
<p
>
Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</
p
>
<p
>
Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</
p
>
</
div
>
<div
class
=
"secondPar"
>
<p
>
Cras</
p
>
<ul
>
<li
>
amet condimentum</
li
>
<li
>
aliquam volutpat</
li
>
<li
>
elementum interdum</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>
Сейчас посмотрите на дерево, которое из себя представляет html:
Сейчас вы видите что по отношению к чему и как относиться. А сейчас пример CSS кода с наследованием. Допустим для
