Понятие каскада CSS (наследование). Псевдоклассы. Сокращённый вариант записи. Урок 12.
Сокращённая запись CSS
Отступы (внутренние и внешние)
Возможно, вы задавались вопросом – “а нельзя ли писать CSS код в какой-то более сокращённой форме”? И таки-да, можно. Вот взять пример такого правила:
padding-left: 10px; padding-right: 15px; padding-top: 20px; padding-bottom: 25px;
Но абсолютно то же самое можно записать в более сокращённом варианте:
padding: 20px 15px 25px 15px;
Для лучшего запоминания проще представить это всё как стрелки часов. Начинаем с 12 часов (отступ вверх) и далее двигаемся по часовой стрелке. К слову, данный принцип так же работает и для свойства margin.
Если отступы с каждой стороны одинаковые, то это можно оформить так:
margin: 20px; padding: 20px;
Ещё есть такой вариант – в случае когда отступы одинаковые сверху, а так же справа и слева, то можно написать:
padding: 10px 15px; margin: 10px 15px;
Другими словами отступ сверху и снизу – 10px, слева и справа – 15px.
Я не настаиваю на таком способе записи и не говорю что именно он является единственно правильным - считаю, каждый должен писать так, как ему удобнее. К слову, я использую полную запись, стараясь избегать сокращений. Кроме того, полная запись выглядит более читабельной.
Рамки
Полная запись:
border-width: 1px; - толщина рамки;
border-style: solid; - стиль рамки (в данном случае - сплошная рамка);
border-color: #000; - цвет рамки.
Сокращённая запись:
border: 1px solid #000;
Причём задавать сокращённые варианты записей можно в произвольном порядке.
Фон элемента
Полная запись:
background-color: #FFF; - фоновый цвет
background-image: url(img/image.png); - фоновое изображение
background-repeat: no-repeat; - повторять или не повторять?
Сокращённая запись:
background: #FFF url(img/image.png) no-repeat;
Шрифты
Здесь надо отметить, что в отличие от предыдущих свойств, здесь порядок должен быть точным.
Полная запись:
font-size: 13px; - размер шрифта;
font-family: Arial, Verdana, sans-serif; - семейство шрифтов;
line-height: 22px; - межстрочный интервал;
Сокращённая запись:
font: 13px/22px Arial, Verdana, sans-serif;
Все эти свойства являются обязательными при определении шрифта через краткую запись. Единственное что, через косую черту я указал межстрочный интервал, но если его не будет, то и его можно опустить.
Псевдоклассы
Я не рассказывал об этом раньше, но наверняка вы и без меня могли заметить некоторые особые моменты в работе с гиперссылками. Во-первых, они по умолчанию имеют синий цвет, который при наведении меняется (так же, меняется и курсор, но об этом позже). Во-вторых, посещённые ссылки отображаются другим цветом. Ок, если мы в принципе можем поменять цвет ссылки с синего на какой-либо другой с помощью CSS правил, то как же поменять цвет ссылки при наведении и цвет ссылки, которую мы посетили?
Для этого собственно и нужны псевдо классы.
Например:
a:hover – с помощью данного правила можно задать цвет ссылки при наведении.
a:visited – цвет ссылки, которую уже посетили.
a:link – псевдокласс по умолчанию. То есть ссылка в обычном состоянии.
a:active – для задания стилей ссылки в момент щелчка по ней.
Но так же важно понимать, что псевдокласс :hover работает не только с обычными ссылками, но так же и с обычными элементами. Например, у нас есть блок div и при необходимости мы так же можем задать ему какую-нибудь рамку при наведении.
Другие псевдоэлементы
Есть и другие интересные псевдоэлементы. Давайте рассмотрим их подробнее:
:first-child – первый дочерний элемент;
:last-child – последний дочерний элемент.
Наследование (каскадность). Приоритет правил CSS
Возможно, для вас это станет сюрпризом, но с приоритетами мы так или иначе уже сталкивались, когда работали с медиа-запросами. Помните тот случай, когда что-то нужно было распечатать, мы подключали отдельный CSS файл, в котором и убирали все лишние стили? При этом, в том случае, чтобы стили для печати не переопределялись основным файлом, мы ставили файл print.css последним. Из чего уже можно сформировать первое правило приоритета: "приоритетным является именно то правило, которое указано последним, при прочих равных условиях".
Не зря я выделил жирным слова “при прочих равных условиях”, так как это тоже имеет значение. Что же я понимаю под этими условиями?
Я имею ввиду уточняющие селекторы. Ну вот к примеру есть у нас такой код:
<div id="rule1" class="rule"> </div> <div id="rule2" class="rule"> </div> <div id="rule3"> </div>
А в CSS правилах прописано скажем следующее:
div {
width: 10px;
height: 10px;
background: green;
}
div {
background: red;
}
div.rule {
background: yellow;
}
div#rule1 {
background: green;
}
Итак, какой же фоновый цвет в итоге будет у блока с идентификатором rule1, какой у блока с идентификатором rule2, а какой у блока rule3?
Рассмотрим всё по порядку. Ширину и высоту в 10 пикселей я присвоил потому, чтобы эти блоки имели хоть какую-то видимость. В данном случае это не столь важно.
Нам важно понять приоритет срабатывания тэгов. Здесь принцип такой – чем более точный селектор указан, тем больший приоритет он имеет. То есть данный обобщающий селектор div, имеет меньший приоритет, поскольку у него не указан класс или идентификатор. Поэтому правила div.rule и div#rule1 здесь в более высоком приоритете. В то же время div#rule1 имеет более высокий приоритет, потому что, как мы помним – не может быть двух или больше элементов с одним и тем же идентификатором. А значит, правила точнее просто быть не может. Собственно за счёт этого и строится вся система приоритетов.
А теперь, возвращаясь к вопросу о фоне блоков, попробуем на них ответить:
#rule1 – блок с данным идентификатором будет иметь зелёный цвет. Учитывая что не может быть двух блоков с одинаковым ID, то правило можно истолковать только однозначно.
#rule2 – для блока с таким идентификатором у нас конкретного правила нет. Но поскольку у элемента используется класс .rule, значит будет использовано это правило.
#rule3 – для этого блока не задано никаких конкретных правил, ни по идентификатору, ни по классу. Значит будет применено обобщающее правило для тэга div. Однако у нас два таких правила. Как понять, какое в итоге будет использовано? Вспоминаем, что конкретно говорится в таких случаях:
«Приоритетным является именно то правило, которое указано последним, при прочих равных условиях».
То есть как раз наш случай – условия равны, так как нет конкретного уточнения в виде класса или идентификатора. При этом явный приоритет имеет последнее правило, а именно:
div {
background: red;
}
,то есть блок будет красным.
Это мы поговорили про приоритеты. Но у пытливого читателя может возникнуть вопрос – а при чём тогда тут каскады? Начну издалека, на самом деле помимо файла с таблицей стилей, с которой работаем непосредственно мы, так же неявно может присутствовать ещё 2 таблицы стилей, но как минимум 1 такая таблица присутствует точно – это стили, которые использует непосредственно сам браузер. Так вот, это как бы обобщающие стили, и они имеют самый низкий приоритет – то есть изначально браузер использует какие-то свои отступы, шрифт (зависит от операционной системы и браузера), фоновый цвет (по умолчанию белый) и цвет текста (по умолчанию чёрный).
Дальше используется таблица стилей самого пользователя – да, такое нечасто встречается, но тем не менее бывает. Связано это с тем, что есть пользователи, которые плохо видят и им нужна особенная цветовая гамма, которая задаётся конечно же, с помощью CSS. Хотя эта возможность переопределения стилей браузера собственными правилами, может быть полезна даже если у вас хорошее зрение, так как на некоторых сайтах иногда попадается такое ужасное цветовое сочетание, что читать текст практически нереально. Вот к примеру, у меня часто возникает желание сменить стиль, если я вижу на какой-то странице чёрный фон и белый текст - после чтения такой страницы у меня через некоторое время начинает рябить в глазах. Или например другое ужасающее сочетание – жёлтый цвет шрифта на фоне красного. Во всех этих случаях, возможность задать свои собственные стили, переопределив авторские (css подключаемый на странице с помощью тэгов link и style), это разумеется благо.
А дальше уже идёт собственно таблица стилей просматриваемой в данный момент странички (авторская страница) - то есть эта таблица стилей и будет иметь самый высокий приоритет. И тут надо понимать, если мы хотим переопределить и эту страницу своими правилами, то мы должны добавить своим свойствам приставку !important. Тогда браузер сообразит, что наши правила главнее авторских стилей и надо использовать именно их. Делается это так:
p {
color: #000 !important;
background: #FFF !important;
}
Рассмотрим как это работает на примере. Когда мы пишем в браузере какой-нибудь текст, и оборачиваем его в абзац, то как же браузер догадывается о том, каким шрифтом это всё надо отображать?
- В первую очередь браузер смотрит, нету ли правил для абзаца. Таких правил нету. Значит идём вверх.
- За то, каким же шрифтом будет отображаться текст, отвечает правило font-family. Данное правило является наследуемым? Да. Раз так, то можно его поискать в вышестоящих узлах. То есть, если пользователь задаст следующее правило:
body { font-family: "Open Sans"; },то такое правило будет применяться на все нижестоящие элементы.
- Допустим пользователь не создал никакой таблицы стилей. Тогда правила будут браться из пользовательской таблицы стилей.
- Если нету и этих правил, то у браузера есть своя встроенная таблица стилей, в которой определен font-family для тэга body.
Всё это вместе представляет собой некий каскад, потому что стили как бы переливаются из одной таблицы в другую. На этом всё – надеюсь я доступно объяснил о том, как работает наследование. Если будут вопросы, задавайте в комментариях.