CSS :: Синтаксис
Правила CSS
Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример №1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Синтаксис CSS</title> <!-- Для записи правила CSS воспользуемся элементом «style» --> <style> /*-- Правило указывает браузеру, что он должен использовать для */ /* всех абзацев шрифт красного цвета полужирного начертания */ p{ color: red; font-weight: bold; } </style> </head> <body> <p> Мой текст имеет красный цвет и полужирное начертание. </p> <p> Текст всех абзацев, а не только твой! </p> <div> Ко мне это правило не относится, ведь я же не абзац. </div> </body> </html>
Пример №1. Код страницы, содержащей правило CSS
Для размещения правила CSS мы использовали служебный элемент «style». При составлении правил используется следующий синтаксис: сперва записывают селектор, который указывает браузеру, на какие элементы будет распространяться данное правило (в нашем случае – это абзацы); затем в фигурных скобках располагают блок объявлений (т.е. стиль), состоящий из одного или нескольких объявлений применяемых css-свойств, каждое из которых представляет собой пару свойство: значение;, где имя свойства отделяется от значения двоеточием :, а каждая пара отделяется друг от друга точкой с запятой ;. Разрешается применять один и тот же стиль сразу для нескольких селекторов, в этом случае селекторы перечисляются через запятую.
Форматирование кода CSS
Также, как и в HTML, браузеры игнорируют большинство пробельных символов в css-коде: символы табуляции, пробелы, разрывы строк, а также подряд идущие их комбинации. Это, опять же, дает нам возможность использовать их по своему усмотрению с целью придания коду удобочитаемого вида. В дальнейшем мы будем записывать код вертикально, применяя пробелы и разрывы строк, как это показано в примере №2.
/* Селекторы перечисляем через запятую */ /* и для читабельности кода отделяем пробелами. */ em, span, p{ color: red; /* Каждое объявление свойства */ font-weight: bold; /* делаем на новой строке. */ text-align: center; padding-right: 10px; /* Имя css-свойства отделяем от */ overflow: hidden; /* его значения еще и пробелом. */ font-style: italic; } /* Не ленитесь писать комментарии! */
Пример №2. Форматирование кода CSS
Согласитесь, если бы мы записали даже этот небольшой фрагмент кода CSS без пробелов и в одну строчку, читабельность кода значительно упала бы. Поэтому, как и в случае с кодом HTML, старайтесь придерживаться установленного порядка форматирования кода и, по возможности, снабжайте код комментариями.
Комментарии в CSS
Комментарии в CSS начинаются с символов /* и заканчиваются символами */. При этом использование одних комментариев внутри других недопустимо.
Использование комментариев в CSS переоценить практически невозможно. Ведь любой программист на собственном опыте знает, что по прошествии определенного времени разобраться даже в собственном коде становится все сложнее. Комментарии же позволяют:
- освежить в памяти программиста различные мелкие детали;
- подсказывают, какую задачу решает тот или иной фрагмент кода, в особенности, если код чужой;
- позволяют в случае необходимости временно закомментировать фрагмент кода, например, во время отладки программы;
- играют роль предупреждений, например, о необходимости применения именно данного решения, а не на первый взгляд более очевидного.
В любом случае, комментарии ускоряют как разработку кода, так и его отладку в дальнейшем.
Символы в CSS
Во избежание различного рода конфликтов и ошибок имена классов следует начинать с букв латинского алфавита, после чего можно использовать буквы латинского алфавита, цифры, символы дефиса - и знаки подчеркивания _.
Что касается регистра символов, то в названиях свойств CSS, а также их значений разрешается использование символов любого регистра. Мы будем писать их в нижнем регистре. Однако следует иметь в виду, что в названиях классов, идентификаторов, шаблонов следует использовать тот же регистр символов, что и в соответствующих html-элементах.