Просмотр стилей, действующих на элемент Web-страницы, с помощью панели Стили CSS

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

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

Прежде всего, укажем ей вывести список стилей, которые оказывают влияние на выделенный нами элемент Web-страницы. Найдем в ее верхней части кнопкипереключатели Все и Текущий и включим кнопку Текущий. Панель Стили CSS примет вид, представленный на рис. 9.1.

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

Начнем с раздела Сводка по выделению — он на панели Стили CSS самый верхний. Здесь мы видим список всех атрибутов стиля, полученного после применения к выделенному элементу Web-страницы всех действующих на него стилей, и их значений. Он состоит из двух колонок: в левой выводится имя атрибута стиля, в правой — его значение.

Давайте выделим в окне документа любой из абзацев, содержащих новости Webсайта. Тогда список раздела Сводка по выделению будет содержать два пункта, соответствующие атрибутам стиля text-align (задает выравнивание) и font-style (задает начертание шрифта). И мы сразу вспомним, что задали для этого абзаца выравнивание и начертание шрифта текста.

Теперь посмотрим на раздел Правила, средний на панели Стили CSS. Он содержит список всех стилей, действующих на выделенный элемент Web-страницы (если это не так, найдем в его правом верхнем углу две кнопки-переключателя и включим правую). Этот список также содержит две колонки: в левой выводятся селекторы стилей, а в правой — тег, с помощью которого сформирован данный элемент Web-страницы.

В нашем случае этот список будет содержать два пункта. Первый пункт представляет стиль переопределения тега <P>, а второй — стилевой класс newsitem.

Давайте выберем в списке раздела Сводка по выделению какой-либо атрибут стиля. Dreamweaver выберет в списке раздела Правила стиль, в котором был задан этот атрибут. Очень удобно.