Учебник Macromedia Dreamweaver (стр. 75 из 135)

На рис. 10.12 показано уже знакомое нам графическое изображение, выровненное по правому краю. Внизу вы видите текстовый абзац, находящийся в другой горизонтальной позиции. Значения атрибута Clear и у изображения, и у абзаца должны быть установлены в right, иначе ничего не получится.

Рис. 10.12. Графическое изображение и текстовый абзац, размещенные в разных горизонтальных позициях

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

А теперь мы с вами подходим к самому интересному.

Воспользовавшись особыми атрибутами стиля, вы можете задать отступы от границы элемента до содержащегося в нем текста. Это позволит вам обойтись без громоздких таблиц. Посмотрите, например, на рис. 10.13 -там для текста в абзаце заданы сантиметровые отступы слева и справа.

Величины отступов задаются в группе элементов управления Padding. В нее входят раскрывающиеся списки Тор (задает отступ сверху), Right (справа), Bottom (снизу) и Left (слева). Единицы измерения выбираются, как обычно, в раскрывающихся списках, расположенных справа. Учтите, что доступны только абсолютные единицы — процентов нет.

Группа элементов управления Margin аналогична группе Padding хотя бы тем, что в нее также входят раскрывающиеся списки Тор (задает величину отступа сверху), Right (справа), Bottom (снизу) и Left (слева). Однако, в отличие от Padding, списки этой группы задают расстояние между границей элемента и другими элементами страницы. Единицы измерения выбираются также в раскрывающихся списках справа. В отличие от атрибутов группы Padding, здесь доступны относительные единицы измерения — проценты, т. е. вы можете задать отступ как процент от соответствующего размера родителя.

Рис. 10.13. Текст с отступами, заданными атрибутами стилей

Обе этих группы создают на странице свободное пространство. Но, если свободное пространство, полученное с помощью элементов группы Padding. принадлежит текущему элементу страницы, то созданное с помощью группы Margin — не принадлежит ему, а точнее, принадлежит самой странице. Это можно использовать для получения различного рода эффектов, наподобие тех, что изображены на рис. 10.14 и 10.15.

На рис. 10.14 изображен текстовый абзац, расположенный на странице с отступами слева и справа, равными 1 см. Эти отступы были созданы с помощью элементов управления группы Margin. Сравните его с рис. 10.15, где эти же отступы были созданы с помощью группы Padding. (Для вашего удобства для этого абзаца был задан светло-серый фон.) Как видите, в первом случае создаются отступы от границ абзаца до границ родителя (в нашем случае — страницы), т. е. создаваемое свободное пространство не является частью абзаца. Во втором же случае создаваемые отступы находятся внутри абзаца, между его границами и его же содержимым; и свободное пространство, как видите, принадлежит самому абзацу.

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

Рис. 10.14. Текстовый абзац с отступами, созданными с помощью группы атрибутов Margin

Рис. 10.15. Текстовый абзац с отступами, созданными с помощью группы атрибутов Padding

Рис. 10.16. Текстовый абзац с отступами, созданными с помощью групп атрибутов Padding и Margin

Если вы хотите задать одинаковые отступы со всех сторон, то можете включить флажок Same for All, находящийся в соответствующей группе элементов управления. После этого введите нужную величину отступа в комбинированный список Тор (остальные списки станут недоступными). Флажок Same for All включен по умолчанию, т. к. отступы для элемента страницы, как правило, задаются одинаковыми со всех сторон.

Пользуясь атрибутами стиля, задаваемыми на вкладке Box диалогового окна CSS Style Definition (см. рис. 10.10), вы можете в некоторой степени обойтись без таблиц. В частности, если вы используете таблицы для задания отступа или отступов вокруг текста (иначе говоря, просветов), то теперь можете от них отказаться. В самом деле, атрибуты стилей Margin и Padding предпочтительнее, так они как не обладают недостатками, в изобилии присущими таблицам.

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

Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.17.

Рис. 10.17. Вкладка Border диалогового окна CSS Style Definition

Рамка рисуется по воображаемой границе элемента страницы (рис. 10.18). Значит, вы можете задать расстояние от границы до содержимого элемента, используя атрибуты группы Padding. А расстояние от границы до "соседей" этого элемента задается атрибутами Margin. Эти атрибуты задаются на вкладке Box диалогового окна CSS Style Definition (подробнее см. выше).

Рис. 10.18. Рамка вокруг абзаца (фон абзаца для удобства сделан светло-серым)

Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще невидимая. Всего в каждом из этих списков доступны девять пунктов:

· nоnе — рамка отсутствует (поведение по умолчанию);

· dotted — точечная линия;

· dashed — пунктирная линия;

· solid — сплошная линия;

· double — двойная линия;

· groove - "вдавленная" трехмерная линия;

· ridge - "выпуклая" трехмерная линия;

· inset — элемент страницы напоминает выпуклый трехмерный прямоугольник (рис. 10.19);

· outset — элемент страницы напоминает вдавленный трехмерный прямоугольник (рис. 10.20).

Как видите, стандарт CSS предоставляет вам довольно много различных стилей для рамок. Пользуясь ими, вы можете создавать довольно интересные вещи, например, подобие стандартных кнопок Windows. (Забегая вперед, можно отметить, что и вести себя они будут как обычные кнопки, если вы кое-что измените в их коде.)

Толщина рамки задается группой комбинированных списков Width. В эту группу входят списки Тор (задает толщину верхней стороны рамки), Right (правой), Bottom (нижней) и Left (левой). Вы можете ввести в любой из этих списков числовое значение и выбрать в расположенном правее раскрывающемся списке единицу измерения, абсолютную или относительную.

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

· thin — тонкая рамка;

· medium — средняя;

· thick — толстая.

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

Рис. 10.19. Элемент страницы, созданный с использованием стиля рамки inset

Рис. 10.20. Элемент страницы, созданный с использованием стиля рамки outset

С помощью группы селекторов цветов Color задаются цвета каждой из сторон рамки. Если цвет не задан, рамка отображается тем цветом, который задан как цвет текста текущего элемента.

Опять же, если вы хотите задать одинаковые параметры для всех сторон рамки, включите флажок Same for All, находящийся в соответствующей группе элементов управления. После этого задайте нужные параметры в списке или селекторе цвета, которые станут после этого доступными.

Да, рамка обычно делается одинаковой со всех сторон. Но Dreamweaver и таблицы стилей позволяют вам задать различные стили, значения ширины и цвета для каждой стороны рамки отдельно. Вы даже можете убрать какие-то из сторон рамки или вообще оставить только одну сторону. Такой пример показан на рис. 10.21. Здесь мы задали для левой стороны значение thick, а для остальных сторон — 0. Кроме того, мы задали величину отступа Padding слева равной 0,5 см, а с других трех сторон убрали его совсем. Попробуйте сделать так же!

Рис. 10.21. Вертикальная линия слева от текста абзаца

Параметры маркеров списка

Параметры, задающие вид маркеров списка, задаются на вкладке List диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.22.

Как вы помните, HTML предоставляет возможность создания списков, состоящих из множества позиций, помеченных специальными значками — маркерами или цифрами (буквами). В первом случае список называется маркированным, а во втором — нумерованным. Пример маркированного списка вы можете увидеть выше, в описании стилей рамки. Ну а пример нумерованного списка без труда можно найти в этой книге — здесь они используются довольно часто.

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