Диалоговое окно "Построитель стилей", страница "Макет"

Статья
11/05/2008

Обновлен: Ноябрь 2007

Страница Макет диалогового окна Построитель стилей позволяет определить атрибуты макета страницы таблицы каскадных стилей (CSS). Атрибуты макета страницы определяют расположение элементов в потоке HTML. Эти атрибуты можно применять непосредственно к элементам HTML, либо же их можно добавить к правилам стилей CSS.

Применение атрибутов макета непосредственно к элементам HTML на странице

Откройте документ HTML в конструкторе HTML в режиме разработки и используйте окно "Структура документа" для выбора форматируемого элемента.
Выберите в меню Формат пункт Стиль, чтобы открыть диалоговое окно Построитель стилей.
Выберите Макет в левой области диалогового окна Построитель стилей.

В правой области появится диалоговое окно Построитель стилей | Макет.

При применении стилей к элементам, выбранным в режиме разработки, атрибуты стиля CSS встраиваются в разметку HTML для этих элементов. Перейдите в режим редактирования кода HTML для просмотра вставленных атрибутов нового стиля.

Добавление атрибутов макета в правило стиля CSS, определенное во внешней таблице стилей

Откройте существующую внешнюю таблицу стилей и поместите курсор внутрь фигурных скобок ("{ }"), следующих за селектором нужного правила стиля.
Нажмите кнопку Построить стиль в меню Стили, чтобы открыть диалоговое окно Построитель стилей.
Выберите Макет в левой области диалогового окна Построитель стилей.

В правой области появится диалоговое окно Построитель стилей | Макет.

Примечание.
Меню Стили появляется в том случае, когда редактируется внешняя таблица стилей CSS. Команда Построить стиль в меню Стили становится доступной при помещении точки вставки между фигурными скобками, следующими за селектором правила стилей.

Меню Стили появляется в том случае, когда редактируется внешняя таблица стилей CSS. Команда Построить стиль в меню Стили становится доступной при помещении точки вставки между фигурными скобками, следующими за селектором правила стилей.

Класс стиля CSS, определенный во внешней таблице стилей, может быть применен к элементу в области <BODY> веб-страницы (в данном случае и к самому элементу <BODY>) путем записи селектора стиля CSS в свойство CLASS этого элемента.

Параметры, доступные на странице Макет диалогового окна Построитель стилей.

Задачи

Элементы пользовательского интерфейса

Управление потоком

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

Видимость
Позволяет либо скрыть (сделать невидимым) элемент, либо сделать его видимым. Выберите <Не задано> (параметр не задан), Скрытый или Видимый. Например, при выборе значения Скрытый будет вставлена следующая разметка CSS:

VISIBILITY:hidden

Примечание.

Если значение атрибута — <Не задано>, код в стиль не добавляется.

Отображение
Задает значения атрибута DISPLAY для элемента. Можно указать, будет ли элемент отображаться, и каким будет вид отображаемого элемента: в виде элемента блока или внутри линейного потока. Выберите <Не задано> (параметр не задан), Не отображать в виде блока или В виде вхождения. Элемент блока обычно начинает новую строку и не может быть больше своего родительского контейнера. Например, элемент <H1>, к которому применяется этот стиль, находящийся внутри элемента <BODY>, не может быть больше содержащего его элемента <BODY>. Встроенный элемент обычно не начинает новую строку, и его размер определяется высотой и шириной его собственного содержимого. Например, при выборе значения В виде элемента блока будет вставлена следующая разметка CSS:

DISPLAY:block

Примечание.
Если значение атрибута — <Не задано>, код в стиль не добавляется.

Примечание.
Свойства Visibility и Display связаны, но не тождественны. Скрытие элемента не уменьшает общее время обработки страницы обозревателем. Однако обозреватель не обрабатывает элемент, который не отображается. Соответственно, страница, включающая неотображаемые элементы, будет отображаться быстрее, чем страница, на которой те же элементы просто скрыты. Кроме того, при обтекании текстом скрытого элемента кажется, что он обтекает пустое место. Эти особенности следует учитывать при выборе свойств макета.

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

Разрешить обтекание текстом
Задает атрибуты, определяющие, каким образом текст обтекает элемент. Выберите <Не задано> (параметр не задан), Не разрешать текст по сторонам, Справа или Слева. Например, при выборе значения Справа будет вставлена следующая разметка CSS:

FLOAT:left

Примечание.

Если значение атрибута — <Не задано>, код в стиль не добавляется.
Разрешить перемещаемые объекты
Устанавливает атрибуты, определяющие, может ли объект свободно перемещаться по странице. Выберите <Не задано> (параметр не задан), С обеих сторон (объекты могут перемещаться слева или справа на странице), Только справа (объекты могут перемещаться только справа на странице), Только слева (объекты могут перемещаться только слева на странице), или Не разрешать (объекты не перемещаются по странице). Например, при выборе Только справа будет вставлена следующая разметка CSS:

CLEAR:left

Примечание.

Если значение атрибута — <Не задано>, код в стиль не добавляется.

Содержимое

Переполнение
Устанавливает атрибуты, контролирующие поведение элементов, содержимое которых выходит за пределы, задаваемые высотой и шириной элемента. Выберите <Не задано> (параметр не задан), При необходимости применять полосы прокрутки (полосы прокрутки отображаются, если содержимое превышает размер, определенный для элемента), Всегда применять полосы прокрутки (полосы прокрутки отображаются всегда), Не обрезать содержимое (элемент увеличивается, чтобы вместить содержимое), Обрезать содержимое (содержимое, выходящее за границы элемента, не отображается). Например, при выборе значения Не обрезать содержимое будет вставлена следующая разметка CSS:

OVERFLOW:visible

Примечание.

Если значение атрибута — <Не задано>, код в стиль не добавляется.

Отсечение

Устанавливает атрибуты, которые управляют отображением прямоугольной области элемента. Например, можно отобразить только правый верхний угол элемента. Введите значения в одном или нескольких полях (Вверху, Bнизу, Слева, или Справа) и выберите параметр единицы измерения: px (по умолчанию), pt, pc, mm, cm, in, em, ex или %.

Обрезаться могут только элементы с абсолютным позиционированием. Задаваемые значения относятся к границам элемента. Например, если в поле Top задано значение 40px, часть элемента от 0 px (верх элемента) до 40 px не будет видна. Аналогично, при вводе значения 50 в поля Вверху и Внизу и использовании единиц измерения по умолчанию будет вставлена следующая разметка CSS:

CLIP: rect(50px auto 50px auto)

Примечание.
Если задано менее четырех полей отсечения, то остальным полям присваивается значение auto, и отсечение по границам, значения для которых не заданы, не производится.

Печать разрывов страниц

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

Перед
Выберите <Не задано> (параметр не задан), Авто или Вставить разрыв страницы. Например, при выборе значения Вставить разрыв страницы будет вставлена следующая разметка CSS:

PAGE-BREAK-BEFORE:always
После
Выберите <Не задано> (параметр не задан), Авто или Вставить разрыв страницы. Например, при выборе значения Вставить разрыв страницы будет вставлена следующая разметка CSS:

PAGE-BREAK-AFTER:always