Параметры рамки
Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition .
Рамка рисуется по воображаемой границе элемента страницы. Значит, вы можете задать расстояние от фаницы до содержимого элемента, используя атрибуты группы Padding . А расстояние от границы до "соседей" этого элемента задается атрибутами Margin . Эти атрибуты задаются на вкладке Box диалогового окна CSS Style Definition (подробнее см. выше).
Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще невидимая. Всего в каждом из этих списков доступны девять пунктов:
none — рамка отсутствует (поведение по умолчанию);
dotted — точечная линия;
dashed — пунктирная линия;
solid — сплошная линия;
double — двойная линия;
groove — "вдавленная" трехмерная линия;
ridge — "выпуклая" трехмерная линия;
inset — элемент страницы напоминает выпуклый трехмерный прямоугольник;
outset — элемент страницы напоминает вдавленный трехмерный прямоугольник.
Как видите, стандарт CSS предоставляет вам довольно много различных лей для рамок. Пользуясь ими, вы можете создавать довольно интересные вещи, например, подобие стандартных кнопок Windows . (Забегая вперед, можно отметить, что и вести себя они будут как обычные кнопки, если коечто измените в их коде.)
Толщина рамки задается группой комбинированных списков Width . В эту группу входят списки Тор (задает толщину верхней стороны рамки), Right (правой), Bottom (нижней) и Left (левой). Вы можете ввести в любой из этих списков числовое значение и выбрать в расположенном правее раскрывающемся списке единицу измерения, абсолютную или относительную.
Кроме того, в этих комбинированных списках доступны три пункта, задающие предопределенные значения толщины рамки:
thin — тонкая рамка;
medium — средняя;
thick — толстая.
Описанным выше способом мы можем создавать линейки, не пользуясь, как раньше, для этой цели таблицами. Как видите, стили — самый радикальный способ преодолеть недостатки таблиц.
С помощью группы селекторов цветов Color задаются цвета каждой из сторон рамки. Если цвет не задан, рамка отображается тем цветом, который как цвет текста текущего элемента.
Опять же, если вы хотите задать одинаковые параметры для всех сторон рамки, включите флажок Same for Аll, находящийся в соответствующей группе элементов управления. После этого задайте нужные параметры в списке или селекторе цвета, которые станут после этого доступными.
Да, рамка обычно делается одинаковой со всех сторон. Но Dreamweaver и таблицы стилей позволяют вам задать различные стили, значения ширины цвета для каждой стороны рамки отдельно. Вы даже можете убрать какието из сторон рамки или вообще оставить только одну сторону.
Параметры маркеров списка
Параметры, задающие вид маркеров списка, задаются на вкладке List диалотового окна
CSS Style Definition .
Как вы помните, HTML предоставляет возможность создания списков, сооящих из множества позиций, помеченных специальными значками — эркерами или цифрами (буквами). В первом случае список называется шркчрованным, а во втором — нумерованным. Пример маркированного списка вы можете увидеть выше, в описании стилей рамки. Ну а пример нуме-ованного списка без труда можно найти в этой книге — здесь они испольтся довольно часто.
HTML предоставляет вам некоторые способы изменить маркер или нумерацию позиций списка. CSS предлагает практически те же возможности.
В раскрывающемся списке Type задается вид маркера или нумерации пози-ций списка. Здесь доступны девять пунктов:
disc — маркер в виде кружка с заполнением (поведение по умолчанию для маркированных списков);
circle — маркер в виде окружности без заполнения;
square — маркер в виде маленького квадратика, с заполнением (на компьютерах Apple Macintosh отображается без заполнения);
decimal — нумерация арабскими цифрами (поведение по умолчанию для нумерованных списков);
lower - roman — нумерация малыми римскими цифрами;
upper - roman — нумерация большими римскими цифрами;
lower - alpha — нумерация малыми латинскими буквами;
upper - alpha — нумерация большими латинскими буквами;
none — нет ни маркера, ни нумерации (поведение по умолчанию для обычных текстовых абзацев).
В поле ввода Bullet Image вводится имя файла графического изображения, которое будет использоваться в качестве маркера. Вы можете ввести его; вручную или щелкнуть кнопку Browse и выбрать нужный файл в диалогов вом окне Select File . Заметьте, что если задан графический маркер, установки атрибута Туре теряют силу.
Раскрывающийся список Position задает местонахождение маркера или нумерации. Здесь доступны два пункта. Если выбран пункт inside , то маркер (нумерация) располагается внутри границ текстового абзаца, т. е. принадлежит ему. Если же выбран пункт outside , то маркер (нумерация) размещается за пределами границ абзаца. Таким образом, если задано значение inside , позиция списка выглядит компактнее, а если outside — текст позиции будет лучше читаться. Значение по умолчанию — outside.
Параметры местонахождения
Вкладку Positioning диалогового окна CSS Style Definition мы рассмотрим позже, когда будем изучать свободно позиционируемые элементы. Сейчас атрибуты, устанавливаемые с ее помощью, нам не пригодятся.
Дополнительные параметры
Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового окна CSS Style Definition .
Группа раскрывающихся списков Page Break пригодится, если вы планируете дать возможность пользователю распечатать вашу Web -страницу на принтере. С помощью списков этой группы вы можете дать команду драйверу принтера выполнить прогон листа до или после печати какого-либо элемен та страницы и продолжить печать с нового листа. Это может быть полезно, если вы хотите предотвратить появление "висячих" строк или если вы разработали хитроумный печатный дизайн, где одни элементы помещаются на левых, а другие — на правых листах (если используется двусторонняя печать). В этом случае воспользуйтесь раскрывающимися списками Before и After , задающими прогон листа соответственно перед и после текущего элемента страницы.
В обоих этих списках доступно по четыре пункта. Поскольку они абсолютно одинаковы и вызывают практически идентичные действия, мы рассмотрим их вместе.
Пункт auto передает управление размещением информации на бумажных листах Web -обозревателю, т. е. сам Web -обозреватель будет размещать элементы страницы на листах, как ему заблагорассудится. Это поведение по умолчанию.
Если вы хотите, чтобы перед текущим элементом страницы или после него принтер начинал печать с нового листа, выберите в соответствующем раскрывающемся списке пункт always . В частности, вы можете установить атрибут Before в always для всех заголовков, т. к. "повисшие" заголовки грубейшая ошибка в полиграфии.
Также вы можете захотеть, чтобы какой-то элемент страницы напечатался только на левой или правой странице, если пользователь использует двустороннюю печать. В этом случае вы должны будете выбрать соответственно пункт left или right раскрывающегося списка. Но учтите при этом, что какая-то страница может остаться вообще пустой.
И еще учтите, что атрибуты управления прогоном листа поддерживаются только достаточно новыми версиями Web -обозревателей.
Группа раскрывающихся списков Visual Effect управляет визуальным представлением текущего элемента страницы. В частности, с ее помощью вы можете применить к элементу такое замечательное нововведение, появившееся в Internet Explorer 4.0, как фильтры и преобразования.
Но сначала обратимся к раскрывающемуся списку Cursor . С его помощью вы можете задать вид курсора мыши, который он примет при наведении на текущий элемент страницы. Это может быть очень забавно.
Все доступные формы курсора мыши перечислены в табл.10.3.
Имейте, однако, в виду, что перед тем, как задавать форму курсора мыши для какихто элементов вашей страницы, подумайте, нужно ли это. Скажем, если при наведении курсора мыши на текст он будет принимать форму песочных часов, пользователь вас, мягко говоря, не поймет. Поэтому сначала уясните, что обозначает та или иная форма курсора. Не от нечего же делать Windows ее меняет!
А вот раскрывающийся список Filter даст в ваши руки неограниченные возможности по созданию графических спецэффектов. Например, вы можете сделать графическое изображение или текст заголовка размытым или заставить его плавно появляться и так же плавно исчезать. Поверьте — это выглядит потрясающе! И задать эти спецэффекты вы сможете с помощью раскрывающегося списка Filter , но... Описание фильтров может растянуться на целую главу — такой это мощный инструмент, поэтому мы не будем описывать их здесь. Если вы заинтересовались фильтрами или преобразованиями, найдите хорошую книжку по CSS или, что еще лучше, обратитесь на сайт Microsoft за нужной документацией.
