Практическое руководство. Использование диалоговых окон "Применить стили" и "Управление стилями"

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

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

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

Окно Управление стилями используется для изменения расположения или порядка отображения стилей. Можно переместить стили из внешней таблицы CSS во внутреннюю и наоборот, или переместить расположение стиля внутри таблицы стилей или блока стилей.

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

Значок	Описание
	Красная точка обозначает стиль, основанный на идентификаторе.
	Зеленая точка обозначает стиль, основанный на классе.
	Синяя точка обозначает стиль, основанный на элементе.
	Желтая точка обозначает встроенный стиль.
	Кружок вокруг точки означает, что стиль используется на текущей странице.
	Знак «@» обозначает импортированную внешнюю таблицу каскадных стилей.

Работа с окном «Применить стили»

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

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

Можно также отсортировать список стилей, отображаемых в окне Применить стили.

Если отдельный стиль трудно рассмотреть на фоне окна, можно выбрать цвет окна, который не содержит свойств фона.

Примечание.
Чтобы временно отобразить все правила стиля во всплывающем окне, следует навести курсор мыши на стиль в окне Применить стили.

Общие сведения об окне «Применить стили»

Пользовательский интерфейс окна Применить стили имеет следующие функциональные возможности:

• Команда Добавить новый стиль предоставляет доступ к диалоговому окну Стили.

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

• Команда Очистить стили удаляет все правила встроенных стилей и стилей, основанных на классах, из текущего выделенного фрагмента.

• Команда Текущая страница перечисляет все правила стилей, основанных на классе или на идентификаторе, содержащиеся на текущей странице и в импортированных внешних CSS-файлах.

• Внешний CSS-файл, обозначенный знаком «@», в котором отображаются все правила стилей, импортированные на текущую веб-страницу.

• Внешний CSS-файл, связанный с текущей веб-страницей, который отображается в виде отдельного раздела.

• Сплошная квадратная граница вокруг стиля, означающая, что стиль используется в текущем выделенном фрагменте.

• Команда Контекстный селектор перечисляет правила стиля, основанного на элементе, используемые в текущем выделенном фрагменте.

• Команда Встроенный стиль отображает правила стиля, которые применяются к выделенным встроенным элементам.

• Контекстное меню для каждого правила стиля, которое позволяет выполнять множество задач, связанных со стилем.

Использование окна «Применить стили»

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

Применение стилей к элементу страницы с помощью окна «Применить стили»

1. Чтобы открыть окно Применить стили, в меню Формат выберите пункт Стили CSS, а затем выберите команду Применить стили.

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

   • Чтобы применить одно из существующих правил стиля, следует щелкнуть стиль класса или идентификатора, который необходимо применить.

   • Чтобы применить несколько существующих правил стиля, следует нажать клавишу CTRL и, удерживая ее, щелкнуть каждый стиль класса или идентификатора, который необходимо применить.

Можно изменить порядок стилей, способ их отображения, или настроить содержимое, отображаемое в окне.

Сортировка стилей с помощью окна «Применить стили»

• В окне Применить стили выберите пункт Параметры и выполните следующие действия:

  • Чтобы сортировать правила стилей в порядке их отображения в таблице CSS, выберите команду Сортировать по порядку.

  • Чтобы перечислить стили в алфавитном порядке и по типу стиля (основанный на классе или основанный на идентификаторе), выберите команду Упорядочить по типу.

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

Отображение и скрытие стилей с помощью окна "Применить стили"

• В окне Применить стили выберите пункт Параметры и выполните следующие действия:

  • Чтобы перечислить все правила стилей, содержащиеся во внешних, внутренних или встроенных таблицах CSS для текущей веб-страницы, следует выбрать команду Отобразить все стили.

  • Чтобы перечислить только те правила стилей, которые используются для текущей веб-страницы, выберите команду Отобразить стили, используемые для текущей страницы.

  • Чтобы перечислить только правила стилей, используемые в текущем выделенном фрагменте веб-страницы, выберите команду Отобразить стили, используемые в выделенном фрагменте.

Если для правила стиля не используется цвет фона, можно применить любой цвет, на фоне которого имя стиля в окне Применить стили будет более четко видимо. Если для стиля используется правило фонового стиля, фон отображается вместе со стилем.

Отображение фонового цвета в окне «Применить стили»

1. В окне Применить стили выберите пункт Параметры, а затем выберите команду Предварительный просмотр фонового цвета.

2. В диалоговом окне Дополнительные цвета выберите желаемый цвет и нажмите кнопку ОК.

Работа с окном «Управление стилями»

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

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

Примечание.
Чтобы временно отобразить все правила стиля во всплывающем окне, следует навести курсор мыши на стиль в окне Применить стили.

