10. CSS

Параметры фона

Параметры фона элемента страницы задаются на вкладке Background диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.8.

Селектор цветов Background Color задает цвет фона. Значение по умолчанию зависит от браузера.

В комбинированном списке Background Image задается графическое изображение, которое будет использоваться в качестве графического фона страницы. Вы можете ввести имя нужного файла или выбрать пункт попе, убирающий графический фон. Если вы не хотите вводить имя файла вручную, щелкните кнопку Browse и выберите нужный файл в диалоговом окне Select File.

Обычно графическое изображение, использующееся в качестве фона, значительно меньше в размерах, чем сама страница. В этом случае Web-обозреватель многократно повторяет это изображение, выкладывая своего рода "мозаику", занимающую всю страницу. Управлять тем, как будет повторяться это изображение, можно с помощью раскрывающегося списка Repeat. Здесь доступны четыре пункта:

• no-repeat — отключает повторение. Изображение помещается на страницу всего один раз, в левом верхнем углу элемента;
• repeat — включает повторение изображения по горизонтали и вертикали (поведение по умолчанию);
• repeat-x — включает повторение изображения только по горизонтали;
• repeat-y — устанавливает повторение изображения только по вертикали.

Когда вы прокручиваете содержимое окна Web-обозревателя, то вместе с содержимым Web-страницы прокручивается и графический фон, если он есть. Некоторые Web-обозреватели поддерживают одну забавную возможность: можно запретить прокрутку графического фона, зафиксировав его на месте. Это может придать странице некоторую оригинальность, однако при прокрутке отнимет больше ресурсов компьютера. И сделать это можно с помощью раскрывающегося списка Attachment. Пункт scroll этого списка заставляет графический фон прокручиваться (поведение по умолчанию), a fixed — фиксирует его на месте.

Также некоторые Web-обозреватели позволяют вам поместить графический фон в нужное место страницы. Для этого предназначены раскрывающиеся списки Horizontal Position и Vertical Position. Вы можете ввести в них числовые значения соответственно горизонтальной и вертикальной координат графического фона. В раскрывающихся списках, расположенных правее, выбирается одна из единиц измерения, поддерживаемых CSS.

Кроме того, в раскрывающемся списке Horizontal Position доступны три пункта:

• left — выравнивание графического фона по левому краю элемента страницы (поведение по умолчанию);
• center — выравнивание по центру;
• right — выравнивание по правому краю.

В раскрывающемся списке Vertical Position доступны также три пункта:

• top — выравнивание графического фона по верху элемента страницы (поведение по умолчанию);
• center — выравнивание по центру;
• bottom — выравнивание по низу.

Очевидно, что задавать эти параметры нужно, предварительно задав соответствующие параметры других атрибутов стиля, перечисленных на вкладке Background. А для достижения необходимого результата наверняка придется поэкспериментировать.

Параметры абзаца

Параметры текстового абзаца задаются на вкладке Block диалогового окна CSS Style Definition. Здесь же задаются параметры, применяемые к нетекстовым элементам страницы, таким как графические изображения и таблицы. Эта вкладка показана на рис. 10.9.

В комбинированном списке Word Spacing задается величина дополнительного пространства, помещаемого между словами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка Word Spacing убирает дополнительное расстояние между словами текста.

В комбинированном списке Letter Spacing задается величина дополнительного пространства, помещаемого между символами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка убирает дополнительное расстояние между символами текста.

Комбинированный список Vertical Alignment задает вертикальное выравнивание элемента страницы относительно родителя. Здесь доступны следующие пункты:

• baseline — выравнивание базовой линии элемента страницы по базовой линии текста родителя (поведение по умолчанию);
• sub — помещает текст ниже остального текста, имитируя нижний индекс;
• super — помещает текст выше остального текста, имитируя верхний индекс;
• top — выравнивание элемента страницы по верхнему краю родительского элемента;
• text-top — выравнивает верхний край элемента страницы по верхнему краю текста родителя;
• middle — помещает середину элемента страницы на половину высоты шрифта выше базовой линии текста родителя;
• bottom — выравнивание элемента страницы по нижнему краю родительского элемента:
• text-bottom — выравнивает нижний край элемента страницы по нижнему краю текста родителя.

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

Как бы то ни было, для того чтобы получить в окне Web-обозревателя необходимый результат, вам придется поэкспериментировать с разными значениями этого атрибута. Рассказать, как будет выглядеть тот или иной элемент страницы при том или ином значении, невозможно — его нужно видеть своими глазами. (Это, впрочем, справедливо и для многих других параметров элементов страниц, задаваемых в Dreamweaver.)

Раскрывающийся список Text Align задает горизонтальное выравнивание текста в абзаце. Здесь доступны четыре пункта:

• left — выравнивание по левому краю (поведение по умолчанию);
• center — по центру;
• right — по правому краю;
• justify — по ширине.

В поле ввода Text Indent задается величина отступа красной строки. Эта величина может быть как положительной, так и отрицательной (выступ). В раскрывающемся списке, расположенном правее, выбирается единица измерения.

В раскрывающемся списке Whitespace задается поведение пробелов внутри текста абзаца. Здесь доступны три пункта:

• normal — задает обычное отображение текста, т. е. Web-обозреватель может переносить строки по пробелам, если они (строки) не будут помещаться в родительском элементе;
• рrе — превращает текст абзаца в фиксированно отформатированный. Как вы помните из главы 5, такой текст отображается так, как он введен в исходном HTML-коде, с учетом пробелов, возвратов каретки и т. п. Одним словом, текст ведет себя так, словно заключен внутрь тега <PRE>;
• nowrap — запрещает перенос текста по пробелам. Вам будет необходимо поставить в нужные места строк теги разрыва текста <BR>, если вы хоти те, чтобы они все-таки переносились. Это может быть полезно, если вы захотите контролировать, как текст будет переноситься на другую строку.

Раскрывающийся список Display задает поведение элемента страницы. В нем доступно очень много пунктов:

• none— элемент вообще не будет присутствовать на странице, словно он и не задан в ее коде;
• inline — элемент страницы ведет себя как отдельный символ текста (встроенный элемент);
• block — элемент страницы ведет себя как абзац текста (блочный элемент);
• list-item — элемент страницы ведет себя как пункт списка;
• run-in — встраивающийся элемент. Если за таким элементом идет блочный элемент, он становится первым символом блочного элемента, в противном случае он сам становится блочным элементом;
• compact — компактный элемент. Если за таким элементом идет блочный элемент, он форматируется как однострочный встроенный элемент и помещается на левой границе блочного элемента (если эта граница задана). В противном случае он сам форматируется как блочный элемент;
• marker — маркер списка;
• table — таблица;
• inline-table — таблица, отформатированная как встроенный элемент;
• table-row-group — строки секции тела таблицы;
• table-header-group — строки секции заголовка таблицы;
• table-footer-group — строки секции "поддона" таблицы;
• table-row — строка таблицы;
• table-column-group — группа колонок таблицы;
• table-column — колонка таблицы;
• table-cell — ячейка таблицы;
• table-caption — заголовок таблицы

dreamweaver - содержание учебника