Рассмотрим создание внутренней таблицы стилей для текущей страницы. Например, мы хотим, чтобы на странице все заголовки первого уровня располагались по центру и были красного цвета, абзацы имели отступ слева и справа от границ страницы по 45px и были выровнены по ширине. В то же время, чтобы была возможность задавать отдельные абзацы с выравниванием по центру, например, для рисунков.
Для создания внутренней таблицы стилей выполните следующие действия.
1. В окне редактора CSS отмените Режим эксперта и нажмите на кнопку Новое правило.
2. В правой части окна редактора выберите тип создаваемого стиля: Стиль, применяемый ко всем элементам этого типа и в поле ввода введите h1 для создания селектор тэга заголовка первого уровня.
Щелкните кнопку Создать правило стиля, после этого перейдите на вкладку Текст для задания параметров текста. В поле Цвет выберите красный, а в поле Выравнивание – по центру
3. Щелкните кнопку Новое правило и в правой части открывшегося окна опять выберите тип создаваемого стиля Стиль, применяемый ко всем элементам этого типа и в поле ввода введите тэг p (абзац) .
Щелкните кнопку Создать правило стиля, перейдите на вкладку Текст и в поле Цвет выберите черный, а в поле выравнивание – по ширине, на вкладке Бокс задайте Отступы Слева и Справа по 45px.
4. Щелкните кнопку Новое правило и в правой части открывшегося окна теперь выберите тип создаваемого стиля Именованный стиль для создания селектора класса. В поле ввода введите произвольное имя класса, например, center (для информативности).
Далее нажмите на кнопку Создать правило стиля, и перейдя на стилевую вкладку Текст, задайте Выравнивание по центру.
На вкладке Основное показывается полное описание правила, выделенного во внутренней таблице стилей. На рис. показана структура полученной внутренней таблицы стилей (в левой части окна) и правило стиля (в правой части окна) для выделенного класса .center.
Рис. Редактор CSS с созданной внутренней таблицей стилей на вкладке Основное
Кнопками Вверх, Вниз можно менять последовательность стилей. Кнопкой Удалить удалять выделенный стиль. Кнопка Закрыть завершает работу с редактором стилей.
Селекторы тэгов (в нашем случае h1 и p) будут применяться на web-странице автоматически, а для того, чтобы применить селектор класса необходимо выделить элемент и выбрать нужный стиль из выпадающего меню Применить класс к выделению на панели форматирования.
Упражнение.
1. Наберите текст, указанный на рисунке и вставьте небольшую картинку, например, как указано на рис..
Рис. Пример текста для задания
2. Выделите заголовок «Использование стилей» и задайте ему стиль Заголовок1 (рис.)
Рис. Ниспадающий список «Обычный текст» для задания стиля абзаца
3. Аналогично задайте абзацу стиль Абзац.
4. Выделите рисунок задайте ему сначала стиль Абзац, а затем в поле Применить класс к выделению выберите center (рис).
Рис. Ниспадающий список «Применить класс к выделению» для задания класса абзацу
5. В режиме просмотра вы должны увидеть (рис.).
Рис. Результат упражнения в режиме просмотра
