Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Базовый синтаксис CSS

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

Синтаксис CSS для внешних и внутренних стилей

Синтаксис CSS для внешних и внутренних стилей абсолютно одинаков и заключается в использовании следующих параметров:

  1. Селектор — указывает, к каким именно элементам будут применены свойства CSS. Допускается запись нескольких селекторов через запятую. Типы селекторов могут быть разными, о них мы поговорит с вами в дальнейших уроках.
  2. {  } — фигурные скобки. Пишутся сразу после селекторов, все остальное будет указываться внутри них.
  3. Свойства CSS — перечисляются внутри фигурных скобок. В конце каждого свойства ставится двоеточие (:). Именно они определяют, что именно будет изменено у элемента (фон, цвет текста, положение на странице и т.д.).
  4. Значение свойства — указывается после каждого свойства и определяет характер изменений. Каждое свойство имеет свой набор допустимых значений, которые описаны в справочнике по CSS.
  5. ; — точка с запятой. Указывается после значения, служит разделителем между свойствами CSS. После последнего значения свойства (перед закрывающей фигурной скобкой) точку с запятой ставить не обязательно.

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

Общий синтаксис для внешних и внутренних CSS

селектор1, селектор2 { свойство: значение; свойство: значение; }

Пример использования внутренних стилей в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример использования CSS</title>
  <style type="text/css">
   p, div {
    color: green; /* цвет текста */
    font-size: 130%; /* размер шрифта */
   }
  </style>
 </head>
 <body>
  <p>Текст параграфа.</p>
  <div>Блок DIV.</div>
 </body>
</html>

Результат в браузере

Текст параграфа.

Блок DIV.

Синтаксис CSS для встроенных стилей

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

Общий синтаксис для встроенного CSS

<тег style="свойство: значение; свойство: значение">...</тег>

Независимость CSS от способа написания

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

селектор {
свойство: значение;
свойство: значение;
}

Однако, если селектором является класс или идентификатор, то его необходимо указывать в том же регистре, в котором он был объявлен вами в соответствующем атрибуте (class или id).

Способы группирования стилей

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

Первый вариант

p { color: blue; }
p { background: red; }
p { font-size: 130%; }
div { color: blue; }
div { background: red; }
div { font-size: 80%; }

Второй вариант

p {
 color: blue;
 background: red;
 font-size: 130%;
}
div {
 color: blue;
 background: red;
 font-size: 80%;
}

Третий вариант

p, div {
 color: blue;
 background: red;
}
p { font-size: 130%; }
div { font-size: 80%; }

Думаю невооруженным глазом видно, что второй вариант более компактен, чем первый, а третий — чем оба предыдущих. Но в любом случае, как будете поступать вы в той или иной ситуации решать только вам.

Немного о приоритетах стилей

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

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

Первый вариант

p {
 color: blue; /* синий текст */
 color: green; /* зеленый текст */
}

Второй вариант

p { color: blue; }
p { color: green; }

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

Типы устройств← Содержание →Значения и единицы измерения CSS
Учебник CSS