html.okpython.net
HTML и CSS для начинающих

CSS :: Синтаксис

Правила CSS

Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример №1).

HTML Результат 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.

CSS 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-элементах.

Быстрый переход к другим страницам