Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента Web-страницы:
margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Этот атрибут стиля ведет себя так же, как его "коллега" padding.
Пример:
H1 { margin: 5mm 0mm }
Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin- right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:
border-spacing: <отступ 1> [<отступ 2>]
Отступы могут быть заданы только в виде абсолютных значений.
— Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.
— Если указаны два значения, первое задаст величину отступа слева и справа, а второе — сверху и снизу.
Атрибут стиля применяется только к таблицам (тегу <TABLE>):
TABLE { border-spacing: 1px }
Здесь мы задали отступы между ячейками таблицы, равные одному пикселу.
ВНИМАНИЕ!
Задавая отступы, внутренние или внешние, нужно помнить, что они увеличивают размеры элемента Web-страницы. Поэтому, если мы применим отступы к блочным контейнерам, формирующим дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.
Также нужно знать, что при применении отступов к элементу Web-страницы с размерами, заданными в виде относительных величин, Web-обозреватель сначала вычисляет абсолютный размер элемента, а потом к нему добавляет величины отступов. Так, если мы зададим ширину контейнера в 100 %, а потом укажем для него отступы, то Web-обозреватель сначала вычислит его абсолютную ширину, основываясь на размерах окна Web-обозревателя, а потом прибавит к ней величину отступов. В результате ширина контейнера станет больше, чем ширина окна Web-обозревателя, и в окне появятся полосы прокрутки. Весьма неприятный сюрприз…
Параметры рамки
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 мы указали толщину рамки у ячеек таблицы, равную одному пикселу.
Листинг 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-обозревателя, иначе заголовок будет выглядеть некрасиво.
— Внешний отступ между контейнерами с полосой навигации (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 }
