Решение проблемы наследования CSS-стилей — Супер-пупер школа программирования — LiveJournal
Один мой хороший друг и коллега Юра Поздняков (ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: «Ха! Так это ж очевидно!» Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.
О наследовании CSS
Вот пример, который полностью перевернул мое представление о CSS:
DOM:
<div>
<div>
<a href="#">blablabla</a>
</div>
</div>
CSS:
.application .component
{
font-family: Comic Sans MS;
}
.mylink
{
font-family: Arial;
}
Как вы думаете, каким шрифтом будет выведена ссылка? Если исходить из понятия «Какой из селекторов круче?», то шрифт будет Comic Sans MS. Очевидно, первый селектор круче второго, потому что в нем целых два класса против одного. Но на самом деле правильный ответ — Arial! Почему? Потому что первый селектор выбирает только лишь компонент <div>, и его действие не распространяется на дочерний компонент <a href=»#»>blablabla</a>.
Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?
CSS:
.application .component
{
font-family: Comic Sans MS;
}
Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:
CSS:
a
{
font-family: inherit;
}
.application .component
{
font-family: Comic Sans MS;
}
Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)
Решение
Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:
1. Не использовать !important
Все это знают, но все равно делают. Делают, потому-что так проще. Когда какой-то стиль в течение 20 минут не хочет прикручиваться куда надо, обычно сдаются и ставят этот проклятый !important. Но это плохо, потому что !important-important нету. И если этот самый !important испортит жизнь другим компонентам, то справиться с этим будет еще сложнее. Лучше поступить так: внимательно всмотреться в CSS-правила и найти-таки несоответствие стандартам, перечисленным в данной статье. Это несоответствие с большой долей вероятности и будет служить причиной проблемы.
2. Ни один CSS-селектор не должен содержать записи вида #myid
По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.
3. Правильно именовать классы
Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:
DOM:
<div>
<div>
<a href="#">Update</a>
<a href="#">Cancel</a>
</div>
<a href="#">www.blablabla.com</a>
</div>
Это гарантирует, что все классы имеют уникальные имена.
4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit
Пример:
a
{
font-family: Serif;
...
}
div
{
color: black;
...
}
...
Тем самым мы избавились от проблемы наследования. Мы объявили правила наиболее низкого приоритета, которые гарантируют, что непредсказуемого наследования стилей не будет. Если же вам хочется, чтобы какой-то стиль у некоторого компонента унаследовался от родителя, объявите его отдельно:
.my-favorite-component .my-favorite-component-toolbar
{
color: #700;
}
.my-favorite-component .my-favorite-component-toolbar-button
{
color: inherit;
}
5. Все остальные селекторы строятся только из классов и псевдоклассов
Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:
CSS-файл моего любимого компонента
.my-favorite-component
{
background-color: #FDD;
border-radius: 4px;
border: 1px solid #999;
padding: 5px;
}
.my-favorite-component .my-favorite-component-toolbar-button
{
background-color: #008;
font-family: Helvetica;
}
.my-favorite-component .my-favorite-component-link
{
color: black;
text-decoration: none;
}
.my-favorite-component:hover .my-favorite-component-link
{
color: blue;
text-decoration: underline;
}
...
Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.
Важно! Не допускайте селекторов вида:
.application .application-main-panel a
{
color: black;
}
Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.
6. (опционально) Для компонентов определить стили по умолчанию
Пример:
.my-favorite-component a
{
color: black;
font-family: Comic Sans MS;
}
.my-favorite-component div
{
margin: 5px;
}
...
Делать это можно лишь в том случае, если ваш компонент не может содержать других вложенных компонентов или другого произвольного HTML, поскольку в таком случае все стили могут поплыть. А если у вас есть два таких компонента, для которых определены стили по умолчанию, и которые содержатся один в другом, то результат будет зависеть от порядка подключения CSS-файлов. А это плохо: получается косвенная зависимость одного компонента от другого и от приложения в целом.
Заключение
Я надеюсь, что эта статья поможет вам решить многие проблемы, возникающие при верстке веб-страниц, избавит вас от необходимости добавлять !important где попало и сделает программирование еще проще и интереснее.
Я тоже постараюсь ближайшее время посвятить переверстке своего проекта, поскольку неразбериха в CSS файлах уже неоднократно давала о себе знать. По ходу дела буду вносить коррективы в данную статью, если предоставленные выкладки содержат ошибки или недоработки.
Продолжение: Решение проблемы наследования CSS-стилей — замечания
Наследование в css. Наследование в CSS на примерах. Может ли класс CSS наследовать один или несколько других классов
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Рад снова всех вас приветствовать на страницах блога 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)
9. Css.Группирование и наследование стилей
Благодаря группированию и наследованию появляется возможность упорядочить и оптимизировать документы, описывающие стили элементов вебстраниц сайта.
Группирование: общие свойства селекторов можно объединить и не прописывать их в индивидуальных частях кода:
font-family: Tahoma, Arial, Helvetica, sans-serif; |
font-size: 2.5em; |
font-size: 1.8em; |
Наследование предполагает перенос правил стилей для элементов, находящихся внутри других. Такие элементы называются дочерними и они наследуют стилевые свойства своих родителей. Наследование позволяет определять значения один раз, задавая их для родительского элемента верхнего уровня. Благодаря наследованию нет необходимости определять свойства для абсолютно каждого элемента в отдельности.
Пример:
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */ |
color: black; /* Черный цвет текста */ |
10. Css. Классы. Псевдо-классы.
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; … }
Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса»
Пример: <html>
<head>
<meta charset=»utf-8″>
<title>Камни</title>
<style>
table.jewel {
width: 100%; /* Ширина таблицы */
border: 1px solid #666; /* Рамка вокруг таблицы */
}
th {
background: #009383; /* Цвет фона */
color: #fff; /* Цвет текста */
text-align: left; /* Выравнивание по левому краю */
}
tr.odd {
background: #ebd3d7; /* Цвет фона */
}
</style>
</head>
<body>
<table class=»jewel»>
<tr>
<th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
</tr>
<tr class=»odd»>
<td>Алмаз</td><td>Белый</td><td>10</td>
</tr>
<tr>
<td>Рубин</td><td>Красный</td><td>9</td>
</tr>
<tr class=»odd»>
<td>Аметист</td><td>Голубой</td><td>7</td>
</tr>
<tr>
<td>Изумруд</td><td>Зеленый</td><td>8</td>
</tr>
<tr class=»odd»>
<td>Сапфир</td><td>Голубой</td><td>9</td>
</tr>
</table>
</body>
</html>
В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице.
Селектор:Псевдокласс { Описание правил стиля }
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
:active
Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
:link
Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текс
:hover
Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
seodon.ru | Учебник CSS — Наследование CSS
Опубликовано: 14.11.2010 Последняя правка: 08.12.2015
В этом уроке мы поговорим с вами о наследовании в CSS, хотя я уверен, что многие из вас уже догадались, что это такое и как оно работает. Да, в предыдущих занятиях мы уже не раз сталкивались с вами с эффектом наследования, причем не только сталкивались, но и успешно им пользовались. И все же есть у этого эффекта несколько таких тонкостей, которые возможно будут для вас определенным открытием, но обо всем по порядку, итак.
Что такое наследование в CSS?
Наследование в CSS — это эффект, при котором значения некоторых свойств CSS примененных к определенному HTML-элементу автоматически применяются и к его потомкам в дереве документа. Что такое потомки элементов мы с вами проходили в уроке по селекторам потомков, поэтому повторно возвращаться к этому не будем, а сразу рассмотрим такой простой пример.
Пример наследования в CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Наследование</title>
<style type="text/css">
body {
color: green; /* цвет текста */
text-align: center; /* ставим текст по центру */
border: 2px blue solid; /* стили рамки */
}
</style>
</head>
<body>
<p>Изучаем <em>наследование в CSS</em>.</p>
<p>И получаем от этого удовольствие. :)</p>
</body>
</html>Результат в браузере
Изучаем наследование в CSS.
И получаем от этого удовольствие. 🙂
В этом примере элементы внутри тела документа будут выводить текст по центру и зеленого цвета, так как свойства, отвечающие за это, являются наследуемыми. А вот рамка будет отображена только по периметру страницы, так как border не наследуется.
А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в справочнике по CSS указано, что text-align не может применяться к тегу <BODY>, а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда — абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет — как раз и будет зависеть от правил языка CSS.
В нашем примере выравнивание текста по центру наследуется всеми элементами внутри тела документа без исключения, но вот применится оно только к тем, которые его поддерживают, у нас это теги <P>. Чтобы вы получше запомнили этот момент, я вам покажу еще два небольших примера.
Пример 1
<style type="text/css">
body {
caption-side: bottom;
}
</style>Пример 2
<style type="text/css">
caption {
caption-side: bottom;
}
</style>Результаты этих примеров будут абсолютно одинаковыми — заголовки всех таблиц на странице окажутся под таблицами. Просто в первом случае свойство caption-side будет унаследовано тегами <CAPTION> от «сами знаете чего», а во втором оно будет применено непосредственно к каждому заголовку в отдельности. Ни на какие другие элементы данное свойство воздействовать не будет, ведь в спецификации CSS сказано, что оно может применяться только к табличным заголовкам.
Наследование относительных значений в CSS
Если вы используете относительные единицы измерения в значениях каких-то свойств, и если эти свойства наследуются, то имейте в виду, что элементы-потомки будут наследовать от предка не то значение, которое вы указали, а то, которое было вычислено браузером изначально. В общем-то, все это очень похоже на HTML, так что не будет для вас чем-то необычным. Смотрим пример.
Пример наследования относительных значений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Относительные значения в наследовании</title>
<style type="text/css">
body {
font-size: 20px; /* размер шрифта страницы */
}
div {
font-size: 120%; /* размер шрифта у DIV */
}
</style>
</head>
<body>
<div>
<p>Текст размером 24px.</p>
<div>
</body>
</html>Результат в браузере
Текст размером 24px.
В этом примере у элемента <DIV> установлен размер шрифта в 120%, что в данном случае соответствует 24px. А вот параграфу не задано свойство font-size, он просто наследует размер шрифта от предка. И это не 120%, а те самые 24 пикселя, которые браузер высчитал изначально. И любые потомки параграфа также будут наследовать эти 24px, если конечно для них вы не установите размер шрифта отдельно.
Что такое значение inherit в CSS?
Практически каждое свойство CSS имеет в своем арсенале значение inherit, которое означает, что к данному HTML-элементу будет применено свойство с тем же значением, что и у его родителя. Иногда это бывает очень удобно, так как, задав один раз единое оформление нескольким элементам, в будущем не надо будет править стили каждого из них, чтобы это оформление изменить.
Пример использования значения inherit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Значение inherit</title>
<style type="text/css">
.kvadr {
width: 140px; /* ширина блока */
height: 140px; /* высота */
border: 2px green solid; /* стили рамки */
}
.kvadr > div {
width: 120px; /* ширина */
height: 120px; /* высота */
border: inherit; /* стили рамки наследуются от родителя */
}
.kvadr > div > div {
width: 100px; /* ширина */
height: 100px; /* высота */
border: inherit; /* наследование стилей рамки */
}
</style>
</head>
<body>
<div>
<div>
<div></div>
</div>
</div>
</body>
</html>Результат в браузере
В этом примере достаточно изменить стили рамки у блока с, чтобы у остальных блоков они также изменились.
Internet Explorer 6.0 и 7.0 не понимают значение inherit, поэтому в них вы результат примера не увидите.
Домашнее задание.
Делать домашнее задание по наследованию я не вижу смысла, так как тут все достаточно очевидно. А давайте-ка лучше проверим ваши теоретические знания CSS. Только, пожалуйста, не бегите сразу к справочнику, попробуйте для начала порыться в своей головке. А уж если не получится, то тогда и к справочнику не грех обратиться. И самое главное — не переживайте по этому поводу, большинство верстальщиков (если вообще не все) не помнят весь CSS наизусть, так как этого не требуется.
- Что такое поля и отступы элементов, чем они отличаются, и какие свойства их изменяют?
- Какие свойства изменяют ширину и высоту элементов? Подумайте хорошенько.
- Чем отличаются классы CSS от идентификаторов, а псевдоклассы от псевдоэлементов.
- Какое свойство изменяет способ позиционирования элементов и чем отличается абсолютное позиционирование от относительного.
Посмотреть ответ
Наследование, каскадирование и приоритетность стилей
Наследование в CSS
Все свойства CSS делятся на те, которые наследуются элементами-потомками от своих элементов-предков, и те, которые не наследуются. Так, например, если для параграфа задать границу (сформировать рамку), то все вложенные в него элементы (элементы-потомки) не унаследуют это свойство CSS, поскольку в данном случае наследование не имеет положительного эффекта. Согласитесь, не совсем разумно было бы переопределять для каждого элемента-потомка унаследованные от абзаца-родителя границы. Но, если мы зададим для абзаца, например, синий цвет шрифта, то он будет унаследован всеми элементами потомками до тех пор, пока мы не переопределим его в случае необходимости для конкретного элемента, а это эффективнее, чем определять шрифт отдельно для каждого элемента-потомка. Узнать, какие стилевые свойства наследуются, а какие нет, можно в нашем справочнике CSS здесь.
Каскадирование стилей CSS
Каскадирование стилей – это встроенная особенность CSS, которая заключается в том, что если к элементу применяется сразу несколько стилей, то результирующий стиль будет сформирован из всех присутствующих в этих стилях видов свойств, при чем в случае наличия двух или более одинаковых свойств к элементу будет применено значение свойства с наибольшим в данной ситуации приоритетом.
Давайте для начала рассмотрим простейший случай, показанный в примере №1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Наследование стилей</title>
<style>
p{
color: red;
background-color: black;
}
/* Для абзацев с атрибутом
добавляем ширину и переопределяем фон */
p.yellow_back{
background-color: yellow;
width: 200px;
}
</style>
</head>
<body>
<p>
Текст простого абзаца.
</p>
<p>
Текст абзаца с классом.
</p>
<p>
Переопределяем и цвет шрифта, и ширину абзаца.
</p>
</body>
</html>
Пример №1. Простейший случай каскадности стилей CSS
Как видно из примера, к первому абзацу применяется только первый стиль из внутренней таблицы стилей, который задает ему черный фон и красный цвет шрифта. Ко второму абзацу применяется уже два стиля из внутренней таблицы стилей, поэтому результирующий стиль формируется следующим образом: сперва берутся все свойства стиля, у которого специфичность (конкретность) селектора больше (в нашем случае это второй стиль), затем добавляются отсутствующие в нем свойства из других, применяемых к данному элементу стилей, у которых специфичность (конкретность) селектора меньше (в нашем случае это первый стиль). Таким образом, для второго абзаца будет добавлена ширина, а фон будет переопределен с черного на желтый. К третьему абзацу применяется сразу три стиля: два из внутренней таблицы стилей и собственный встроенный стиль. Встроенный стиль обладает наибольшим приоритетом, поэтому он переопределит цвет шрифта, заданный в первом стиле, и ширину, заданную во втором стиле внутренней таблицы стилей.
Таким образом, чтобы правильно рассчитать результирующий стиль, применяемый к элементу, необходимо знать правила формирования этого стиля в случае наложения нескольких стилей сразу. Правила эти сводятся к расчету специфичности селекторов применяемых к элементу стилей, содержащих одинаковые css-свойства с разными значениями, а также, в случае равенства специфичности селекторов, к сравнению видов стилей, сравнению расположения таблиц с этими стилями или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Рассмотрим этот вопрос подробнее.
Специфичность селекторов CSS
Если к одному и тому же элементу применяются два правила, содержащие одинаковые свойства CSS, но имеющие разные значения, возникает конфликт, который может быть решен при помощи сравнения специфичности селекторов этих правил. В результате этого решения к элементу будет применено свойство правила, у которого специфичность селектора больше.
Расчет специфичности селектора производится при помощи трех чисел (a, b, c). Происходит это следующим образом:
- числу a присваивается количество идентификаторов в селекторе;
- числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
- числу c присваивается суммарное количество элементов и псевдоэлементов.
После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a, в независимости от величины чисел b и c. Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b, а в случае необходимости и число c (см. пример №2).
/* Запишем пример кода html */
/*
<p>
<em title="Город">Текст...</em>
</p>
*/
/* Здесь а=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[title="Город"]:hover{
color: red;
}
/* Значит цвет текста в примере кода будет синим, т.к.
во втором правиле число а=0, а в первом правиле а=1. */
/* А вот если бы специфичности селекторов были равны,
то приоритет имел бы стиль нижнего правила. */
Пример №2. Сравнение специфичности селекторов
Виды и приоритет стилей CSS
В случае равенства специфичности селекторов сравниваемых правил, приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Перечислим основные виды стилей в порядке возрастания их приоритета.
- Стиль браузера обладает наиболее низким приоритетом и применяется по умолчанию к элементам html-кода, к которым не применяется другое форматирование, говоря проще – к ‘голому’ html-коду.
- Стиль пользователя устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя.
- Стиль автора устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.
Авторский стиль представляет собой результирующий стиль, который формируется из различных видов составляющих его отдельных стилей, опять же, на основе каскадирования. Перечислим их в порядке возрастания приоритета в случае применения к одному и тому же элементу при условии равенства специфичности селекторов.
- Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
- Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента ‘link’ ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
- Стили внутренних таблиц (расположены внутри контейнеров ‘style’) имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент ‘link’, при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов ‘style’, то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
- Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.
Служебный параметр !important
Отдельно следует сказать про служебный параметр !important (от англ. important – важный), который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p{color: green !important;} (см. пример №3). Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Модификатор !important</title>
<style>
/* Специфичность селектора выше */
div p.green_normal{
color: #007700;
font-weight: normal;
}
/* Специфичность селектора ниже, */
/* плюс отсутствует !important */
.bold_wrong{
font-weight: bold;
}
/* Специфичность селектора ниже, */
/* но присутствует !important */
.bold_font{
font-weight: bold !important;
}
</style>
</head>
<body>
<div>
<p>
Получаем обычный текст, зеленого цвета.
</p>
</div>
<div>
<p>
Начертание не стало полужирным, т.к. приоритет<br>
селектора .bold_font ниже, чем селектора div p.green_normal.
</p>
</div>
<div>
<p>
Цвет текста остался зеленым, но начертание стало полужирным,<br>
т.к. в подключенном классе .bold_font присутствует !important.
</p>
</div>
<div>
<p>
Цвет текста остался зеленым, но начертание стало полужирным,<br>
т.к. в подключенном классе .bold_font присутствует !important.<br>
<span>Но мое начертание осталось
обычным,<br> т.к. встроенный стиль имеет наивысший приоритет.</span>
</p>
</div>
</body>
</html>
Пример №3
Всегда пытайтесь использовать специфичность, а не модификатор !important, т.к. он усложняет отладку, нарушая естественное каскадирование стилей.
Из сказанного выше, следует простой вывод: чем ближе стиль расположен к элементу и чем более конкретнее его селектор, тем большим приоритетом он обладает.
Использование одинаковых свойств CSS в одном правиле
В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями (см. пример №4). Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Одинаковые свойства в одном правиле</title>
<style>
p{
width: 450px;
color: blue;
color: superblue;
}
</style>
</head>
<body>
<p>
Цвет текста будет просто синим, т.к.
значение superblue не поддерживается
браузером и будет просто проигнорировано.
</p>
</body>
</html>
Пример №4
Быстрый переход к другим страницам
Учебник CSS 3. Статья «Селекторы. Часть 1»
Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.
Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).
Селектор типа
Рис. 3а Селектор типа в CSS.
В предыдущих примерах, да и в практическом задании предыдущей статьи «Создание первой таблицы стилей» мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:
- p — сообщает браузеру, что необходимо отформатировать все HTML теги <p> (параграф).
- table — сообщает браузеру, что необходимо отформатировать все HTML теги <table> (таблица).
- li — сообщает браузеру, что необходимо отформатировать все HTML теги <li> (элемент списка).
Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (<h3>):
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Селектор типа</title>
<style>
h3 {
font-family: Arial; /* задаем тип шрифта Arial */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
<h3>Обычный заголовок второго уровня</h3>
<h3>Обычный заголовок второго уровня</h3>
<h3>Обычный заголовок второго уровня</h3>
</body>
</html>
Результат нашего примера:
Рис. 3б Пример использования селектора типа.Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.
Селектор класса
Рис. 4 Селектор класса в CSS.
Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.
И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:
.test { /* имя класса в таблице стилей задается через точку */
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:
<h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
- в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
- используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
- Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).
Теперь соберем это в одном примере и посмотрим результат:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
<h3>Обычный заголовок второго уровня</h3>
<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html>
Результат нашего примера:
Рис. 5 Использование селектора класса.Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример выделения одного слова</title>
<style>
.test {
color: #0F0; /* задаём цвет текста в hex формате */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body>
</html>
Результат нашего примера:
Рис. 6 Пример выделения одного слова с использованием селектора класса.Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:
a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}
ID селекторы
Рис. 7 Селектор id в CSS.
Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:
#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}
После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:
<h3 id = "test">Обычный заголовок второго уровня</h3> <!-- задаем идентификатор для элемента -->
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:
- значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
- все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
- используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
- Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).
Теперь соберем это в одном примере и посмотрим результат:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
<h3 id = "test">Обычный заголовок второго уровня</h3>
</body>
</html>
Результат нашего примера:
Рис. 7а Пример использования id селектора.В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.
Групповые селекторы
В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и рассмотренные нами id селекторы. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой, позднее вы поймете почему.
Например:
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green; /* задаем цвет заднего фона */
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */
}
</style>
Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.
Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.
Рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Групповые селекторы</title>
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red; /* задаем цвет текста */
}
h4,h5 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */
}
h2,h3,h4,h5 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic; /* задаем стиль шрифта - курсивное начертание */
}
</style>
</head>
<body>
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<p class = "test">Абзац с классом test</p>
<h4>Заголовок третьего уровня</h4>
<p id = "test">Абзац с идентификатором test</p>
<h5>Заголовок четвертого уровня</h5>
</body>
</html>
В этом примере мы использовали три групповых селектора:
- Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет текста красный.
- Вторым групповым селектором мы указываем, что заголовки <h4> и <h5> получат цвет текста синий.
- Третьим групповым селектором мы указываем, что все заголовки (от <h2> до <h5>) будут иметь курсивное начертание шрифта.
Результат нашего примера:
Рис. 7б Пример использования групповых селекторов.Универсальный селектор
Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).
Давайте рассмотрим пример использования:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Универсальный селектор</title>
<style>
* { /* выбираем все элементы внутри документа */
color: rgb(50,100,150); /* задаем цвет текста в формате rgb */
font-style: italic; /* задаем стиль шрифта - курсивное начертание */
}
</style>
</head>
<body>
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<p>Абзац, который не несет никакой смысловой нагрузки</p>
</body>
</html>
В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.
Результат нашего примера:
Рис. 7в Пример использования универсального селектора.Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.
.test * { /* выбирает все элементы внутри элемента c назначенным классом test */
объявление;
}
#test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление;
}
div * { /* выбирает все элементы внутри элемента <div> */
объявление;
}
Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Составьте следующую HTML страницу, в которой заголовки имеют шрифт Arial, а абзацы, которые относятся к статье Verdana:
Практическое задание № 2.
Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле. В практических заданиях для определения цвета элементов вы можете использовать графические редакторы — инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Наследование, каскадность и специфичность в CSS
Как запустить видеоурок:- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Наследование в CSS
Структура сайта напоминает родовое дерево. Все начинается с родительского элемента. В нашем случае — это тег <html>. Потом появляются потомки — элементы head и body. Их еще называют дочерними по отношению к родителю. У дочерних элементов могут быть и свои потомки. Например, тег <div>, тег абзаца и тег заголовка. Чем больше сайт, тем больше дерево рода.
Наследование в CSS происходит следующим образом: мы задаем какие-либо свойства для тега <body>. Тег <body> является родительским тегом для всех своих дочерних тегов. В нашем случае дочерними являются теги <div> и <h2>. Так как тег <body> является для них родительским, то он передает эти свойства всем своим дочерним тегам. А дочерние теги их наследуют. Если мы укажем для тега <body> свойство шрифта, то его дочерние элементы унаследуют это свойство, если для них самих это свойство не будет указано.
Давайте посмотрим пример наследования со свойством color. Я открываю файл typography.css и добавляю сюда стили для тега <body>. Так как цвет текста задан у нас и заголовкам, и абзацам и ссылкам, то мы эти цвета пока закомментируем.
body {
color: #0D7200;
}
Сохраняем и переходим в браузер. У нас пока что заголовки имеют голубой цвет, а весь остальной текст — черный цвет. Давайте обновим страницу. Мы видим, что после изменения кода весь текст на нашей странице стал зеленого цвета, кроме заголовка в шапке. Это произошло из-за того, что заголовок является ссылкой. Но это уже ближе к специфичности, с которой мы разберемся позже. Пока мы видим, что весь текст у нас зеленого цвета. Мы задали зеленый цвет текста для тега <body>, а для всех его дочерних элементов мы цвет убрали. В итоге все дочерние элементы унаследовали цвет от тега <body>.
Давайте перейдем в код и уберем комментарии у закомментированных строк. Сохраняем и обновим страницу. Мы видим, что цвет текста стал прежним.
Теперь давайте перейдем в код файла st.css. Для тега <body> мы добавим красную четырехпиксельную рамку.
body { background: #B3A57F url('img/bg.png') repeat; text-align: center; border: 4px dashed red}
Переходим в браузер. Обновляем страницу. Видим красную четырехпиксельную рамку. Но возникает вопрос. Почему эта красная рамка не унаследовалась ни для тегов абзаца, ни для изображения, ни для заголовков, а только для тега <body>? На самом деле здесь ошибки нет. Все дело лишь в изначальной наследуемости свойств. Откройте у себя страницу www.w3.org/TR/CSS21/propidx.html. Ссылку я прикладываю в документе Ссылки.txt в дополнительных материалах к видеоуроку. По этой ссылке вы можете посмотреть таблицу наследуемости свойств. Колонка «Name» означает имя свойства, а колонка «inherited» переводится как «наследование». Если указано значение «yes», то свойство наследуется по умолчанию. Если указано «no», то не наследуется. Давайте посмотрим свойство color. В колонке «inherited» указано значение «yes». Оно у нас наследовалось по умолчанию. Мы это уже проверили. Теперь посмотрим свойство «border». В колонке «inherited» указано значение «no». Это свойство по умолчанию не наследуется. Именно поэтому у нас красная четырехпиксельная рамка была задана только для тега <body>.
Представим, что у нас возникла ситуация, когда нам нужно использовать наследование для дочерних элементов. Например, для оболочки wrapper. Давайте перейдем в код, удалим рамки, которые у нас сейчас существуют и добавим свойство border со значением inherit (наследовать), а также укажем цвет рамки, чтобы их отличать.
#wrapper {
width: 80%;
min-width: 720px;
max-width: 1200px;
border: inherit;
border-color: blue;
margin: 0 auto;
background-color: #fff;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
Сохраняем. Смотрим, что получается в браузере. Рамка border унаследовалась для оболочки wrapper. Ей мы указали синий цвет. Таким образом, с помощью значения inherit вы можете насильно указать, какое свойство вам следует унаследовать от родительского элемента. Вот пример записи этого значения:
div{
background: inherit;
}
Давайте перейдем в документ st.css и вернем его к первоначальному виду. Я это делаю с помощью сочетания клавиш CTRL+Z. Сохраняю и мы переходим к следующей теме.
Каскадность в CSS
Каскадность. Слово «каскад» у нас скрывается в аббревиатуре CSS (Cascading Style Sheet – Каскадные Таблицы Стилей). Под каскадностью понимается применение разных стилей к элементам документа. Чтобы было понятнее, я открою файл typography.css. Смотрите, у нас есть абзац. Ему задан цвет текста. Помимо этого цвета текста ему также задан цвет текста от тега <body>, потому что он наследуется. Именно это и понимается под значением слова «каскадность».
Специфичность в CSS
Специфичность. Когда какому-то элементу задано несколько стилей, перед браузером стоит задача «Какой из этих стилей вывести на экран?». Для этого он определяет приоритеты для стилей и выводит стиль с наивысшим приоритетом. Для определения приоритета используется таблица специфичности. Это таблица с условными значениями, но она поможет вам понять принцип работы браузера. В левой колонке таблицы специфичности указаны стили, а в правой колонке указаны значения специфичности, которые даются за использованный стиль. Давайте перейдем в файл typography.css и укажем стили для заголовка нашего документа, который у нас располагается в шапке.
Добавляю первый стиль — для посещенного состояния. Здесь участвуют два тега: h2, a — и один псевдоэлемент visited.
h2 a:visited { color: #FF00FF; }
Добавляю второй стиль. В нем участвуют два тега и один идентификатор, который мы сейчас добавим в страницу page.html.
h2#home a { color: #7E6752; }
Также еще добавим класс для ссылки. Мы его будем использовать в следующем стиле.
<h2><a href="#">Познай мир сейчас!</a></h2>
Указываем следующий стиль. В нем участвуют два тега и один класс.
h2 a.color1 { color: #7E282A; }
Укажем еще один стиль. В нем присутствуют только два тега и ключевое слово «important».Оно уже возникало в течение видеокурса. Это слово переводится как «важно». Замечу, что оно имеет наибольшее значение специфичности.
h2 a { color: #2B9A9E !important; }
Сохраняем файл typography.css и перейдем снова в файл page.html. В нем мы добавим еще один стиль. Этот стиль называется встроенным. Укажем черный цвет.
<h2><a href="#">Познай мир сейчас!</a></h2>
А теперь давайте откроем браузер и посмотрим, что у нас произошло с заголовком нашей страницы. Заголовок изменил свой цвет на зеленый.
Теперь давайте подсчитаем значения специфичности для каждого стиля. Для первого стиля специфичность равна трем, для второго — ста двум, так как за идентификатор дается сотня. Третий стиль имеет специфичность, равную двенадцати, так как за класс дается десять. Четвертый стиль имеет специфичность, равную 10002 за счет слова «important». Следующий стиль имеет специфичность, равную двум, так как используются только два тега. Еще у нас есть встроенный стиль, где специфичность равна тысяче. В итоге у нас получается таблица, представленная на экране. На первом месте идет стиль с использованием important, на втором — встроенный стиль, на третьем — стиль с идентификатором, на четвертом — стиль с классом, на пятом — стиль с псевдоэлементом, на шестом — стиль с двумя тегами, на седьмом — стиль с одним тегом и на восьмом — стиль с одним тегом <body>. Из этой таблицы мы понимаем, что браузер выберет тот цвет заголовка, для которого использовалось слово «important». Это зеленый цвет. Перейдем в браузер и видим, что так оно и есть.
Чтобы отследить весь процесс наследования и специфичности, нажмите сочетания клавиш Ctrl+Shift+I. У вас откроется встроенное в браузер окошко. Мышкой выберите желаемый элемент. У нас — заголовок. Нажав на «+», можем раскрыть код. Справа на вкладке стилей мы можем увидеть все стили, применяемые для этого элемента. Как вы видите, здесь у нас показаны селекторы, а также свойства, которые они задают. Для удобства также указан цвет. Мы видим, что некоторые строчки зачеркнуты. Это значит, что они не применяются для данного элемента. Строка со свойством, где мы употребляли important не зачеркнута. Это свойство было использовано. Мы можем визуально отключить это свойство, убрав галочку напротив. Цвет при этом поменяется на следующий по приоритетности. Помните, мы задавали встроенный стиль с черным цветом? Это как раз таки он. Если мы его уберем, то заголовок поменял цвет на коричневый. Сработало свойство с идентификатором. Уберем его. Следующий цвет — бардовый. Уберем и этот цвет. Теперь используется розовый цвет, который набрал три очка. Уберем его. Используется синий цвет, который имеет значение специфичности, равное двум из-за двух тегов. Убрав его, мы видим, что цвет стал тем, который используется для всех ссылок. Таким образом работает специфичность.
Надеюсь, на этих простых примерах я вам доступно объяснил, как работает наследование, каскадность и специфичность в CSS. На этом, должен вам сообщить, видеокурс по CSS закончился 🙂
Но, за ваше старание на протяжении всего видеокурса, вас ожидает 5 приятных подарков (5 бонусных видеоуроков по CSS):
- Памятка записи селекторов, создание красивого поиска на сайте
- Расширения и виджеты для браузера Opera разработчику
- 7 полезных дополнений для браузера Mozilla Firefox разработчику
- Полезные расширения Google Chrome для разработчика
- Как создать красивый сайт? Пошаговое создание красивого сайта.