Общие сведения об окне «Управление стилями»

Пользовательский интерфейс окна Управление стилями предоставляет следующие функциональные возможности:

• Команда Добавить новый стиль предоставляет доступ к диалоговому окну Стили.

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

• Команда Текущая страница перечисляет все правила стиля, основанного на классе или идентификаторе, на текущей странице или в любом из импортированных внешних файлов CSS.

• Вкладка для любого внешнего CSS-файла, которая связана с текущей веб-страницей.

• Группировка селекторов по умолчанию, с помощью которой отображаются селекторы любого стиля, содержащего несколько селекторов в группе. Можно перечислить селекторы по отдельности, выбрав пункт Параметры и затем выбрав команду Разделить группированные селекторы.

Чтобы отобразить предварительный просмотр для выбранного стиля в окне Управление стилями, следует выбрать пункт Параметры, а затем выбрать команду Предварительный просмотр выбранного стиля.

Использование окна «Управление стилями»

Можно изменить порядок стилей или настроить содержимое, отображаемое в окне. При перемещении стиля вниз или вверх по списку он также перемещается в таблице стилей. Такие изменения могут повлиять на способ развертывания свойств стиля. Например, если атрибут свойства задан в двух различных стилях, приоритет имеет тот стиль, для которого атрибут задан позднее.

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

Перемещение стилей с помощью окна «Управление стилями»

1. Чтобы открыть окно Управление стилями, в меню Формат выберите пункт Стили CSS, а затем выберите команду Управление стилями.

2. В окне Управление стилями выберите пункт Параметры, выберите команду Сортировать по порядку, а затем выполните одно из следующих действий:

   • Чтобы переместить расположение стиля в таблице CSS, следует перетащить стиль вверх или вниз по списку. Например, можно переместить наиболее часто используемые стили и расположить их рядом друг с другом в целях удобства.

   • Чтобы переместить стиль со страницы во внешнюю таблицу CSS, присоединенную к странице, следует перетащить стиль из-под заголовка Текущая страница на конкретную позицию списка стилей во внешней таблице CSS либо на имя внешней таблицы CSS.

   • Чтобы переместить стиль из внешней таблицы CSS на страницу, следует перетащить стиль из-под имени внешней таблицы CSS под заголовок Текущая страница или в конкретную позицию списка стилей под заголовком Текущая страница. Если заголовок Текущая страница не отображается, следует добавить элемент style внутри элемента head на веб-странице.

   • Чтобы переместить стиль из внешней таблицы CSS в другую внешнюю таблицу CSS, следует перетащить стиль либо на имя желаемой внешней таблицы CSS, либо в конкретную позицию списка стилей во внешней таблице CSS.

Хотя окно Управление стилями рекомендуется использовать для управления стилями, можно также использовать его, чтобы применить стиль к элементу страницы.

Применение стилей с помощью окна «Управление стилями»

1. На веб-странице в режиме Конструктора или в режиме Исходного кода выберите элемент, к которому требуется применить стиль.

2. Щелкните правой кнопкой мыши стиль класса или идентификатора, который необходимо применить, и в контекстном меню выберите команду Применить стиль.

Можно также сортировать стили с помощью кнопки Параметры.

Сортировка стилей с помощью окна «Управление стилями»

• В окне Управление стилями выберите пункт Параметры и затем выполните одно из следующих действий:

  • Выберите команду Сортировать по порядке, чтобы отобразить стили в соответствии с порядком их отображения в таблице CSS.

  • Выберите команду Упорядочить по элементу, чтобы отображать каждый стиль под тем элементом HTML, к которому он применяются.

  • Выберите команду Упорядочить по типу, чтобы отображать стили в алфавитном порядке и в соответствии с типом стиля.

Можно разделить группированные стили, чтобы с ними было удобнее работать.

Перечисление отдельных селекторов стилей, содержащих несколько селекторов

• В окне Управление стилями выберите пункт Параметры, а затем выберите команду Разделить группированные селекторы.

Можно также указать, какие стили следует отображать в окне Управление стилями.

Отображение и скрытие стилей в окне «Управление стилями»

• В окне Управление стилями выберите пункт Параметры, выберите команду Сортировать по порядку, а затем выполните одно из следующих действий:

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

  • Выберите команду Отобразить стили, используемые для текущей страницы, чтобы отобразить только те стили, которые используются для текущей страницы.

  • Выберите команду Отобразить стили, используемые в выделенном фрагменте, чтобы отобразить только те стили, которые используются в текущем выделенном фрагменте страницы.

См. также

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

Практическое руководство. Использование окна "Свойства CSS"

Практическое руководство. Использование панели инструментов "Непосредственное применение стиля"