<< Пред. стр.

стр. 16
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

lightgreen .
Зеленый, светлый #90EE90 #99FF99

seagreen #2E8B57
Зеленый, морской #339966

Индиго indigo #4B0082 #330099

Оранжевый #FF5A00
orange #FF9900

#FFC0CB
pink
Розовый #FFCCCC

#800080
Пурпурный purple #990099

Красный red #FF0000 #FF0000

Красный, темный darkred #8B0000 #990000

#cococo #cccccc
Серебристый silver

#EE82EE
Фиолетовый violet #FF99FF

#FFFFFF
Белый white #FFFFFF

#FFFF00
Желтый yellow #FFFF00

* Цвет с названием darkgray (темно-серый) на самом деле светлее, чем цвет с названи-
ем gray (серый). Вместо него используйте цвет dimgray (тускло-серый).
ГЛАВА24.
Раскрашивание и форматирование
Ш-разделов
В главе 23 было показано, как раскрашивать ячейки таблицы. Для разделов можно так-
же указывать цвета фона, вместе с парой других атрибутов, касающихся их внешнего
вида, которые HTML-таблицы просто не поддерживают. И вновь, как и во всех других
случаях при использовании таблиц CSS, обязательно протестируйте свой дизайн на
нескольких браузерах перед тем, как загрузить страницу в Интернет. Кто знает, как
различные браузеры исказят вашу совершенно правильную CSS-разметку на этот раз.
Если макет, представленный на рисунке 24.1, кажется вам знакомым, то это потому,
что вы уже видели нечто похожее на него до этого момента - если быть точными, в
главе 18. В коде не используются цвета фона, что подтверждается соответствующим
листингом. Как можно увидеть на рисунке 24.2, добавление атрибута background-
color к определению стиля создает больший графический эффект.
Листинг 24.1. Просмотр исходного кода для рисунка 24.1
<div id="logo" s t y l e = " p o s i t i o n : absolute; width: 100%; height:
lOOpx; t o p : Opx; l e f t : 0px;">
Logo



<div id="nav" style="position: absolute; width: 200px; top: lOOpx;
left: 0px;">
Nav



<div id="links" style="position: absolute; width: 175px; top:
lOOpx; right: 0px;">
Links . . .



<div id="content" style="position: absolute; top: lOOpx; left:
200px; right: 175px;">
Content
152 Строим Web-сайты




PMC. 24.1. В этом CSS-макете цвета фона не указываются ни для какого раздела




Рис. 24.2. Этот CSS-макет создает больший графический эффект,
указывая цвета фона в разделах Logo (Логотип), Nav (Навигация) и Links (Ссылки)

Листинг 24.2. Просмотр исходного кода для рисунка 24.2
<div id="logo" s t y l e = " p o s i t i o n : a b s o l u t e ; width: 100%; height
'lOOpx; t o p : Opx; l e f t : Opx; background-color: #99CCFF;">
Logo



<div id="nav" style="position: absolute; width: 200px; top: lOOpx;
left: Opx; background-color: #99CCFF;">
Nav
ГЛАВА 24. Раскрашивание и форматирование CSS-разделов 153

<div id="links" style="position: absolute; width: 175px; top:
ЮОрх; r i g h t : Opx; background-color: #99FF99;">
• Links




<div id="content" style="position: absolute; top: lOOpx; left:
200px; r i g h t : 175px;">
Content



Как и в случае с ячейками таблицы, цвет фона задается шестнадцатеричным кодом
цвета. Обратитесь к главе 23 за списком распространенных цветов и их шестнадцате-
ричных значений.
Поскольку вы работаете с таблицами CSS, вы не обязаны останавливаться на раскра-
шивании фона. Так, вокруг раздела Links (Ссылки) можно добавить сплошную черную
рамку, как показано на рисунке 24.3.




Рис. 24.3. Только ваши предпочтения и возможности клиентского браузера по работе
с таблицами CSS могут помешать добавлению рамки вокруг раздела Links (Ссылки)



Совет
Можно определить различный внешний вид верхнего, левого, право-
го и нижнего сегментов рамки. За подробной информацией обрати-
тесь к таблице 24.1 в конце данной главы.


Для создания рамки в определение стиля раздела добавляется три новых атрибута:
<div id="links" style="position: absolute; width: 175px; top:
154 Строим Web-сайты

ЮОрх; right: Opx; background-color: #99FF99; border-width: 4px;
border-style: solid; border-color: #000000;">
Links


Возможно, вместо сплошной линии вы захотите использовать разрезную пунктирную
линию или использовать голубую рамку вместо черной, или использовать более тон-
кую линию для рамки, как показано на рисунке 24.4.




Рис. 24.4. Выберите другой стиль рамки, и ее внешний вид изменится

Возможно, вам не понравится способ плотного прилегания текста к углу раздела.
Просто задайте разделу некоторое внутреннее свободное место при помощи атрибу-
та p a d d i n g , как показано на рисунке 24.5.
Листинг 24.3. Просмотр исходного кода для рисунка 24.4
<div id="links" style="position: absolute; width: 175px; tcp:
2px;
ЮОрх; right: Opx; background-color: #99FF99; border-width:
border-style: dashed; border-color: #0000FF;">
Links




