Итак, давайте же поговорим о том, из чего вообще состоит CSS.
Анатомия CSS очень простая,
в нем есть две базовых компоненты: это селектор и правила.
Селектор сопоставляет элементы на страницы, HTML-элементы,
которые будут потом стилизованы соответственно правилам.
Селекторов можно использовать несколько, тогда вы их будете писать через запятую.
Правила же — это пара свойство-значение,
что вы меняете и какое значение вы устанавливаете.
Таких пар, таких правил может быть тоже несколько,
тогда каждая из пар разделяется точкой с запятой.
И еще одна из самых немаловажных частей CSS — это комментарии.
Комментарии в CSS пишутся так же, как и в Javascript'е, то есть /* —
это открывает комментарий, */ — закрывает комментарий.
Я хотел бы обратить ваше внимание на то,
на какие вообще символы опирается парсер в CSS.
Важно понимать, что селекторы в CSS разделяются
только с помощью символа «,», только так.
Правила в CSS — это всегда набор каких-то букв,
которые находятся между символом «{» и «}».
Внутри правила пара свойство-значение всегда
разделяются только с помощью символа «:».
И, наконец, сами правила всегда разделяются только с помощью символа «;».
Пока парсер не встретит точку с запятой, он считает,
что правило не закончено, даже если логически вы его как бы закончили.
И, наконец, комментарии — это всегда последовательность символов между
символом «/*» и «*/».
Почему я вообще заострил внимание на том, как работает парсер CSS?
Давайте рассмотрим вот такой вот пример.
Здесь не надо пока что понимать, что конкретно делает каждое правило,
об этом мы поговорим чуть-чуть попозже.
Это абсолютно правильный и корректный CSS-код.
Теперь давайте его немножко видоизменим и удалим, например,
символ «;» после правила color: red.
Что произойдет в данном случае?
Что сделает парсер CSS?
Он не будет додумывать за вас и пытаться проинтерпретировать
следующий код в text-align: center как следующее правило.
Он просто воспримет этот код, как будто бы вы написали значение
свойства color как red text-align: center.
Ну и, соответственно, не будет этой строчки,
вот так будет выглядеть ваш результирующий CSS.
Ну и, конечно же, если вы CSS хоть немножечко знаете,
то вы поймете, что это некорректное правило.
И значение цвета не будет установлено.
Другой распространенный тип ошибок, который очень часто встречается при
написании CSS — это когда вы, например, забываете закрывающую фигурную скобку.
Допустим, рассмотрим тот же самый пример,
но здесь мы забыли закрывающую фигурную скобку вот здесь вот.
Что в данном случае сделает парсер CSS?
Парсер CSS возьмет и проигнорирует все,
что вы написали после забытой закрывающей фигурной скобочки.
То есть итоговый результат, который вы увидите в браузере,
будет наложением вот этих вот стилей.
Важно также помнить, что это правило действует только на файл,
а не на весь CSS и на порядок подключения CSS.
То есть если вы в одном из файлов забыли закрывающую фигурную скобочку,
то именно в этом файле все стили будут проигнорированы.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
