Мои книги, видеоуроки, справочники, задачники и тесты по HTML+CSS, PHP, JavaScript+jQuery+AJAX
смотрите на сайте theory.phphtml.net.

Язык CSS

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

Смотрите справочник по CSS3 для более подробной информации. Также вы можете пройти курсы CSS от Sitetech.by.

Селекторы

Основным понятием CSS является селектор. Каждому тегу в HTML соответствует одноименный селектор в CSS. Например, тегу <p> (абзац) будет соответствовать селектор p, а тегу <table> (таблица) - селектор table. Пусть мы хотим, чтобы все абзацы в документе были с текстом зеленого цвета на черном фоне и написаны жирным шрифтом размером 15px (пикселей). Для этого нужно написать:

	p{
		font-weight: bold; /*жирный текст*/
		font-size: 15px; /*размер текста*/
		color: green; /*цвет текста*/
		background-color: black; /*цвет заднего фона*/
	}
		

Если мы теперь скопируем это в блокнот, сохраним с расширением .css и специальным образом подключим к страничке html, то все абзацы в ней станут именно такими. Причем одну таблицу стилей можно подключать к любому количеству страниц. И это очень удобно, так как прописав один раз стили отображения страницы в одном документе, можно теперь просто подключать его к странице, а не переделывать весь труд заново. А если вдруг потребуется внести изменения, то это будет достаточно сделать только в одном месте, а не во всех написаных документах, которых может быть десятки(!).

Позиционирование

Кроме того как нужно отображать элемент страницы, язык CSS позволяет задать, где нужно его отображать. До существования CSS это приходилось делать с помощью HTML тега <table> (таблица). То есть весь сайт представлял собой таблицу, в ячейках которой находились элементы сайта. Это была так называемая табличная верстка. Это было очень неудобно в случае, если макет сайта требовалось переделать. В настоящее время позиционирование очень хорошо реализовано с помощью языка CSS. Делается это с помощью блоков контейнеров ( HTML тег <div> ), поэтому такая верстка называется блочной.

Пример кода

Расположим с помощью CSS контейнер, содержащий логотип сайта (название контейнера: logotip), на 200 пикселей влево от границы сайта и на 300 пикселей вниз:

	#logotip{
		position:absolute; /*тип схемы расположения*/
		left: 200px; /*отсуп слева*/
		top: 300px; /*отступ сверху*/
	}