Уроки Joomla

Изучение CMS. Работа с компонентами, модулями и плагинами.

Понятие каскада 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; 
  div: 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;
}

Рассмотрим как это работает на примере. Когда мы пишем в браузере какой-нибудь текст, и оборачиваем его в абзац, то как же браузер догадывается о том, каким шрифтом это всё надо отображать?

  1. В первую очередь браузер смотрит, нету ли правил для абзаца. Таких правил нету. Значит идём вверх.
  2. За то, каким же шрифтом будет отображаться текст, отвечает правило font-family. Данное правило является наследуемым? Да. Раз так, то можно его поискать в вышестоящих узлах. То есть, если пользователь задаст следующее правило:
    body {
    font-family: "Open Sans";
    }

    ,то такое правило будет применяться на все нижестоящие элементы.

  3. Допустим пользователь не создал никакой таблицы стилей. Тогда правила будут браться из пользовательской таблицы стилей.
  4. Если нету и этих правил, то у браузера есть своя встроенная таблица стилей, в которой определен font-family для тэга body.

Всё это вместе представляет собой некий каскад, потому что стили как бы переливаются из одной таблицы в другую. На этом всё – надеюсь я доступно объяснил о том, как работает наследование. Если будут вопросы, задавайте в комментариях.