Вставка и форматирование текста > Применение стилей CSS > Создание и связь с внешней таблицей стилей |
![]() ![]() ![]() |
Создание и связь с внешней таблицей стилей
Таблица стилей CSS - внешний текстовый файл, содержащий стили и спецификации
форматирования. Если вы редактируете внешнюю таблицу стилей CSS, то все документы,
связанные с этой таблицей, обновляются, чтобы отразить результаты изменения.
Стили CSS, находящиеся в документе, можно экспортировать, чтобы создать на их
основе новую таблицу стилей CSS, а также применить их к документу или связывать
его с внешней таблицей стилей.
Справочная система Dreamweaver состоит из страниц HTML, которые используют связанный лист стиля CSS, называемый help.css. Чтобы увидеть, как выглядит код, определяющий стиль CSS, откройте файл help.css, расположенный в папке Help\html, в тестовом редакторе. Откройте любой из файлов темы (которые начинаются с номера) и посмотрите, как таблица стилей CSS связана с документом с помощью тега <LINK>, а также как применяются определенные стили CSS.
Чтобы применить CSS-стиль или связать документ с внешней таблицей стилей CSS:
1 | Выберите команду Window (Окно) > CSS Styles (Стили CSS) или щелкните на значке CSS Styles (Стили CSS) в панели Launcher (Запуск). |
2 | В панели CSS Styles (Стили CSS) щелкните правой кнопкой мыши (Windows) или выполните Control-щелчок (Macintosh) и выберите команду Attach Style Sheet (Присоединить таблицу стиля) из контекстного меню. Можно также щелкнуть на одноименном значке в правом нижнем углу панели CSS Styles (Стили CSS). |
3 | В диалоговом окне Select Style Sheet File (Выбор файла таблицы стилей) введите имя файла в поле URL или найдите файл, который вы хотите присоединить. |
4 | Укажите, какой тип пути вы используете - документозависимый или корнезависимый (см. Местоположение документа и возможные пути.) |
5 | Нажмите кнопку Select (Выбрать). Таблица стилей будет присоединена к вашему документу, а указанные в ней стили появятся в панели CSS Styles (Стили CSS). |
![]() |
Чтобы создать внешнюю таблицу стилей CSS или связать с ней документ:
1 | Выберите команду Window (Окно) > CSS Styles (Стили CSS) или щелкните на значке CSS Styles (Стили CSS) в панели Launcher (Запуск). |
2 | В панели CSS Styles (Стили CSS) щелкните правой кнопкой мыши (Windows) или выполните Control-щелчок (Macintosh) и выберите в контекстном меню команду Edit Style Sheet (Редактировать таблицу стилей). |
3 | В диалоговом окне Edit Style Sheet (Редактирование таблицы стилей) нажмите кнопку Link (Связать). |
4 | В диалоговом окне Link External Style Sheet (Связать с внешней таблицей стилей) выполните одно из действий: |
![]() |
Нажмите кнопку Browse (Обзор) (Windows) или Choose (Выбрать) (Macintosh), чтобы указать путь к внешней таблице стилей CSS, или введите путь к таблице стилей в поле File/URL (Файл/URL). (рекомендуется все же использовать поиск, потому что это гарантирует, что указанный путь верен); |
![]() |
Создайте новую внешнюю таблицу стилей CSS, введя новое имя файла (который еще не существует в указанной папке). Такой файла должен иметь расширение css. |
5 | Выберите одну из настроек Add As (Добавить как): Link (Связать) или Import (Импортировать), чтобы определить и создать тег, который будет использоваться для применения внешней таблицы CSS-стилей, а затем нажмите ОК. |
С настройкой Import (Импортировать) информация о внешнем файле таблицы стилей CSS вносится в текущий документ, в то время как с настройкой Link (Связать) информация принимается, но не вносится в документ. | |
Оба переключателя, Import (Импортировать) и Link (Связать), связывают все стили во внешней таблице стилей CSS с текущим документом, но настройка Link (Связать) предлагает больше возможностей и работает в большем количестве браузеров. Имя внешней таблицы стилей CSS появляется с идентификатором связи или импорта в списке стилей в диалоговом окне Edit Style Sheet (Редактирование таблицы стилей). Завершите выполнение этой инструкции, чтобы создать или отредактировать стили, определенные во внешней таблице стилей CSS. | |
6 | В диалоговом окне Edit Style Sheet (Редактирование таблицы стилей) выберите имя внешней таблицы стилей и нажмите кнопку Edit (Правка). |
Для этой таблицы стилей появится собственное диалоговое окно Edit Style Sheet. | |
7 | Нажмите кнопку New (Новый), чтобы определить стили во внешней таблице стилей CSS. |
8 | 8. В диалоговом окне New Style (Новый стиль) определите новый стиль (см. Создание CSS-стиля в Dreamweaver. |
9 | Когда вы закончите определять стили, нажмите кнопку Save (Сохранить). |
![]() |
![]() ![]() ![]() |