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

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

на обложку

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

Шрифт:

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

indented { padding-left: 2cm; padding-right: 2cm }

Мы можем привязать такой стиль к абзацу и посмотреть, что получится.

Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

— Если указано одно значение, оно

задаст величину отступа со всех сторон элемента Web-страницы.

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

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

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

Пример:

TD, TH { padding: 2px }

indented { padding: 0cm 2cm 0cm 2cm }

Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

Здесь также доступны абсолютные и относительные значения. Значение auto задает величину отступа по умолчанию, как правило, равное нулю.

Пример:

H1 { margin-top: 5mm }

Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм.

В качестве значений внешних отступов допустимы отрицательные величины:

UL { margin-left: -20px }

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

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

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

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

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

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

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