КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"
УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ
[Главная страница] [HTML/CSS] [Контакты]
Вопросы, касающиеся макетов
9. Раскрашивание и форматирование CSS-разделов
В главе 8 было показано, как раскрашивать ячейки таблицы. Для разделов можно также указывать цвета фона, вместе с парой других атрибутов, касающихся их внешнего вида, которые HTML-таблицы просто не поддерживают. И вновь, как и во всех других случаях при использовании таблиц CSS, обязательно протестируйте свой дизайн на нескольких браузерах перед тем, как загрузить страницу в Интернет. Кто знает, как различные браузеры исказят вашу совершенно правильную CSS-разметку на этот раз.
Если макет, представленный на рисунке 9.1, кажется вам знакомым, то это потому, что вы уже видели нечто похожее на него до этого момента - если быть точными, в главе 5. В коде не используются цвета фона, что подтверждается соответствующим листингом. Как можно увидеть на рисунке 9.2, добавление атрибута backgroundcolor к определению стиля создает больший графический эффект
Листинг 9.1. Просмотр исходного кода для рисунка 9.1.
<div id="logo" style="position:absolute; width:100%; height:100px; top:0px; left:0px;"> Logo </div> <div id="nav" style="position:absolute; width:200px; top:100px; left:0px;"> Nav </div> <div id="links" style="position:absolute; width:175px; top:100px; right:0px;"> Links </div> <div id="content" style="position:absolute; top:100px; left:200px; right:175px"> Content </div>
Рис. 9.1. В этом CSS-макете цвет фона не указывается ни для какого раздела
Рис. 9.2. Этот CSS-макет создает больший графический эффект,
указывая цвета фона в разделах
Logo (Логотип), Nav
(Навигация) и Links (Ссылки)
Листинг 9.2. Просмотр исходного кода для рисунка 9.2.
<div id="logo" style="position:absolute; width:100%; height:100px; top:0px; left:0px; background-color:#99ccff"> Logo </div> <div id="nav" style="position:absolute; width:200px; top:100px; left:0px; background-color:#99ccff"> Nav </div> <div id="links" style="position:absolute; width:150px; top:100px; right:0px; background-color:#99ff99"> Links </div> <div id="content" style="position:absolute; top:100px; left:200px; right:150px"> Content </div>
Как и в случае с ячейками таблицы, цвет фона задается шестнадцатеричным кодом цвета. Обратитесь к главе 8 за списком распространенных цветов и их шестнадцатеричных значений.
Поскольку вы работаете с таблицами CSS, вы не обязаны останавливаться на раскрашивании фона. Так, вокруг раздела Links (Ссылки) можно добавить сплошную черную рамку, как показано на рисунке 9.3.
Рис. 9.3. Только ваши предпочтения и возможности клиентского
браузера по работе
с таблицами CSS могут помешать добавлению рамки вокруг
раздела Links (Ссылки)
 |
Совет Можно определить различный внешний вид верхнего, левого, правого и нижнего сегментов рамки. За подробной информацией обратитесь к таблице 9.1 в конце данной главы. |
Для создания рамки в определение стиля раздела добавляется три новых атрибута:
<div id="links" style="position:absolute; width:175px; top:100px; right:0px; background-color:#99ff99; border-width:4px; border-style:solid; border-color:#000000"> Links </div>
Возможно, вместо сплошной линии вы захотите использовать разрезную пунктирную линию или использовать голубую рамку вместо черной, или использовать более тонкую линию для рамки, как показано на рисунке 9.4.
Рис. 9.4. Выберите другой стиль рамки, и ее внешний вид изенится
Листинг 9.3. Просмотр исходного кода для рисунка 9.4.
<div id="links" style="position:absolute; width:175px; top:100px; right:0px; background-color:#99ff99; border-width:2px; border-style:dashed; border-color:#0000ff"> Links </div>
Возможно, вам не понравится способ плотного прилегания текста к углу раздела. Просто задайте разделу некоторое внутреннее свободное место при помощи атрибута padding, как показано на рисунке 9.5.
Рис. 9.5. Вставьте дополнительное свободное место при помощи атрибута padding
Листинг 9.4. Просмотр исходного кода для рисунка 9.5.
<div id="links" style="position:absolute; width:175px; top:100px; right:0px; background-color:#99ff99; border-width:2px; border-style:dashed; border-color:#0000ff; padding:12px"> Links </div>
|
Совет Как и при работе со стилями рамки, можно сойти с ума, добавляя свободное место и определяя его различные значения для верхней, левой, правой и нижней стороны раздела. Все это собрано в таблице 9.1. |
Элементы раздела можно'заставить исчезнуть, не удаляя при этом их код, как показано на рисунке 9.6.
Рис. 9.6. Куда исчез раздел? Он все еще находится в исходном коде,
однако его атрибут visibility установлен в значение
hidden
Листинг 9.5. Просмотр исходного кода для рисунка 9.6.
<div id="links" style="position:absolute; width:175px; top:100px; right:0px; background-color:#99ff99; border-width:2px; border-style:dashed; border-color:#0000ff; padding:12px; visibility:hidden"> Links </div>
В таблице 9.1 приведены распространенные CSS-атрибуты для форматирования paзделов макета. Помните, что каждый раздел может иметь свой собственный определенный стиль, поэтому таблицы CSS предоставляют гораздо больший диапазон возможностей, чем которые когда-либо предоставляли HTML-таблицы. Повторюсь, что HTML-таблицы являются более устойчивыми, следовательно, начав работу с таблицами CSS, вы приносите в жертву высокую совместимость между браузерами.
| Атрибут | Управляет | Допустимые значения |
|---|---|---|
| background-color | Цветом фона раздела | Шестнадцатиричный код цвета |
| border-сolor | Цветом всех четырех сторон рамки | Шестнадцатиричный код цвета |
| border-сolor-bottom | Цветом нижней стороны рамки | Шестнадцатиричный код цвета |
| border-сolor-left | Цветом левой стороны рамки | Шестнадцатиричный код цвета |
| border-сolor-right | Цветом правой стороны рамки | Шестнадцатиричный код цвета |
| border-сolor-top | Цветом верхней стороны рамки | Шестнадцатиричный код цвета |
| border-style | Типом рамки всех четырех сторон | dashed, dotted, double, groove, inset, outset, ridge, solid |
| border-style-bottom | Типом рамки снизу | ashed, dotted, double, groove, inset, outset, ridge, solid |
| border-style-left | Типом рамки слева | ashed, dotted, double, groove, inset, outset, ridge, solid |
| border-style-right | Типом рамки справа | ashed, dotted, double, groove, inset, outset, ridge, solid |
| border-style-top | Типом рамки сверху | ashed, dotted, double, groove, inset, outset, ridge, solid |
| border-width | Толщиной всех четырех сторон рамки | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| border-width-bottom | Толщиной нижней стороны рамки | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| border-width-left | Толщиной левой стороны рамки | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| border-width-right | Толщиной правой стороны рамки | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| border-width-top | Толщиной верхей стороны рамки | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| padding | Размером свободного места по всем четырем сторонам раздела | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| padding-bottom | Размером свободного места с нижней стороны раздела | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| padding-left | Размером свободного места с левой стороны раздела | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| padding-right | Размером свободного места с правой стороны раздела | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| padding-top | Размером свободного места с верхней стороны раздела | Любые размеры, поддерживаемые таблицами CSS, например: px, cm, in |
| visibility | Отображением или сокрытием раздела | hidden, visible |