CSS syntax

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

Теперь  углубимся в синтаксис CSS и посмотрим, как свойства (properties) и их значения (values) образуют объявления (declarations), наборы объявлений образуют блоки объявлений (declaration blocks), а блоки объявлений вместе с селекторами (selectors) образуют правила CSS (rules CSS ). В завершении рассмотрим комментарии и пробельные символы.

Начальные условия: Базовая литература по компьютерам, наличие основного программного обеспечения (basic software installed), базовые знания о работе с файлами и HTML (Введение в HTML), а также общее представление о том, как работает CSS.
Цель: Подробное изучение синтаксаса CSS.

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

 

Немного словаря

В основе своей CSS состоит из двух блоков:

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

Свойство в паре со значением называют объявлением CSS (CSS declaration). Объявления CSS объединяются в блоки объявлений CSS (CSS Declaration Blocks). И, наконец, блоки объявлений дополняют селекторами (selectors), чтобы создать наборы правил CSS (CSS Rulesets) (или правила CSS).

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

And the CSS file:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

 

Вместе они дают нам следующий результат:

 

Теперь рассмотрим синтаксис более подробно.

 

Объявления CSS

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

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

Важный момент: Если свойство неизвестно или приписанное значение не является допустимым для данного свойства,  то все объявление считается недопустимым и полностью игнорируется движком браузера.

Важный момент: В CSS (как и в других стандартах веб), при неоднозначности стандартом является орфография США (US). Например,  color (как вышеприведенном коде) нужно всегда писать как color - colour не сработает.

Упражнение: просмотрите объявления

В приведенном выше примере есть пять объявлений CSS. Можете отыскать недопустимую и объяснить, что в ней не так?

Блоки объявлений CSS

Объявления объединяют в блоки, окружая каждый набор объявлений фигурными скобками - открывающей ({) и закрывающей (}).

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

Примечание: Блоки иногда могут быть вложенными; в этом случае открывающие и закрывающие скобки должны идти в логическом порядке, аналогично тегам вложенных HTML-элементов. Самый частый пример - это @-правила, представляющие собой блоки, начинающиеся с идентификатора @ - вроде @media, @font-face и подобных им.

Примечание: Блок объявлений может быть пустым - это абсолютно допустимо.

Упражнение: Что такое блок объявлений?

Можете ли вы указать три отдельных блока объявлений в приведенном выше примере?

CSS-селекторы и правила

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

Наборы селекторов могут быть довольно сложными - можно создавать правила, применяющиеся сразу к нескольким элементам, используя в них списки разделенных запятыми селекторов (группу). Кроме того, селекторы можно объединять в цепочки - например, можно сказать 'Я хочу выбрать только те элементы класса "blah", которые вложены в элемент <article>, и только когда на них наведен указатель мыши'.  Не беспокойтесь - немного практики, и все прояснится. О селекторах очень подробно рассказывается в следующий статье - Селекторы.

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

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

Упражнение: Найдите группу селекторов

Можете ли вы найти правило, применяемое к двум разным элементам в нашем примере?

Конструкции CSS

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

  • At-правила (At-rules) используются в CSS для передачи метаданных, условной информации или других описаний. Они начинаются с символа (@), за которым следует идентификатор, указывающий, к какому виду относится это правило, затем некоторый синтаксический блок, заканчивающийся точкой с запятой (;). Каждый тип at-правила, определяемого этим идентификатором, имеет свой собственный синтаксис и семантику. Например:
    • @charset и @import (metadata)
    • @media или @document (условная информация, ее еще называют вложенными конструкциями, подробнее описано ниже.)
    • @font-face (описательная информация)
    Пример:
    @import 'custom.css';
    Данное at-правило импортирует внешний файл CSS в текущий.
  • Вложенные конструкции - это особое подмножество at-правил, синтаксисом которого является вложенный блок CSS-правил, которые будут применятся к документу только при наличии определенного условия:
    • Содержимое правила @media применяется только если устройство, управляющее браузером, соответствует выраженному требованию;
    • Содержимое правила @supports применяется только если браузер действительно поддерживает данную функцию;
    • Содержимое правила @document применяется только если текущая страница удовлетворяет определенным условиям.
    Пример
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    Приведенная выше вложенная конструкция применяет вложенное правило только в том случае, если ширина страницы больше 800 пикселей.

Подробнее об at-правилах/вложенных конструкциях вы узнаете в других частях этого курса.

Вазный момент: Любое выражение, не являющееся набором правил, at-привилом или вложенной конструкцией является недопустимым и, соответственно, игнорируется.

Пишите таблицы стилей так, чтобы их было удобно читать

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

Пробельные символы

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

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

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

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

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

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

С чем в CSS следует соблюдать аккуратность, это с пробелами вокруг  свойств и их значений. Например, такая запись является допустимой:

margin: 0 auto;
padding-left: 10px;

А вот такам - нет:

margin: 0auto;
padding- left: 10px;

Дело в том, что 0auto не распознается в качестве допустимого значения свойства границы (margin), а padding - как допустимое свойство. Необходимо всегда разделять все значения хотя бы одним пробелом, и при этом имена свойств и соответствующие значения должны находиться на одной строке.as a valid property.

Комментарии

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

Комментарии в начинаются с /* и заканчиваются */.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Сокращенная запись

Некоторые свойства, например font, background, padding, border, и margin допускают сокращенную запись,  а именно, позволяют задавать несколько значений свойства одной строкой, что экономит время и делает код более лаконичным.

Например, данная строка:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left. There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

Делает то же самое, что и эти:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

А эта строка:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Делает то же самое, что эти:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

Мы не будем здесь изучать это подробно — позже вам встретится множество примеров на эту тему. Имена свойств, допускающих сокращенную запись, можно найти в Справочнике CSS.

Что дальше

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

Метки документа и участники

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,