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

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

Селектор — указывает на тег, класс или идентификатор к которому применяются стилевые параметры.

Свойство — указывает, какое стилевое свойство применять к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).

Значение — указывает, какие именно значения установить для определенного свойства.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style>
   h1 {
    color:#a6780a;
    font-weight:normal;
   }
   h2 { 
    color: olive;
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body> 
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2> 
 </body>
</html>

Страница будет выглядить так:

Правила применения стилей

1. Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, например:

td { background: blue; }
td { color: red; }
td { border: 1px solid black; }

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

td {
  background: blue; /* Синий цвет фона */
  color: red; /* Красный цвет текста */
  border: 1px solid black; /* Чёрная рамка */
}

2. Значения

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

3. Комментарии

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