HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Пример:

TD, TH { border-width: thin }

Атрибуты стиля border-left-color, border-top-color, border-right-color и border- bottom-color задают цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|inherit

Значение transparent задает "прозрачный" цвет, сквозь который будет "просвечивать" фон родительского элемента.

ВНИМАНИЕ!

Цвет

рамки всегда следует задавать явно — в противном случае она может быть не нарисована.

Пример:

H1 { border-bottom-width: 5px border-bottom-color: red }

Атрибут стиля border-color позволяет указать цвет сразу для всех сторон рамки:

border-color: <цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Он ведет себя так же, как и аналогичный атрибут стиля border-width:

TD, TH { border-width: thin; border-color: black }

Атрибуты стиля border-left-style, border-top-style, border-right-style и border- bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Здесь доступны следующие значения:

— none и hidden — рамка отсутствует (обычное поведение);

— dotted — пунктирная линия; dashed — штриховая линия; solid — сплошная линия; double — двойная линия;

— groove — "вдавленная" трехмерная линия; ridge — "выпуклая" трехмерная линия; inset — трехмерная "выпуклость";

— outset — трехмерное "углубление".

Пример:

H1 { border-bottom-width: 5px border-bottom-color: red border-bottom-style: double }

Атрибут стиля border-style позволяет указать стиль сразу для всех сторон рамки:

border-style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Он ведет себя так же, как и аналогичные атрибуты стиля border-width и border- color.

Пример:

TD, TH { border-width: thin; border-color: black; border-style: dotted }

Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки:

border-left|border-top|border-right|border-bottom: <толщина> <стиль> <цвет> | inherit

Во многих случаях эти атрибуты стиля оказываются предпочтительнее:

H1 { border-bottom: 5px double red }

"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:

border: <толщина> <стиль> <цвет> | inherit

TD, TH { border: thin dotted black }

ВНИМАНИЕ!

Рамки

также увеличивают размеры элемента Web-страницы. Поэтому, если мы создадим рамки у блочных контейнеров, формирующих дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.

Представление для нашего Web-сайта, часть 6

Что ж, отступы и рамки мы создавать научились. По крайней мере, теоретически. Настала пора применить полученные знания на практике.

Прежде всего, сделаем отступы между контейнерами, формирующими дизайн наших Web-страниц, и между границами этих контейнеров и их содержимым.

— Внешний отступ между краями окна Web-обозревателя и содержимым Web- страницы равен нулю. Пусть пространство в окне Web-обозревателя используется максимально полно.

НА ЗАМЕТКУ

По умолчанию каждый Web-обозреватель создает свои отступы между краями своего окна и содержимым Web-страницы.

— Внутренние отступы в контейнере с заголовком Web-сайта (cheader) слева и справа — по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web-обозревателя, иначе заголовок будет выглядеть некрасиво.

— Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) — 10 пикселов.

— Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон — по 5 пикселов.

— Внутренний отступ у контейнера с основным содержимым (cmain) сверху — 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.

— Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа — по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web-обозревателя.

Приведенные значения отступов получены автором в результате экспериментов. Вы можете задать другие.

Теперь разделим все четыре контейнера рамками.

— Контейнер cheader получит рамку с одной нижней стороной.

— Контейнер cmain — рамку с одной левой стороной.

— Контейнер ccopyright — рамку с одной верхней стороной.

Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло-синий).

В листинге 11.3 приведен исправленный фрагмент CSS-кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.

Листинг 11.3

BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px }

.

#cheader { width: 1010px; padding: 0 20px; border-bottom: thin dotted #B1BEC6 }

#cnavbar { width: 250px; height: 570px; float: left; margin-right: 10px }

#cmain { width: 760px; height: 570px; float: left; overflow: auto; padding: 5px; border-left: thin dotted #B1BEC6 }

#ccopyright { width: 1010px; clear: both; padding: 10px 20px 0px 20px; border-top: thin dotted #B1BEC6 }