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

Результат применения правила из листинга 4.1

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

С другой стороны, «стенографическими» являются и свойства border-style,

border-width и border-color. Так, border-style позволяет кратко записать

значения ДЛЯ СВОЙСТВ border-top-style, border-bottom-style, border-left-

style И border-right-style.

Словом, приведенный выше пример можно переиначить «шиворот-

навыворот»:

истинг 4,2* Вариант оформления линий рамки

hi {

border-style: none none solid solid;

border-width: Opx Opx 3px 15px;

border-color: #c00;

}

Стоит запомнить простое правило, применимое к свойствам, фигурирующим

в этом примере и другим аналогичным.

П Если задано одно значение, то оно применяется ко всем четырем

сторонам.

П Если определено два аргумента, то первый применяется к верхней и

нижней, а второй — к левой и правой сторонам.

П Если в списке фигурирует три значения, то первое используется для

верхней стороны, второе —- для левой и правой, а третье — для нижней

стороны.

П Наконец, если определено четыре значения, то они применяются к каждой

из четырех сторон, начиная с верхней стороны, по часовой стрелке:

второе — к правой стороне, третье — к нижней стороне и четвертое — к

левой стороне.

С Примечание ^

Перспективная версия каскадных листов стилей, CSS3, судя по рабочим

документам, размещенным по адресу www.w3.org/Style/CSS/current-work, будет

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

рамок. Так, в новом стандарте ожидаются свойства, позволяющие описывать

рамки со скругленными углами и произвольными линиями на основе

графических изображений.

Поля и отступы

Свойства padding и margin являются «стенографическими» по отношению к

Наборам СВОЙСТВ padding-top, padding-bottom, padding-left, padding-right И,

Соответственно, margin-top, margin-bottom, margin-left, margin-right.

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

Значениями свойства padding могут являться любые величины, определенные

при помощи линейных единиц измерения, предусмотренных в CSS. Это

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

также выступать величины, заданные в процентах (от ширины содержимого

родительского элемента), а еще ключевое слово auto, предписывающее

использовать значение по умолчанию.

Следующий пример листа стилей иллюстрирует использование свойств

border, padding И margin.

html, body {

margin: Opx;

padding: Opx;

border: Opx;

}

body {

color: #000;

background: #fff;

}

hi {

font: 120% Tahoma, Verdana, Arial, Helvetica, sans-serif;

background: #f0f0f0;

border-style: solid dotted;

border-width: 3px 5px;

border-color: #c00;

padding: 5px 2 Opx;

margin: 2 Opx;

}

P {

margin: Opx 2Opx 2Opx 10Opx;

}

Страница, использующая вышеприведенный лист стилей, при просмотре в

графических браузерах будет выглядеть так, как показано на рис. 4.3.

Здесь следует обратить особое внимание на два момента.

Во-первых, мы принудительно установили нулевые поля и отступы для

элементов . . .

И . . ., ПОСКОЛЬКУ ЭТИ ВеЛИЧИНЫ ИЗНа-

чально не равны нулю, а бесконтрольно «плавают» от браузера к браузеру,

что препятствует точному позиционированию элементов на странице. Более

того, мы перестраховались, провозгласив для контейнеров .. .

и

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

.. . нулевую толщину рамки— браузеры, знаете ли, всякие

встречаются…

I Блочная модель CSS2

| CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее I

I организовать пространство веб-страницы в виде набора прямоугольных областей с I

[ различными свойствами — речь идет о так называемой блочной модели. Подошло время I

| познакомиться с ней лицом к лицу. |

I Блочная модель наличествовала в CSS с самого начала, но в спецификации CSS2 она I

Ё подверглась весьма существенным дополнениям и коррективам I

| f_ . ___ ¦¦ I

I ** Нюансы терминологии «

р Название «блочная модель» не должно вводить в заблуждение — свойства, |

I предопределенные ею, вполне применимы не только к блочным, но и к в нутр и строчным ]

I элементам Путаница возникает исключительно по причине особенностей перевода I

| рекомендаций W3C на русский язык Устоявшемуся русскоязычному названию «блочная I

| модель» в англоязычной терминологии соответствует понятие box model, тогда как I

1 «блочный элемент» в оригинале — это block element. |

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

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

Lfaw» — > — : — :г.:и:Уч^:. . >:.:. .. \..

Рис. 4.3.