[css — определение блоков]материал подготовил: Дмитрий Турецкий 02.04.2004
Любую веб-страницу можно достаточно легко разбить на отдельные элементы — логотип, меню, содержание и так далее. Но если заглянуть в код, то вместо этой логичной структуры мы, скорее всего, увидим жуткую мешанину из таблиц, которые на сегодняшний день являются основным методом HTML-верстки.
Вообще HTML очень плохо приспособлен для решения дизайнерских задач — практически единственным средством структурирования документа являются таблицы, которые и взяты на вооружение всеми веб-разработчиками. Благодаря этой распространенности табличная верстка очень хорошо исследована и проработана — в Сети без больших проблем можно найти множество статей, рассказывающих о том, как с помощью таблиц добиться того или иного эффекта. Более того, производители браузеров тоже учитывают этот момент — если в первых версиях таблицы выводились на экран только после полного их получения, то сейчас они выводятся по мере поступления данных, даже если это приводит к некоторому «прыганью» изображения на экране.
Недостатков у табличной верстки тоже хватает — многочисленные вложенные таблицы значительно увеличивают размер документа, да и читать или править его становится весьма сложно — порядок следования данных не соответствует логике документа. Поэтому средства форматирования, представленные в CSS, вызывают большой интерес — вдруг получится упростить разработку документов?
Для начала давайте разберемся с определением блоков, а потом займемся их позиционированием. Блок состоит из содержания, «окруженного» отступами (padding), которые, в свою очередь, окружены рамкой (border), а вокруг нее находятся поля (margin). По умолчанию ширины рамок, полей и отступов равны нулю.
Есть два способа определения полей, рамок и отступов. Можно указывать их по отдельности для каждой из сторон блока, а можно записать все параметры в одну строчку, что несколько уменьшает наглядность (для тех, кто мало знаком с CSS), зато заметно сокращает место. Например, определение
Если бы все поля были равны, то можно было оставить только одно значение. Общее правило при записи в одну строчку заключается в том, что сначала идет значение для верхней стороны, потом для правой, нижней и левой. Если какое-то значение отсутствует, то берется значение противоположной стороны, а если указано только одно значение, то оно применяется ко всем сторонам.
С рамкой чуть-чуть сложнее — там, кроме ширины, еще можно указать цвет и стиль. То есть, помимо описания border или border-top, можно использовать border-top-width, border-top-color и border-top-style. А можно отдельно указать цвет, размер или стиль рамки с помощью border-color, border-width и border-style соответственно. Порядок при сокращенной записи следующий: сначала указывается ширина рамки, затем ее стиль, а затем цвет (хотя современные браузеры понимают любой порядок). Стили могут быть следующие: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Однако, в отличие от описаний полей и рамок, в описании border нельзя указывать разные значения для разных сторон — для этого придется использовать «детальные» описания. Таким образом, описание
создаст рамку вокруг блока, у которой снизу будет двойная линия, а с остальных сторон — точечная. Обратите внимание на указание цвета в описании border-bottom: казалось бы, что цвет можно и не задавать (он уже задан в описании border), но цвет рамки наследуется от свойства color блока, и если его не задать, то цвет рамки окажется черным.
При создании рамок есть несколько моментов, на которых часто «спотыкаются» начинающие. В случае двойной (double) рамки обе линии и промежуток между ними являются шириной рамки. Если вы зададите ширину, например, в 1 пиксель, то с удивлением обнаружите, что рамки вообще нет… В случае «трехмерных» рамок (groove, ridge, inset, outset) они рисуются тем цветом, который используется для выв
