Синтаксис CSS

Синтаксис CSS состоит из 3 частей: селектор, свойство и значение

Код синтаксиса CSS

css

selector {
  property: value;
}

Селектор — это HTML-элемент, который вы хотите стилизовать. Это может быть любой тег, например <h1>, <p> и т. д. Каждый селектор может иметь одно или несколько свойств.

Свойство — это атрибут стиля HTML-тега. Свойства CSS похожи на атрибуты HTML, но используются специально для стилизации (color, border и т. д.). У каждого свойства есть своё значение.

Значение присваивается свойству. Например, значение свойства color может быть либо red, либо #F1F1F1.

Пример синтаксиса CSS:

Пример синтаксиса CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Try it Yourself »

Результат

CSS Syntax

В приведённом выше примере тег <a> является селектором, color — свойством, а #1c87c9 — значением свойства.

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

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

Комментарии в CSS

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

Начало и конец комментария в CSS обозначаются символами /* и */ соответственно:

Пример комментариев в CSS

css

/*This is some comment*/

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

Пример комментариев в CSS:

Примеры комментариев в CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Практика

Какой из следующих вариантов описывает правильный синтаксис CSS?

CSS-объявление состоит из свойства и его значения, разделённых двоеточием.CSS-блок заключён в квадратные скобки.Свойства и значения в CSS-объявлении разделены точкой с запятой.CSS-правила состоят из селектора, за которым следует блок объявлений в фигурных скобках.CSS-правила состоят из селектора, за которым следует блок объявлений в круглых скобках.

Синтаксис CSS ​

Пример синтаксиса CSS: ​

Результат ​

Комментарии в CSS ​