Теперь нам нужно указать максимальный либо фиксированный размер содержимого «тела» документа. Как вы наверняка помните, в листинге 2.25 мы добавили к шаблону элемент <div>, обрамляющий все содержимое. Он и будет считаться главным блоком, внутри которого находятся все основные элементы. Таким образом, размер данного блока будет определять максимальный размер остальных элементов.
Листинг 2.30. Определение свойств главного блока
#wrapper { width: 960px; margin: 15px auto; text-align: left;
}
Правило из листинга 2.30 впервые ссылается на элемент по значению его атрибута id. Символ решетки (#) говорит браузеру, что данные стили должны применяться только к элементу, у которого есть атрибут id со значением wrapper.
Это правило содержит три стиля для главного блока. Первый устанавливает фиксированную ширину 960 пикселов. Таким образом, ширина блока всегда будет равна 960 пикселам (ширина современных веб-сайтов чаще всего колеблется между 960 и 980 пикселами, однако значения этого параметра в разные времена могут сильно различаться).
Второй стиль относится к тому, что называется традиционной блочной моделью. В предыдущем правиле (листинг 2.29) мы указали, что содержимое тела документа будет выравниваться по центру, использовав для этого правило text-align: center. Однако это распространяется только на строчное содержимое, такое как текст и изображения. Для блочного содержимого, такого как элементы <div>, необходимо задавать конкретную ширину поля, обеспечивающую автоматическую подгонку под размер родительского элемента. Для этого предназначено свойство margin, поддерживающее четыре значения: ширину верхнего, правого, нижнего и левого полей в указанном порядке. Это означает, что первое указанное значение описывает ширину верхнего поля элемента, второе относится к полю справа и т. д. Однако если записать только первые два параметра, то остальные примут такое же значение. В примере мы делаем именно так. В листинге 2.30 стиль margin: 15px auto задает для верхнего и нижнего полей соответствующего элемента <div> ширину 15 пикселов, а для левого и правого устанавливается автоматическое значение ширины. Таким образом, сверху и снизу тела документа всегда будет оставаться пустое пространство шириной 15 пикселов. В то же время размер пустого пространства справа и слева от этого блока будет рассчитываться автоматически в зависимости от размера тела документа и размера блока <div>. В результате содержимое блока будет выравниваться по центру окна браузера.
Итак, веб-страница выровнена по центру, и для нее установлена фиксированная ширина 960 пикселов. Теперь нужно сделать кое-что для предотвращения проблемы, которая возникает во многих браузерах. Свойство text-align наследуется иерархически. Это означает, что по центру будут выравниваться все элементы, составляющие тело документа, а не только главный блок. Действие данного стиля будет распространяться на всех потомков элемента <body>. Таким образом, необходимо для остального содержимого документа восстановить исходное значение стиля. С этой задачей справляется третье и последнее правило, использованное в листинге 2.30. В результате мы получаем следующую картину: содержимое тела документа выровнено по центру, однако содержимое главного блока (обертки <div>) выровнено по левому краю. Следовательно, остальной код наследует данный стиль и также по умолчанию выравнивается по левому краю.
Если вы еще этого не сделали, скопируйте все приведенные ранее правила в пустой файл под названием mystyles. css.
Этот файл нужно поместить в ту же папку или каталог, где находится HTML-файл с кодом из листинга 2.25. На этом этапе у вас должно быть два файла: файл с кодом HTML и файл mystyles. css, содержащий все стили CSS, которые мы изучили, начиная с листинга 2.26. Откройте HTML-файл в своем браузере, и вы сможете увидеть созданный блок на экране (в большинстве систем, для того чтобы открыть файл, нужно дважды щелкнуть на его названии).
Добавить комментарий