TML, CSS, СКРИПТЫ: практика создании сайтов

Применение веб-технологий стороны клиента для создания сайтов

Так или иначе, любой элемент HTML в визуальном представлении помимо

непосредственного содержимого может иметь также поля, рамку и отступы

(см. схему, изображенную на рис. 4.1).

Рис. 4.1. «Анатомия» визуально отображаемого элемента

в соответствии с блочной моделью CSS2

Содержимое элемента (в англоязычной терминологии — content) — это

визуальное отображение той полезной информации, которая размечена тегами,

определяющими данный элемент. Например, текст абзаца или графическое

изображение.

Рамка (border) представляет собой видимый контур, для которого можно

определять такие характеристики, как толщина, цвет, тип линии (к примеру,

сплошная или пунктирная).

Поля (padding) отделяют содержимое элемента от рамки. Фон полей

совпадает с фоном, определенным для содержимого.

Наконец, отступы (margin) — это своеобразная «полоса отчуждения»,

характеризующая минимально возможное расстояние от рамки до соседних

элементов или до границ содержимого родительского элемента. Фон отступов

всегда является прозрачным.

В CSS определены одноименные свойства border, padding и margin для

задания характеристик рамки, полей и отступов соответственно. Все эти свойства

являются «стенографическими».

Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 171

Свойства рамок

Свойство border объединяет «под одной крышей» свойства border-style,

border-width и border-color, позволяющие определить тип линии рамки, ее

толщину и цвет соответственно.

Некоторые возможные значения свойства border-style:

? none — рамка отсутствует;

? dotted — точечная линия;

? dashed — пунктирная линия;

О solid — сплошная линия;

? double — двойная линия;

? groove — псевдотрехмерная «вдавленная» линия в виде желобка;

? ridge — псевдотрехмерная «выпуклая» линия в виде конька крыши;

? inset— псевдотрехмерная линия, создающая иллюзию того, что

содержимое элемента «вдавлено» в плоскость страницы;

? outset — псевдотрехмерная линия, создающая впечатление, будто

содержимое элемента «возвышается» над плоскостью страницы.

Следует отметить, что не все браузеры корректно отображают перечисленные

типы рамок. Так, например, браузер IE5 (да и IE6) заменяет прерывистые

рамки на сплошные, а также почти не делает различий между двумя разными

типами «вдавленных» и «выпуклых» рамок.

Значениями свойства border-width могут являться ключевые слова thin

(тонкая рамка), medium (средней толщины) и thick (толстая рамка). Однако точные

величины, соответствующие этим ключевым словам, не оговариваются,

поэтому лучше всего использовать для определения толщины рамки линейные

единицы измерения, определенные в CSS.

Свойство border-color может принимать значения тех же самых типов,

которые возможны для свойства color (см. главу 3).

Нижеследующее правило применяет ко всем заголовкам первого уровня

сплошную рамку зеленого цвета толщиной в один пиксел:

hi {border: solid lpx #090}

Это правило полностью аналогично такому:

hi {

border-style: solid;

border-width: lpx;

border-color: #090;

}

172 Часть II. Применение веб-технологий стороны клиента для создания сайтов

Число и последовательность значений у свойства border, как и у большинства

других «стенографических» свойств, может быть любой.

Обобщенное свойство border не разрешает задавать индивидуальные правила

оформления рамки для каждой из четырех сторон блока, однако это все-таки

МОЖНО сделать, применяя свойства border-top, border-bottom, border-left И

border-right, позволяющие определить стиль оформления соответственно

для верхней, нижней, левой и правой линий рамки.

г •¦• ¦ ¦

[Листинг 4,1, Индивидуальное оформление линий рамки о каждой из четырех

Гсторон

hi {

border-top: none;

border-right: none;

border-left: solid 15px #c00;

border-bottom: solid 3px #c00;

}

Очевидно, что эти свойства, в свою очередь, тоже являются

«стенографическими» — так, например, border-top объединяет свойства border-top-style,

border-top-width И border-top-color.

Результат обработки вышеприведенного фрагмента кода демонстрируется на

рис. 4.2.

|Рамки

Обобщенное свойство border не разрешает задавать

индивидуальные правила оформления рамки для каждой in

| четырех сторон блока, однако это все-таки можно сделать,

применяя свойства border-top, border-bottom, border-left и

| border-right, позволяющие определить стиль оформления

г соответственно для верхней, нижней, левой и правой линий

f рамки.

Рис. 4.2.