Синтаксис CSS
http://belarusweb.net
Основы создания сайтов

Синтаксис CSS

Правила CSS

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

Для размещения правила CSS мы использовали служебный элемент 'style'. При составлении правил используется следующий синтаксис: сперва записывают селектор, который указывает браузеру, на какие элементы будет распространяться данное правило (в нашем случае – это абзацы); затем в фигурных скобках располагают блок объявлений (стиль), состоящий из одного или нескольких объявлений применяемых css-свойств, каждое из которых представляет собой пару 'свойство: значение;', где имя свойства отделяется от значения двоеточием ':', а каждая пара отделяется друг от друга точкой с запятой ';'. Разрешается применять один и тот же стиль сразу для нескольких селекторов, в этом случае селекторы перечисляются через запятую.

Форматирование кода CSS

Также, как и в HTML, браузеры игнорируют большинство пробельных символов в css-коде: символы табуляции, пробелы, разрывы строк, а также подряд идущие их комбинации. Это, опять же, дает нам возможность использовать их по своему усмотрению с целью придания коду удобочитаемого вида. В дальнейшем мы будем записывать код вертикально, применяя пробелы и разрывы строк, как это показано в примере 1.2.

	/* Селекторы перечисляем через запятую */
	/* и для читабельности кода отделяем пробелами. */
	
	em, span, p{
	color: red;			 	/* Каждое объявление свойства */
	font-weight: bold;	 	/* делаем на новой строке. */
	text-align: center;
	padding-right: 10px;	/* Имя css-свойства отделяем от  */
	overflow: hidden;	 	/* его значения еще и пробелом. */
	font-style: italic;
	}
		
	/* Не ленитесь писать комментарии! */

Пример 1.2. Форматирование кода CSS

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

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

Комментарии в CSS начинаются с символов ' /* ' и заканчиваются символами ' */ '. При этом использование одних комментариев внутри других недопустимо.

Использование комментариев в CSS переоценить практически невозможно. Ведь любой программист на собственном опыте знает, что по прошествии определенного времени разобраться даже в собственном коде становится все сложнее. Комментарии же позволяют:

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

В любом случае, комментарии ускоряют как разработку кода, так и его отладку в дальнейшем.

Символы в CSS

Во избежание различного рода конфликтов и ошибок имена классов следует начинать с букв латинского алфавита, после чего можно использовать буквы латинского алфавита, цифры, символы дефиса '-' и знаки подчеркивания '_'.

Что касается регистра символов, то в названиях свойств CSS, а также их значений разрешается использование символов любого регистра. Мы будем писать их в нижнем регистре. Однако следует иметь в виду, что в названиях классов, идентификаторов, шаблонов следует использовать тот же регистр символов, что и в соответствующих html-элементах.