Листинг 24.4. Просмотр исходного кода для рисунка 24.5
<div id="links" style="position: absolute; width: 175px; tcp:
ЮОрх; right: Opx; background-color: #99FF99; border-width: 2px;
border-style: dashed; border-color: #0000FF; padding: 12px;">
Links
ГЛАВА 24. Раскрашивание и форматирование CSS-разделов 155



Совет
Как и при работе со стилями рамки, можно сойти с ума, добавляя сво-
бодное место и определяя его различные значения для верхней, левой,
правой и нижней стороны раздела. Все это собрано в таблице 24.1.




:
• • ; ' ' ' • . ' • • • . . . • : • • •
т




Рис. 24.5. Вставьте дополнительное свободное место при помощи атрибута padding

И, как вы уже видели (или не видели) в главе 10, на самом деле элементы раздела мож-
но'заставить исчезнуть, не удаляя при этом их код, как показано на рисунке 24.6.




Рис. 24.6. Куда исчез раздел ? Он все еще находится в исходном коде,
однако его атрибут visibility установлен в значение h i dden

Листинг 24.5. Просмотр исходного кода для рисунка 24.6
<div id="links" style="position: absolute; width: 175px; top:
lOOpx; r i g h t : Opx; background-color: #99FF99; border-width: 2px;
Строим Web-сайты
156

border-style: dashed; border-color: #0000FF; padding: 12px; "' visi -
• ,
bility: hidden;">
Links



В таблице 24.1 приведены распространенные CSS-атрибуты для форматирования pau-
дел ов макета. Помните, что каждый раздел может иметь свой собственный опреде-
ленный стиль, поэтому таблицы CSS предоставляют гораздо больший диапазон воз-
можностей, чем которые когда-либо предоставляли HTML-таблицы. Повторюсь, что
HTML-таблицы являются более устойчивыми, следовательно, начав работу с таблица-
ми CSS, вы приносите в жертву высокую совместимость между браузерами.


Часто задаваемые вопросы
Я ненавижу таблицы CSS. Могу ли я добавить свободное прост-
ранство при помощи атрибута cellpadding?
Отчасти. HTML-таблицы имеют атрибут cellpadding, работающий
подобно атрибуту padding таблиц CSS. Однако в HTML-таблице зна-
чение атрибута cellpadding применяется ко всем ячейкам таблицы.
Если вы хотите добавить свободное место в одной ячейке, но не добав-
лять в другой, у вас ничего не получится. В таблицах CSS каждый раз-
дел может иметь своё собственное значение атрибута paddi ng.


Табл. 24.1. Распространенные CSS-атрибуты
для форматирования разделов макета

Атрибут Управляет Допустимые Пример
значения*
background- Цветом фона раз- Шестнадцатеричный код background-
color дела цвета c o l o r : #FFCC0C
Цветом всех четы- Шестнадцатеричный код b o r d e r - c o l o r -
border-color
рех сторон рамки цвета t o p : #000000;
Шестнадцатеричный код border-color-
border-color- Цветом нижней
bottom: #00000:
цвета
b o t t o m ,• стороны рамки
border-color- Цветом левой Шестнадцатеричный код border-color-
left left: #000000;
цвета
стороны рамки
border-color- Цветом правой Шестнадцатеричный код b o r d e r - c o l o r -
right цвета
стороны рамки r i g h t : #00000С'
Шестнадцатеричный код border-color-
border-color- Цветом верхней
top стороны рамки top: #000000;
цвета
border-style border-style:
Типом рамки всех dashed, dotted, double,
groove, inset, outset, ridge, dashed;
четырех сторон
solid
border-style- Типом рамки border-style-
dashed, dotted, double,
bottom groove, inset, outset, ridge, bottom: dotted;
снизу
solid
157
ГЛАВА 24. Раскрашивание и форматирование CSS-разделов

