Идентификаторы (ID-клaccы)

CSS дает возможность собрать Web-страницу в виде набора блоков, заключенных в имеющие разные размеры и свойства контейнеры div. Каждый такой блок можно представить в виде прямоугольника, кроме содержимого имеющего, конкретно заданные размеры, свойства рамок, полей, отступов.

Классический пример применения идентификаторов состоит в назначении стилей таким блокам. Идентификаторы классов задаются атрибутом id, имена назначаются произвольно, главное, чтобы они были понятны. Все они уникальны, в HTML-коде должен быть только один элемент с конкретным именем id.

Задача 1: Создать макет, состоящий из с шапки (header), горизонтальных меню навигации (menu), области основного содержимого (content), и подвала (footer), занимающий всю ширину Web-страницы.

Макет состоит из div-блоков, каждому из которых, назначен уникальный id:

Это позволяет задать в листе стилей для блока "header" одни правила, для меню "menu" другие, а для подвала "footer" третьи. Браузер, согласно назначенным стилевым правилам, оформит Web-страницу, залив каждый блок своим фоновым цветом, изменив размеры и цвет шрифта и т.п.

После наполнения div-контейнеров содержимым, исходный HTML-код выглядит так: