Просмотр стилей, действующих на элемент Web-страницы, с помощью панели Стили CSS
Часто бывает необходимо посмотреть, какие стили оказывают влияние на тот или иной элемент Web-страницы, какие параметры задает каждый из них и какой набор параметров получается в результате сложения действия этих стилей. Когда мы начнем создавать Web-страницы со сложным оформлением, нам это обязательно пригодится.
Сделать это можно с помощью панели Стили CSS, которую мы вывели на экран ранее. О, это весьма примечательная панель!
Прежде всего, укажем ей вывести список стилей, которые оказывают влияние на выделенный нами элемент Web-страницы. Найдем в ее верхней части кнопкипереключатели Все и Текущий и включим кнопку Текущий. Панель Стили CSS примет вид, представленный на рис. 9.1.
Хорошо видно, что она содержит три раздела — Сводка по выделению, Правила и Свойства. Мы можем перетаскивать мышью разделяющие их линии, меняя размеры этих разделов. Но давайте лучше поговорим о них.
Начнем с раздела Сводка по выделению — он на панели Стили CSS самый верхний. Здесь мы видим список всех атрибутов стиля, полученного после применения к выделенному элементу Web-страницы всех действующих на него стилей, и их значений. Он состоит из двух колонок: в левой выводится имя атрибута стиля, в правой — его значение.
Давайте выделим в окне документа любой из абзацев, содержащих новости Webсайта. Тогда список раздела Сводка по выделению будет содержать два пункта, соответствующие атрибутам стиля text-align (задает выравнивание) и font-style (задает начертание шрифта). И мы сразу вспомним, что задали для этого абзаца выравнивание и начертание шрифта текста.
Теперь посмотрим на раздел Правила, средний на панели Стили CSS. Он содержит список всех стилей, действующих на выделенный элемент Web-страницы (если это не так, найдем в его правом верхнем углу две кнопки-переключателя и включим правую). Этот список также содержит две колонки: в левой выводятся селекторы стилей, а в правой — тег, с помощью которого сформирован данный элемент Web-страницы.
В нашем случае этот список будет содержать два пункта. Первый пункт представляет стиль переопределения тега <P>, а второй — стилевой класс newsitem.
Давайте выберем в списке раздела Сводка по выделению какой-либо атрибут стиля. Dreamweaver выберет в списке раздела Правила стиль, в котором был задан этот атрибут. Очень удобно.
- Введение
- Dreamweaver CS5.5 — что нового?
- Порты TCP
- Интернет-адреса
- IP-адреса и доменные имена
- Web-страницы и Web-сайты
- Что такое Web-страница и Web-сайт
- Web-сайты и Web-серверы: технические детали
- Корневая папка Web-сервера
- Публикация Web-сайта в Интернете. Хостинг-провайдеры
- Как создаются Web-страницы и Web-сайты. Web-редакторы
- Структурирование Web-сайта
- Физическая структура Web-сайта
- Что дальше?
- Панели
- Регистрация Web-сайта в Dreamweaver
- Название Web-страницы
- Набор текста
- Вставка специальных символов
- Разрыв строк
- Таблицы
- Создание таблицы
- Что дальше?
- Создание гиперссылок в Dreamweaver
- Создание текстовых гиперссылок
- Принципы формирования интернет-адресов, используемых в WWW
- Создание почтовых гиперссылок
- Якоря
- Литералы
- Задание параметров публикации Web-сайта
- Задание места публикации Web-сайта
- Задание в качестве места публикации FTP-сервера
- Задание основных параметров FTP-сервера
- Просмотр стилей, действующих на элемент Web-страницы, с помощью панели Стили CSS
- Справочник по CSS
- Что дальше?
- Параметры, задаваемые только вручную в CSS-коде
- Степень полупрозрачности элемента Web-страницы
- Создание тени у текста
- Практикум по созданию стилей
- Параметры рамки
- Практикум по созданию стилей
- Специальные компоненты комбинированных стилей
- Комбинаторы
- Практикум по созданию стилей
- Контейнеры
- Встроенные контейнеры
- Что дальше?
- Реализация контейнерного Web-дизайна
- Управление местоположением контейнеров. Плавающие контейнеры
- Создание полосы навигации
- Создание остальных Web-страниц Web-сайта
- Что дальше?
- Реализация шаблонного Web-дизайна
- Создание шаблона
- Дополнительные возможности шаблонов
- Повторяющиеся области
- Открепление Web-страниц от шаблонов
- Что дальше?
- Работа с поведениями
- Создание поведений
- Управление поведениями
- Интерактивный просмотр Web-страниц, дополнение
- Работа с эффектами Spry
- Создание эффектов Spry
- Управление эффектами Spry
- Работа с компонентами Spry
- Создание компонентов Spry
- Управление компонентами Spry
- Настройка внешнего вида компонентов Spry
- Что дальше?
- Создание наборов данных XML
- Краткий курс языка XML
- Создание набора данных XML в Dreamweaver
- Использование наборов данных XML
- Вывод данных, хранящихся в наборах
- Область Spry
- Оформление компонентов Spry с помощью стилей CSS
- Что дальше?
- Программа Adobe Widget Browser
- Выход из магазина приложений
- Работа с мини-приложениями в Dreamweaver
- Настройка мини-приложений
- Создание пользовательского пресета
- Управление пользовательскими пресетами
- Что дальше?
- Перекодирование мультимедийных файлов с помощью утилиты SUPER
- Размещение аудио- и видеороликов на Web-странице средствами HTML 5
- Подготовка мультимедийных файлов
- Размещение аудио и видео на Web-странице
- Альтернативные источники
- Размещение на Web-странице видеороликов Flash Video
- Подготовка видеофайлов
- Размещение видеоролика на Web-странице
- Что дальше?
- Реализация семантической разметки
- Атрибуты стиля, предназначенные для реализации многоколоночной верстки
- Основные параметры колонок
- Растягивание элемента Web-страницы на все колонки
- Реализация многоколоночной верстки
- Атрибуты стиля, предназначенные для реализации гибкой разметки
- Собственно реализация гибкой разметки
- Реализация гибкой разметки
- Заключение