Атрибут Управляет Допустимые Пример
значения*
border- border-style-
Типом рамки dashed, dotted, double,
style- groove, inset, outset, ridge, left: double;
с левой стороны
left solid
border- border-style-
Типом рамки с правой dashed, dotted, double,
style- стороны groove, inset, outset, ridge, right : groove;
right solid
border- border-style-
Типом рамки сверху dashed, dotted, double,
groove, inset, outset, ridge, top: inset;
style-top
solid
border- Любые размеры, поддер- border-width:
Толщиной всех четы-
width живаемые таблицами CSS, 4px;
рех сторон рамки
например: рх, cm или in
border- Толщиной нижней сто- Любые размеры, поддер- border-width-
width- живаемые таблицами CSS, bottom: 0.03cm;
роны рамки
bottom например: рх, cm или in
border- Любые размеры, поддер- border-width-
Толщиной левой сто-
width- живаемые таблицами CSS, left: 0.03in;
роны рамки
left ' например: рх, cm или in
border- Толщиной правой сто- Любые размеры, поддер- border-width"-
width- живаемые таблицами CSS, right: 4px;
роны рамки
right например: рх, cm или in
Любые размеры, поддер- border-width-
border- Толщиной верхней
живаемые таблицами CSS, top: 0.03 in;
width-top стороны
например: рх, cm или in
рамки
Любые размеры, поддер- padding: 12px;
padding Размером свободного
живаемые таблицами CSS,
места по всем четы-
например: рх, cm или in
рем сторонам раздела
Любые размеры, поддер- padding-bottom:
padding- Количеством свобод-
живаемые таблицами CSS, 0.33cm;
bottom ного места снизу раз-
дела например: рх, cm или in
Размером свободного Любые размеры, поддер- padding-left:
padding-
места с левой стороны живаемые таблицами CSS, 0.33in;-
left
например: рх, cm или in
раздела
Любые размеры, поддер- padding-right:
padding- Размером свободного
живаемые таблицами CSS, 12px;
right места с правой сторо-
ны раздела например: рх, cm или in
Любые размеры, поддер- padding-top:
padding- Размером свободного
живаемые таблицами CSS, 0.33cm;
top места сверху раздела
например: рх, cm или in.
visibili- v i s i b i l i t y : hid-
Отображением или hidden, visible
den;
сокрытием раздела
ty
Некоторые браузеры могут поддерживать другие значения, помимо перечислен-
ных, а некоторые браузеры могут не поддерживать даже приведенные значения.
ГЛАВА 25.
Управление пространством дизайна
в языке HTML
По умолчанию Web-браузеры добавляют некоторое дополнительное пространство
между интерфейсом браузера и началом страницы. Это удобно, когда у вас есть
Web-страница, на которой расположен только текст, однако на множество типов ди-
зайна - особенно на текучие макеты - дополнительное пространство плохо влияет.

Часто задаваемые вопросы
ЧТО произойдет со значениями, которые браузер не понимает?
Браузеры IE и Netscape игнорируют атрибуты, которые они не пони-
мают, поэтому, вообще говоря, вы не создадите проблем с совмес-
тимостью, установив все четыре атрибута.


Добавление дополнительного пространства можно отключить, установив значения
пары атрибутов тега body в 0. От браузера зависит, какие атрибуты использовать. Для
браузера Internet Explorer соответствующими атрибутами являются leftmargin и
topmargin:
<body leftmargin="0" topmargin="0">
Для браузеров Netscape такими атрибутами являются marginwidth и marginheigh;:
<body marginwidth="O" marginheight="O">
Если вы находчивы, то используете все четыре атрибута:
<body leftmargin="0" topmargin="0" marginwidth="O" margin-
height="0">
С другой стороны, можно наоборот создавать дополнительное пространство, устанав-
ливая эти атрибуты в ненулевые значения. Атрибуты leftmargin и topmargin в бра-
узере IE управляют размером пространства слева и сверху окна браузера, соответ-
ственно, но ничего не делают справа и снизу, в то время, как атрибут marginwidth
браузера Netscape обеспечивает равные пространства слева и справа, а атрибут mar-
ginheight - сверху и снизу.
Помните, что браузер IE не понимает атрибуты браузера Netscape, и наоборот, поэто-
му нельзя получить дополнительное правое поле, установив значение атрибута mar-
ginwidth в браузере IE. Подобным образом нельзя оказать влияние на левую сторону
окна браузера, всего лишь установив значение атрибута leftmargin в браузере
Netscape.
Для большего уровня управления полями, попытайтесь использовать таблицы CSS
вместо языка HTML (обратитесь к главе 26).
ГААВА26.
Управление пространством дизайна
при помощи таблиц CSS
Как ВИДНО из главы 25, язык HTML предоставляет несколько атрибутов тега body для
управления стандартными значениями пространства в окне браузера, однако эти ат-
рибуты являются частными - они работают только в определенных браузерах. Браузе-
ры полностью игнорируют атрибуты, которые они не понимают.
Вы получаете большее управление над полями мри использовании каскадных таблиц
стилей (CSS). Просто определите стиль для тега body на странице, наподобие следу-
ющей строки кода:

<body style="margin: Opx;">
Эта строка кода устанавливает все четыре поля - верхнее, левое, правое и нижнее - в
О пикселов, тем самым исключая использование на странице любых пространств со
значениями по умолчанию.

Совет
Ирония заключается том, вам нужно следить за управлением полями
при помощи таблиц CSS, когда страница включает CSS-макеты. Сим-
патия к пространству полей может сбить положения ваших разделов.
Вам может понадобиться откорректировать значения их позиций
(слева, сверху, справа и снизу) после установки полей.

Таблицы CSS не ограничиваются только этим. При помощи атрибутов margin-top,
margin-left, margin-right и margin-bottom можно легко определить различ-
ные размеры пространств для различных полей. Макет, представленный на рисунке
26.1, имеет верхнее поле, равное 200 пикселам, левое поле, равное 300 пикселам, пра-
вое поле, равное 400 пикселам, и нижнее поле, равное 100 пикселам.
Листинг 26.1. Просмотр исходного кода для рисунка 26.1 '
<body style="margin-top: 200px; m a r g i n - l e f t : ЗООрх; margin-right:

<< Пред. стр.

стр. 16
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>