Анатомия CSS правила

И так, в предыдущей главе мы использовали класс "Hello, world!" в качестве примера, чтобы мельком взглянуть, насколько просто стилизовать HTML элементы, используя CSS. Но почему он выглядит именно так? В этой главе мы сфокусируемся на анатомии и синтаксисе CSS, чтобы углубить понимание, как он работает. Давайте взглянем на упомянутый ранее пример, котором используется CSS стиль для элемента H1, снова.

h1 {
	color: DeepSkyBlue;
}

Здесь мы видим селектор с одним свойством и одним значением, которые являются основными концепциями CSS, и вам следует постараться запомнить эти названия в процессе изучения этого туториала. В данном примере h1 - это имя селектора, color - свойста и DeepSkyBlue - значение.

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

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

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

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

Форматирование и пробелы в CSS

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

Также некоторые люди предпочитают ставить открывающую фигурную скобку на отдельной линии и пробел перед двоеточием:

h1
{
	color : DeepSkyBlue;
}

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

h1{color : DeepSkyBlue;}

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

Заключение

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

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