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

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

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

На веб-странице окно Свойства CSS позволяет просматривать все стили, используемые текущим выбранным элементом. Также можно видеть порядок приоритета этих стилей, а также просматривать свойства и их значения для этих стилей. Окно Свойства CSS можно использовать как в режиме Конструктор, так и в режиме Исходный код.

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

Общие сведения об окне «Свойства CSS»

Окно Свойства CSS разделено на четыре основных области, как показано на следующей иллюстрации:

Описание областей:

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

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

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

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

Создание нового стиля с помощью окна «Свойства CSS»

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

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

Создание нового стиля с помощью окна «Свойства CSS»

1. Выберите в конструкторе элемент, для которого вы хотите добавить правило стиля.

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

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

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

4. В списке Примененные правила выберите элемент, идентификатор элемента или CSS-класс элемента.

5. В разделе Свойства CSS задайте свойства стиля.

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

Окно Свойства CSS можно использовать для изменения форматирования или стиля одиночного элемента или всех элементов, относящихся к одному CSS-классу.

Изменение свойств стиля

1. В списке Примененные правила в окне Свойства CSS выберите элемент, встроенный стиль, идентификатор элемента или CSS-класс элемента.

2. Измените свойства в области Свойства CSS.

Определение стилей, применяемых к элементу

Окно Свойства CSS позволяет увидеть все стили, применяемые к элементу. Также можно узнать, какие из свойств стилей переопределяются. Переопределенные свойства стилей зачеркнуты красной чертой — это означает, что свойство не применяется к текущему выбранному элементу.

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

Просмотр сводки всех свойств, применяемых к выбранному элементу

1. Выберите элемент на странице и нажмите кнопку Сводка, чтобы перейти в режим сводки.

   В области Свойства CSS отображаются все свойства, применяемые к выбранному элементу.

2. Щелкните свойство в области Свойства CSS, чтобы выделить соответствующее правило стиля в области Примененные правила.

3. Снова нажмите кнопку Summary, чтобы выйти из режима сводки.

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

См. также

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

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

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