umnsare 
Рис. 4.11. Web-страница с тремя колонками 
В предыдущем совете было рассмотрено, как использовать четыре свойства 
полей для вставки пустого пространства между элементами и краями страницы. 
Кроме того, каскадные списки стилей имеют свойство padding, которое позво- 
ляет задавать ширину поля между элементом и его контейнером. В приведенном 
примере на странице находятся три контейнера — элементы разделов, в каждом 
из которых содержится текст одной колонки. Для вставки пустого пространства 
(поля) между содержимым колонки (текстом) и левым и правым краями контей- 
нера в каждый из трех классов списков стилей (.left, .middle и .right) помес- 
тите следующие объявления: 
padding-left:Юрх; padding-right:Юрх; 
Свойство padding в приведенных выше объявлениях заставляет Web-браузер 
оставить пустое место шириной 10 пикселей между содержимым колонок и ле- 
вым и правым краями контейнера, как показано на рис. 4.12. 
(ПОМИМО СВОЙСТВ padding-left И padding-right Каскадных СПИСКОВ СТИЛеЙ 
для вставки полей между содержимым и верхним и нижним краем контейнера 
МОЖНО ИСПОЛЬЗОВать СВОЙСТВа padding-top И padding-bottom.)

Глава 4. Каскадные списки стилей 201 
вод тексте в колонках - Microsoft Icilernel Ьхрюгег 
Файл Правке. Вид Избранное . Сервис"..прав*у 
Адрес Ш] http.//Hmhrebdesign/ChepterO4/FigureQ4-12.htm 
Вывод текста в колонках 
Колонка 1 Колонка 2 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to present 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page foil 
of text into manageable chunks. 
As a result, visitor is not 
overwhelmed with a screen of 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to present 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page full 
of text into manageable 
chunks. As a result, visitor is 
not overwhelmed with a 
Колонка 3 
You can use the CSS width 
property to layout a Web page 
in newspaper-like columns. A 
newspaper layout works well 
when you must provide a lot of 
text or want to pre s ent 
information on diverse topics 
on a single Web page. The 
visitor feels comfortable 
because the layout is familiarmost 
everyone has read a 
printed newspaper or 
magazine. Moreover, vertical 
columns separate the page full 
of text into manageable chunks. 
As a result, visitor is not 
overwhelmed with a screen of 
Рис. 4.12. Web-страница после вставки полей между контейнером и его содержимым 
Работа с границами 
Web-дизайнеры используют границы для разделения изображений и окружаю- 
щего его текста, для выделения заголовков и другой важной содержащийся на 
странице информации. Свойства border каскадных списков стилей позволяют 
независимо управлять шириной, стилем и цветом каждой стороны границы вок- 
руг объектов. До появления каскадных списков стилей для создания границ вок- 
руг объектов они вставлялись в HTML-таблицы и устанавливался атрибут border, 
который определял ширину границы. К сожалению, далеко не все браузеры под- 
держивают работу со стилями границ. 
ПРАКТИКУМ 
Каскадные списки стилей позволяют рисовать границы вокруг любого объекта 
или контейнера на Web-странице. Так, для рисования границ вокруг изображе- 
ний, заголовков, абзацев, текста, находящегося между дескрипторами  
, Объектов, НаХОДЯЩИХСЯ Между ДеСКрИПТОрамИ , И Т 
А, например, для создания границы вокруг заголовка уровня 1 необходимо напи- 
сать правило списка стилей следующего вида: 
hi {border : solid Зрх black} 
Первое значение свойства border, "solid", задает стиль линии границы, 
второй, "Зрх", устанавливает ширину границы равной 3 пикселя, а третий, 
"black", устанавливает черный цвет границы. При написании правила списка 
стилей, которое устанавливает значения свойства border, Web-браузер применяет 
одни и те же значения для всех четырех сторон границы.

202 Глава 4. Каскадные списки стилей 
Для независимой работы с каждой страной границы необходимо задавать зна- 
чения СКЖЖ border-style, border-width И border-color (ДЩШгЮ ДГИ каж- 
дой стороны. Напри