Как сделать чтобы свойство не наследовалось css

Добавил пользователь Евгений Кузнецов
Обновлено: 18.09.2024

Узнайте, что означает наследование CSS и почему это важно

Когда вы устанавливаете некоторые свойства селектора в CSS, они наследуются всеми дочерними элементами этого селектора.

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

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

Некоторые другие свойства имеют больше смысланетпередаваться по наследству.

Подумайте о шрифтах: вам не нужно применять font-family к каждому тегу вашей страницы. Вы устанавливаете body шрифт тега, и все дочерние элементы наследуют его вместе с другими свойствами.

В background-color собственность, с другой стороны, не имеет смысла передаваться по наследству.

Свойства, которые наследуют

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

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing

Я получил это от этогохорошая статья Sitepointо наследовании CSS.

Принуждение свойств к наследованию

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

В дочерних случаях вы устанавливаете значение свойства в специальное ключевое слово inherit .

Принуждение свойств НЕ наследовать

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

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

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

Другие особые ценности

В добавок к inherit и revert специальные ключевые слова, которые мы только что видели, вы также можете установить любое свойство:

В предыдущих уроках кратко упоминали, что при знакомстве с таблицей стилей CSS, правилами, свойствами и селекторами стоит уяснить для себя правила наследования стилей. Мы знаем, что весь HTML- документ условно можно представить в виде иерархии, где одни элементы содержат в себе другие. Между элементами существуют различные связи. Они могут быть соседними, а могу иметь свзять родитель-дочерний элемент. У каждого элемента только один непосредственный родитель, это тот, который содержит его явно. Родителя нет только у корневого элемента, в Html-файлах это тег .

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

Какие css-свойства (стили) наследуются

font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.

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

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

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

Каскадирование CSS, каскадные таблицы стилей

Мы уже знаем о расшифровке аббревиатуры CSS, с таблицей стилей все в принципе понятно, а что же такое каскадная? Каскадирование - один из базовых механизмов при работе с css-правилами. Для одного и того же элемента может быть задано множество пересекающихся стилей. Стили могут задаваться через атрибут style, через селектор тега, класса, идентификатора, могут наследоваться от родителя и т.д. Вопрос в том, какие же стили применяться к элементу в конечном итоге, давайте разбираться.

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

Теперь на примерах:

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

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

Далее расскажем про еще один популярный и удобный прием в задании css-свойсв. У большинства сайтов есть похожие друг на друга элементы, которые отличаются лишь незначительно. Одним из таких популярных html-элементов являются кнопки. Как правило, они имеют одинаковые отступы, размеры, закругления, тени, цвет текста и т.д. Здесь и удобно применять перекрестное наследование стилей

User agent
- Например, дефолтный стиль браузера
User
- Стиль, указанный пользователем в настройках браузера
Author
- Авторский стиль, указываемый автором странички (внешний, встроенный или inline-стиль, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style)

User agent объявления,
Пользовательские объявления,
Авторские объявления,
Aвторские объявления с конструкцией !important,
Пользовательские объявления с конструкцией !important.

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

Как рассчитывать специфичность?

a = 1, если inline стиль,
b = количество удостоверений,
c= число атрибутов селекторов, классов и псевдоклассов,
d = количество имен элементов и псевдоэлементов.

a=1, b=0, c=0, d=0 → 1000
a=0, b=0, c=1, d=3 → 0013
a=0, b=1, c=1, d=1 → 0111

Как заставить специфичность работать на вас

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

Наследование является способом распространения значения свойств элементов от родителей к детям. Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если вы установите body тегу страницы конкретный шрифт,то шрифт будет наследоваться другими элементами, например, заголовками и абзацами, не требуя соответствующей прописки каждый раз. CSS спецификация определяет, в каких случаях наследование каждого свойства идёт по умолчанию. Не все свойства наследуются, но мы можем заставить какие-то свойства наследоваться посредством присвоения значения inherit. Хотя это несколько выходит за рамки данной статьи, всё-таки необходимо упомянуть, что наследование в CSS не стоит путать с наследованием в объектно-ориентированном программировании (ООП). Вот как выглядит определение ООП наследования от Википедии, что и уточняет, что речь не идет об одном и том же: В объектно-ориентированном программировании (ООП) наследование является способом формирования новых классов [. ] с помощью классов, которые уже были определены. Наследование используется, чтобы помочь использовать существующий код с минимальными изменениями. Новые [классы . ] наследуют атрибуты и поведение уже существующих классов. .

Как работает наследование?

Специфицированное значение. User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид.
Вычисленное значение. Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено.
Используемое значение. Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после
Действительное значение. Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).

Использование наследования

Самая главная вещь, которую вы должны знать о наследовании – это его существование и как оно работает. Вообще на самом деле наследование в данном случае совсем простое для понимания. Представьте себе, что вы должны были бы указывать размер шрифта или семейство шрифтов для каждого элемента, а не просто добавить его в body тэг? Это было бы жутко громоздким, и поэтому наследования так полезно. Не разрывайте его, используя универсальный селектор (*) со свойствами, которые наследуются по умолчанию. Вы не должны помнить все наследуемые значения, но в свою очередь вам необходимо о них не забывать. Редко CSS-статья не содержит каких-то плохих новостей о Internet Explorer. Эта статья не является исключением. IE поддерживает наследуют значение только с версии 8, за исключением direction и visibility свойств. Круто.

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

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

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

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

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

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

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

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

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

Значение inherit

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

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

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

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

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

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

Итоги

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

Читайте также: