Узнайте, как использовать панель конструктора CSS, чтобы создавать или присоединять таблицы стилей, медиазапросы, селекторы, а также настраивать свойства CSS.
Панель конструктора CSS (Окно > Конструктор CSS) ― это инспектор свойств CSS, который позволяет в визуальном режиме создавать стили и файлы CSS, а также задавать свойства и формировать медиазапросы.
В интерфейсе конструктора CSS доступны следующие разделы.
С помощью конструктора CSS в таблице стилей CSS можно отредактировать отдельное правило (используйте вкладку «Текущий» в конструкторе CSS) или при необходимости можно работать непосредственно с таблицей стилей CSS (используйте вкладку «Все» в конструкторе css).
В области «Источники» панели конструктора CSS щелкните 
, а затем выберите один из следующих пунктов.
В зависимости от выбранного варианта откроется диалоговое окно «Создание нового файла CSS» или «Присоединение существующего файла CSS».
Нажмите кнопку «Обзор», чтобы указать имя файла CSS и, если создается новый файл CSS, расположение, в которое он будет сохранен.
Выполните одно из следующих действий.
(Необязательно) Выберите «Условное использование» и укажите медиазапрос, который будет связан с этим файлом CSS.
На панели конструктора CSS щелкните «Источник CSS» в области «Источники».
Щелкните 
в области «@Медиа», чтобы добавить новый медиазапрос.
Откроется диалоговое окно «Определение медиазапроса», в котором будут перечислены все поддерживаемые Dreamweaver условия медиазапросов.
Выберите условия, соответствующие вашим требованиям.
Для всех выбранных условий необходимо задать допустимые значения. В противном случае соответствующие медиазапросы не будут созданы.
Для задания нескольких условий поддерживается только оператор And.
Если условия медиазапроса добавляются с помощью кода, в диалоговое окно «Определение медиазапроса» будут занесены только поддерживаемые условия. Однако в текстовом поле «Код» этого диалогового окна будет отображен весь код (в том числе и неподдерживаемые условия).
Если щелкнуть медиазапрос в представлении «Конструктор» или в режиме интерактивного просмотра, то область просмотра изменяется в соответствии с выбранным медиазапросом. Для переключения в полноразмерную область просмотра щелкните «Глобально» в области «@Медиа».
На панели конструктора CSS выберите источник CSS в области «Источники» или медиазапрос в области «@Медиа».
В области «Селекторы» щелкните . С учетом выбранного в документе элемента конструктор CSS определяет подходящий селектор и предлагает его пользователю (до трех правил).
Вам доступны следующие действия.
Примечание. Пункт «Дублировать в медиазапрос» доступен, только если источник выбранного селектора содержит медиазапросы. Нельзя создать копию селектора из одного источника в медиазапросе другого источника.
Теперь можно копировать стили из одного селектора и вставлять их в другой. Можно копировать все стили или стили только определенной категории, например макет, текст и рамки.
Щелкните селектор правой кнопкой мыши и выберите один из доступных параметров.
Щелкните нужный селектор и перетащите его на новое место в области «Селекторы».
Свойства группируются в следующие категории и представляются разными значками в верхней части области «Свойства»:
Перед редактированием свойств селектора CSS задайте элементы, связанные с селектором CSS, используя обратную проверку. Этот способ позволяет оценить, всем ли элементам, выделенным во время обратной проверки, фактически требуются изменения.
Установите флажок «Показывать заданные», чтобы в списке отображались только заданные свойства. Чтобы отобразить список всех свойств, которые можно указать для селектора, снимите флажок «Показывать заданные».
Чтобы задать свойство, например width или border-collapse, щелкните нужный вариант, отображенный около свойства в области Свойства.
Имена переопределенных свойств отображаются перечеркнутыми.
Элементы управления в области «Свойства» конструктора CSS позволяют быстро задать такие свойства, как margin (поле), padding (заполнение) и position (положение). Если вы предпочитаете работать с программным кодом, то в текстовых полях быстрого редактирования можно указать сокращенный код для параметров margin и padding, как показано в данном примере.
Щелкните значение и введите нужные цифры. Если все четыре значения должны быть одинаковыми и изменяться одновременно, щелкните значок связи в центре.
Определенные значения можно в любое время отключить или удалить. Например, можно удалить значение свойства left margin, сохранив при этом значения для свойств right, top и bottom.
Свойства управления рамками распределены по логично организованным вкладкам, которые позволяют быстро просматривать или изменять свойства.
Если вы предпочитаете работать с программным кодом, в текстовых полях быстрого редактирования можно указать сокращенный код для рамок и радиусов рамок.
Чтобы задать свойства управления границами, вначале задайте свойства на вкладке «Все стороны». Затем будут включены другие вкладки и свойства, установленные на вкладке «Все стороны», отобразятся для отдельных границ.
При изменении свойства на вкладках отдельных границ значение соответствующего свойства на вкладке «Все стороны» изменится на «не задано» (undefined) (значение по умолчанию).
В примере ниже цвет границ был задан как черный, а затем изменен на красный для верхней границы.
Вставленный код основан на параметре настройки для сокращенной или полной записи.
Во время проверки фокус переводится на вкладки в порядке приоритета «заданных» вкладок. Наивысший приоритет имеет вкладка «Все стороны», а за ней следуют «Верхняя», «Правая», «Нижняя» и «Левая». Например, если для границы установлено только верхнее значение, режим вычисления переводит фокус на вкладку «Верхняя», не учитывая вкладки «Все стороны», поскольку эта вкладка не задана.
Функция «Включение/отключение свойства CSS» позволяет выносить фрагменты CSS-кода в комментарии через панель «Конструктор CSS» без внесения изменений непосредственно в код. При вынесении фрагментов CSS-кода в комментарии можно видеть, как конкретные свойства и значения влияют на вид страницы.
При отключении свойства CSS Dreamweaver добавляет к нему теги комментария CSS и метку [disabled]. После этого можно легко снова включить или удалить отключенное свойство CSS.
С помощью конструктора CSS можно отключить или удалить каждое свойство.
На следующем снимке экрана показаны значки отключения и удаления для свойства height. Эти значки отображаются при наведении курсора мыши на свойство.
Теперь элементы управления удалением и отключением также можно использовать на уровне группы «Управление границами» для применения этих действий ко всем свойствам.
Селекторы и свойства CSS можно добавлять или удалять с помощью комбинаций клавиш. Можно также переключаться между группами свойств на панели «Свойства».
|
Сочетание клавиш |
Рабочий процесс |
|
CTRL + Alt +[Shift =] |
Добавляет селектор (если элемент управления находится в области селектора) |
|
CTRL + Alt+ S |
Добавляет селектор (если элемент управления находится в приложении) |
|
CTRL + Alt +[Shift =] |
Добавляет свойство (если элемент управления находится в области свойства) |
|
CTRL + Alt+ P |
Добавляет свойство (если элемент управления находится в приложении) |
|
Select + Delete |
Удаляет селектор, если селектор выбран |
|
CTRL + Alt + (PgUp/PgDn) |
Позволяет переходить от одного раздела к другому во вложенной панели свойств |
Чаще всего один селектор CSS связан с несколькими элементами страницы. Например, текст основного содержимого страницы, текст заголовка и текст нижнего колонтитула можно связать с одним селектором CSS. При редактировании свойств селектора CSS все связанные с ним элементы изменятся, включая и те, которые не планируется менять.
Интерактивное выделение помогает определить все элементы, связанные с селектором CSS. Если необходимо изменить только один элемент или часть элементов, можно создать новый селектор CSS для этих элементов, а затем изменить свойства.
Для определения элементов страницы, связанных с селектором CSS, наведите курсор мыши на селектор в режиме интерактивного просмотра (со значением интерактивного кода «выкл»). Dreamweaver выделит пунктирными линиями связанные с ним элементы.
Чтобы зафиксировать выделение элементов, щелкните селектор. Теперь элементы выделены синим контуром.
Чтобы удалить синий контур вокруг элементов, еще раз щелкните селектор.
Интерактивное выделение по умолчанию включено. Чтобы отключить интерактивное выделение, щелкните опции интерактивного просмотра на панели инструментов документа и выберите опцию «Отключить интерактивное выделение».
При изменении внешней таблицы стилей CSS все документы, связанные с этой таблицей, обновляются в соответствие с правкой.
Можно экспортировать стили CSS, применяемые в документе, чтобы создать новую таблицу стилей CSS, присоединить или привязать внешнюю таблицу стилей, чтобы применить имеющиеся в ней стили.
К страницам можно присоединить любую таблицу стилей, созданную или скопированную в сайт.
Откройте конструктор CSS, выполнив одно из следующих действий.
В конструкторе CSS щелкните значок «+» рядом с пунктом «Источники» и выберите «Присоединить существующий файл CSS».
Выполните одно из следующих действий.
Нажмите кнопку «Просмотр», чтобы убедиться, что к текущей странице применен нужный стиль.
Если примененные стили отличаются от ожидаемых, то нажмите кнопку «Отмена», чтобы удалить таблицу стилей. Будет восстановлен предыдущий внешний вид страницы.
Нажмите кнопку «ОК».
