Основы грамматики CSS

CSS грамматика

Правила CSS состоят из двух основных частей: селектора и одного или нескольких заявлений.

selector {declaration1; declaration2; ... declarationN }

Селектор обычно это HTML-элемент, стиль которого вы хотите изменить.

Каждая декларация состоит из свойства и значения.

Свойство (property) - это стиль属性 (style attribute), который вы хотите установить. У каждого свойства есть значение. Свойство и значение разделены двоеточием.

selector {property: value}

Эта строка кода устанавливает цвет текста элемента h1 в красный и устанавливает размер шрифта в 14 пикселей.

В этом примере, h1 является селектором, color и font-size являются свойствами, red и 14px являются значениями.

h1 {color:red; font-size:14px;}

Ниже приведена иллюстрация структуры этого кода:

CSS грамматика

Совет:Используйте фигурные скобки для окружения деклараций.

Разные записи значений и единицы измерения

Кроме английского слова red, мы можем использовать шестнадцатеричное значение цвета #ff0000:

p { color: #ff0000; }

Чтобы экономить байты, мы можем использовать сокращенную форму CSS:

p { color: #f00; }

Мы можем использовать значения RGB двумя способами:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

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

Не забудьте написать кавычки

Совет:Если значение consists из нескольких слов,则需要 вокруг значения поставить кавычки:

p {font-family: "sans-serif";}

Множественные декларации:

Совет:Если нужно определить больше одной декларации,则需要 с помощью точек с запятой разделить каждую декларацию. Ниже приведен пример того, как определить отступированный абзац с красным текстом. Последнее правило: не нужно добавлять точку с запятой, потому что точка с запятой в английском языке является разделителем, а не символом завершения. Однако, большинство опытных дизайнеров добавляют точку с запятой в конце каждой декларации, что помогает минимизировать ошибки при добавлении или удалении деклараций из существующих правил. Вот так:

p {text-align:center}; color:red;}

Вы должны описывать только один атрибут в строке, чтобы улучшить читаемость определения стиля, как например:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Пробелы и регистр

Большинство таблиц стилей содержат не только одно правило, и большинство правил содержат не только одно объявление. Множественные объявления и использование пробелов делают таблицы стилей легче для редактирования:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Пробелы не влияют на работу CSS в браузере, как и в XHTML, CSS не чувствителен к регистру. Однако есть исключение: если речь идет о работе с HTML-документами, имена классов и id чувствительны к регистру.