Параметры рамки


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

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

border-left-width|border-top-width|border-right-width|

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

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

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

Толщина рамки

А вот стиль, создающий у всех заголовков первого уровня рамку из одной только нижней стороны толщиной 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-сайта

Сделаем отступы между контейнерами, формирующими дизайн наших 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, реализующий выбранные нами параметры отступов и рамок.

Параметры рамки

Давайте разберем его.

Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега <BODY> и дали ему значение 0 пикселов:

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

В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:

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

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

В именованном стиле cnavbar мы указали внешний отступ справа 10 пикселов — он визуально отделит контейнер cnavbar от контейнера cmain:

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

В именованном стиле cmain мы задали внутренние отступы и рамку с одной левой стороной — она отделит контейнер cmain от контейнера cnavbar:

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

В именованном стиле ccopyright мы задаем отступы слева и справа по 20 пикселов, а сверху — 10 пикселов. Кроме того, мы создаем рамку с одной верхней стороной, которая отделит контейнер ccopyright от вышерасположенных "соседей":

#ccopyright { width: 1010px;
clear: both;

padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }

Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.

Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и заодно заключим каждую из них в рамки.

Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки — пункты данного списка.

Вот необходимые изменения:

- Список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство слева, которое смотрится некрасиво.

- Внешние отступы у пунктов списка сверху и снизу — 10 пикселов. Так мы отделим гиперссылки друг от друга.

- Рамка пунктов списка — тонкая, сплошная, цвет #B1BEC6.

- Внутренние отступы пунктов списка: сверху и снизу — по 5 пикселов, слева и справа — по 10 пикселов. Так мы отделим текст пунктов от рамок.

Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).

Рамка пунктов списка

Рассмотрим их подробнее.

В именованный стиль navbar, привязанный к тегу списка, который формирует полосу навигации, мы добавили отступ слева, равный –30 пикселов. Благодаря этому список сместится влево, заполняя пустое пространство:

#navbar { font-family: Arial, sans-serif;
font-size: 14pt;

text-transform: uppercase;
list-style-type: none;
margin-left: -30px }

Вновь созданный комбинированный стиль создаст у пунктов списка, формирующего полосу навигации, рамку и задаст соответствующие отступы:

#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6 }

Сохраним исправленную таблицу стилей и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу <F5>. Стало значительно лучше, не так ли (рис. 11.1)?

Параметры рамки