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

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick| <толщина>|inherit

Мы можем указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая). В последнем случае реальная толщина рамки зависит от Web-обозревателя. Значение толщины по умолчанию также зависит от Web-обозревателя, поэтому ее всегда лучше устанавливать явно.

В листинге 11.2 мы указали толщину рамки у ячеек таблицы, равную одному пикселу.

Листинг 11.2

TD, TH { border-left-width: thin; border-top-width: thin; border-right-width: thin; border-bottom-width: thin }

А вот стиль, создающий у всех заголовков первого уровня рамку из одной только нижней стороны толщиной 5 пикселов:

H1 { border-bottom-width: 5px }

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

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

border-width: <толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

— Если указано одно значение, оно задаст толщину всех сторон рамки.

— Если указаны два значения, первое задаст толщину верхней и нижней, а второе — левой и правой сторон рамки.

— Если указаны три значения, первое задаст толщину верхней, второе — левой и правой, а третье — нижней сторон рамки.

— Если указаны четыре значения, первое задаст толщину верхней, второе — правой, третье — нижней, а четвертое — левой сторон рамки.

Пример:

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-обозревателя, иначе заголовок будет