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

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

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

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

  1. Откройте HTML-документ в режиме Конструктора и выберите элемент для форматирования.

  2. Выберите в меню Формат пункт Стиль, чтобы открыть диалоговое окно Построитель стилей.

  3. Нажмите Положение в левой области диалогового окна Построитель стилей.

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

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

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

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

  2. Нажмите кнопку Построить стиль в меню Стили, чтобы открыть диалоговое окно Построитель стилей.

  3. Нажмите Положение в левой области диалогового окна Построитель стилей.

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

5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

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

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

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

Задачи

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

Вариант положения

Устанавливает режим, определяющий доступные далее поля позиционирования. Выберите в выпадающем меню один из следующих вариантов.

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

  • обычное
    Положение элемента не изменяется; можно задать высоту и ширину. При выборе значения обычное будет вставлена следующая разметка CSS:

    POSITION:static

    5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

    Область просмотра, расположенная рядом с селектором Вариант положения, обновляется в соответствии с выбранным режимом.

  • смещение от обычного
    Позволяет задать верхнюю и левую позиции элемента относительно его обычного положения; можно указать высоту и ширину. Обычное положение элемента — это его положение до применения стиля. При выборе значения смещение от обычного будет вставлена следующая разметка CSS:

    POSITION:relative

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

    POSITION:absolute

Если задан вариант положения, доступны следующие параметры.

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

    TOP:5px

    5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

    Этот параметр доступен при выборе значения смещение от обычного из списка Вариант положения.

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

    LEFT:5px

    5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

    Этот параметр доступен при выборе значения смещение от обычного из списка Вариант положения.

  • Высота
    Задает высоту элемента. Введите значение и выберите единицы измерения (px, pt, pc, mm, cm, in, em, ex или %). Единица измерения по умолчанию — px. Например, при вводе значения 5 и использовании единиц измерения по умолчанию будет вставлена следующая разметка CSS:

    HEIGHT:5px

  • Ширина
    Задает ширину элемента. Введите значение и выберите единицы измерения (px, pt, pc, mm, cm, in, em, ex или %). Единица измерения по умолчанию — px. Например, при вводе значения 5 и использовании единиц измерения по умолчанию будет вставлена следующая разметка CSS:

    WIDTH:5px

  • По оси Z
    Задает z-порядок элемента. Z-порядок определяет отображение перекрывающихся элементов; элементы с более высоким значением z-порядка отображаются перед элементами с меньшим z-порядком. Чтобы присвоить элементу более высокий z-порядок, введите положительное число для получения результата, аналогичного следующему примеру:

    Z-INDEX:99

    5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

    Чтобы присвоить элементу более низкое значение z-порядка, введите меньшее или отрицательное число.

    5f45k1e7.alert_note(ru-ru,VS.90).gifПримечание.

    Z-порядок и положение связаны друг с другом. Если введены значения положения, при которых элементы перекрываются, можно указать, какой из элементов должен находиться сверху, задав соответствующие значения z-порядка. Используйте более высокие значения z-порядка для элементов, которые должен выводиться над другими элементами.

См. также

Основные понятия

Общие сведения о работе с CSS

Ссылки

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

Страница "Шрифт", диалоговое окно "Построитель стилей"

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

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

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

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

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

Диалоговое окно "Палитра цветов"