12.3. Macromedia DreamWeaver MX. Каскадные таблицы стилей.Часть3
Далее я загружу вновь созданную страницу в редактор и на панели CSS Style выберу пункт New CSS Style (Рис. 12.02). Если у вас не отображается панель CSS Style, тогда поставьте флажок в пункте Windows - CSS Style главного окна редактора. В открывшемся меню (Рис. 12.13)
Рис. 12.13
нужно задать имя, выбрать размещение во внешнем файле и нажать кнопку ОК (на скриншоте я заполнил все требуемые поля). После нажатия кнопки ОК появится диалоговое окно где нужно задать имя для сохраняемого файла (Рис. 12.14)
Рис. 12.14
Имя можете задать свое, далее кнопка "Сохранить" и откроется окно CSS Style Definition (пункты которого мы так долго обсуждали) Рис. 12.15
Рис. 12.15
Для примера я задам только размер букв и шрифт (см. скриншот), - далее кнопка ОК и щелчок мышкой по имени стилевого класса (cssrth77demo на скриншоте) и стиль будет применен. Теперь осталось "перекрасить" гиперссылки, - для этого кликните правой кнопкой мышки по панели CSS Style, но теперь, вместо пункта Make Custom Style Class, выберите пункт Use CSS Selector, где в выпадающем списке Selector (Рис. 12.16)
Рис. 12.16
имеются четыре пункта, о них по порядку:
a:link - стиль применить ко всем гиперссылкам,
a:visited - стиль применить ко всем посещенным гиперссылкам,
a:hover - стиль применить к гиперссылке при наведении на нее курсора мышки,
a:active - стиль применить ко всем активным гиперссылкам.
Предположим я хочу назначить гиперссылкам зеленый цвет, посещенным - золотистый, а активным - красный. Для этого в списке Selector я выбираю пункт a:link, в поле Define In я указываю - style_rth77_demo.css (внешний CSS файл, тот, в котором уже имеется запись о форматировании текста) и открывшемся окне (Рис. 12.17)
Рис. 12.17
в пункте Color, остается только выбрать цвет (правда я выбрал не совсем зеленый, а скорей салатовый, но сути дела это не меняет) и нажать кнопку ОК. Окно закроется, далее снова щелчок мышью по имени стилевого класса (cssrth77demo Рис. 12.15) и ссылки "перекрасятся" в зеленый (читай салатовый) цвет. Теперь для посещенных ссылок, тут все по аналогии - в списке Selector я выбираю пункт a:visited, в поле Define In я указываю - style_rth77_demo.css (внешний CSS файл, тот, в котором уже имеется запись о форматировании текста и о том что гиперссылки должны быть зелеными) и открывшемся окне (Рис. 12.18)
Рис. 12.18
в пункте Color выбирается цвет для посещенных гиперссылок. По окончании - кнопка ОК. Ну и для активных ссылок все тоже самое, в пункте Selector нужно выбрать пункт a:active, в поле Define In указать - style_rth77_demo.css (внешний CSS файл, тот, в котором уже имеется запись о форматировании текста и о том, что все гиперссылки должны быть зелеными, а посещенные золотистыми) и открывшемся окне (Рис. 12.19)
Рис. 12.19
в пункте Color выбрать красный цвет. Завершающий аккорд - кнопка ОК. Теперь текст отформатирован, ссылки перекрашены и можно вешать этот файл на любые страницы (как "повесить" CSS файл на страницу говорилось в самом начале этой части).
Для редактирования данных в CSS файлах следует перейти на вкладку Edit Styles панели CSS Styles (Рис. 12.20)
Рис. 12.20
где вы сможете это сделать. Для примера, если вы хотите снова изменить цвет всех гиперссылок, то двойной щелчок мышью по пункту a:link (Рис. 12.20) снова откроет окно для редактирования этого параметра (то которое на рисунке 12.17).
Пример с использованием CSS (каскадные таблицы стилей)
Для удаления CSS со страницы, на панели CSS Style (Рис. 12.21)
Рис. 12.21
щелчок правой кнопкой мыши по имени стилевого класса и выбрать в контекстном меню пункт Delete.
|
