будет иметь другой стиль и цвет.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#content { font : 14px bold arial, verdana, sans-serif ; color : #C91212 ; } .firstPar{ font : inherit ; color : inherit ; } .secondPar{ font : 10px bold arial, verdana, sans-serif ; color : #000CFF ; }

Как это выглядит в браузере.

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

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

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

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

Текст простого абзаца.

Текст абзаца с классом.

Переопределяем и цвет шрифта, и ширину абзаца.

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

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

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

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

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

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

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

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

/* Запишем пример кода html */ /*

Текст...

*/ /* Здесь а=1, т.к. в селекторе есть 1 идентификатор; */ /* b=0, т.к. есть 0 классов, 0 атрибутов и 0 псевдоклассов; */ /* с=0, т.к. есть 0 элементов и 0 псевдоэлементов; */ /* т.о. специфичность равна (1,0,0). */ #m_id{ color: blue; } /* Здесь а=0, т.к. в селекторе отсутствуют идентификаторы; */ /* b=3, т.к. есть 1 класс, 1 атрибут и 1 псевдокласс; */ /* с=2, т.к. присутствуют два элемента: "p" и "em"; */ /* т.о. специфичность равна (0,3,2). */ p.my_class em:hover{ color: red; } /* Значит цвет текста в примере кода будет синим, т.к. во втором правиле число а=0, а в первом правиле а=1. */ /* А вот если бы специфичности селекторов были равны, то приоритет имел бы стиль нижнего правила. */

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

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

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

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

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

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

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

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

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

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

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

Быстрый переход к другим страницам

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

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

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

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

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

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

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

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

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

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

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

body { color : #000000 ; }

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

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

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

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

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

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

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

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

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; font-weight : inherit ; font-style : inherit ; font-size : 100% ; font-family : inherit ; vertical-align : baseline ; } :focus { outline : 0 ; } body { line-height : 1 ; color : black ; background : white ; } ol, ul { list-style : none ; } table { border-collapse : separate ; border-spacing : 0 ; } caption, th, td { text-align : left ; font-weight : normal ; } blockquote:before , blockquote:after , q:before , q:after { content : "" ; } blockquote, q { quotes : "" "" ; }

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

2. Вторыми по значимости являются стили, которые пользователь выставил в настройках браузера. Они тоже сбрасываются при помощи вышеуказанного списка инструкций.
3. Следующим уровнем приоритета обладают стили, унаследованные элементами от своих предков. Это то, о чем мы говорили в начале статьи.
4. Еще более высокий приоритет имеют стили, прописанные при помощи различных селекторов во внешнем файле с css стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье:
5. Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов

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

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

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

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

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

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

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

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

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

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

   Copyright MyCorp.com

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

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

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

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

   Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

   Рад снова всех вас приветствовать на страницах блога 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 – это практика + справочник, который я, между прочим, рекомендовал в статье об . Также рекомендую подписаться на обновления моего блога, так как после общеобразовательных и вступительных статей я обязательно напишу о некоторых тонкостях и, если можно так выразиться, секретах правильной вёрстки сайта.

   На сегодня всё, спасибо за ваше внимание!