CSS :: Синтаксис
Правила CSS
Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример №1).
htmlCodes
<!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.
htmlCodes
/* Селекторы перечисляем через запятую */
/* и для читабельности кода отделяем пробелами. */
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-элементах.