Синтаксис CSS-правил

Синтаксис CSS-правил

Как правильно писать CSS лучше всего разобрать на примере, и напишем свойства для заголовка <h1>. К примеру, нужно, чтобы заголовок был размером в 20px, был оранжевого цвета и располагался по центру.

Пример

Lorem Ipsum

HTML


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Основы CSS</title>
    <link type="text/css" rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
  </body>
</html>

CSS


h1{
    font-size: 20px; /* Размер шрифта */
    color: #ffa500; /* Цвет заголовка */
    text-align: center; /* Текст по центру */
}

Разберем подробнее из чего состоит объявление стиля или CSS-правило.

  • Селекторы определяют то, к каким элементам будут применены стили, указанные в фигурных скобках. На примере это h1.
  • Блок объявлений, который находится после селектора в фигурных скобках.

В блоке объявлений, их может находится множество. Каждое объявление состоит из:

  • Свойства, которое определяет что будет сделано;
  • Двоеточия «:» – разделяют свойство и значение;
  • Значение, которое описывает как браузер должен обработать свойство.
  • Точки с запятой «;» — после значения.

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

By julia