Узнайте, как использовать панель конструктора CSS, чтобы создавать или присоединять таблицы стилей, медиазапросы, селекторы, а также настраивать свойства CSS.

Панель конструктора CSS (Окно > Конструктор CSS) ― это инспектор свойств CSS, который позволяет в визуальном режиме создавать стили и файлы CSS, а также задавать свойства и формировать медиазапросы.

В интерфейсе конструктора CSS доступны следующие разделы.

  • Источники: набор файлов CSS, связанных с проектом.
  • @Мультимедиа: мультимедийные запросы для управления размером экрана.
  • Селекторы: селекторы, связанные с выбранным медиазапросом на панели «@Мультимедиа».
  • Свойства: свойства, связанные с выбранным селектором, с возможностью отображения только заданных свойств.

С помощью конструктора CSS в таблице стилей CSS можно отредактировать отдельное правило (используйте вкладку «Текущий» в конструкторе CSS) или при необходимости можно работать непосредственно с таблицей стилей CSS (используйте вкладку «Все» в конструкторе css).

Панель конструктора CSS
Панель конструктора CSS


Создание и присоединение таблиц стилей

  1. В области «Источники» панели конструктора CSS щелкните , а затем выберите один из следующих пунктов.

    • Создать новый файл CSS: чтобы создать и присоединить к документу новый файл CSS.
    • Присоединить существующий файл CSS: чтобы присоединить к документу существующий файл CSS.
    • Указать на странице: чтобы задать стиль CSS в документе.
    Создание и присоединение таблиц стилей с помощью конструктора CSS
    Создание и присоединение таблиц стилей с помощью конструктора CSS

    В зависимости от выбранного варианта откроется диалоговое окно «Создание нового файла CSS» или «Присоединение существующего файла CSS».

  2. Нажмите кнопку «Обзор», чтобы указать имя файла CSS и, если создается новый файл CSS, расположение, в которое он будет сохранен.

  3. Выполните одно из следующих действий.

    • Выберите «Ссылка», чтобы связать документ Dreamweaver с файлом CSS.
    • Выберите «Импорт», чтобы импортировать файл CSS в документ.
  4. (Необязательно) Выберите «Условное использование» и укажите медиазапрос, который будет связан с этим файлом CSS.

Определение медиазапросов

  1. На панели конструктора CSS щелкните «Источник CSS» в области «Источники».

  2. Щелкните в области «@Медиа», чтобы добавить новый медиазапрос.

    Откроется диалоговое окно «Определение медиазапроса», в котором будут перечислены все поддерживаемые Dreamweaver условия медиазапросов.

  3. Выберите условия, соответствующие вашим требованиям.

    Формирование медиазапросов
    Формирование медиазапросов

    Для всех выбранных условий необходимо задать допустимые значения. В противном случае соответствующие медиазапросы не будут созданы.

    Примечание.

    Для задания нескольких условий поддерживается только оператор And.

Если условия медиазапроса добавляются с помощью кода, в диалоговое окно «Определение медиазапроса» будут занесены только поддерживаемые условия. Однако в текстовом поле «Код» этого диалогового окна будет отображен весь код (в том числе и неподдерживаемые условия).

Если щелкнуть медиазапрос в представлении «Конструктор» или в режиме интерактивного просмотра, то область просмотра изменяется в соответствии с выбранным медиазапросом. Для переключения в полноразмерную область просмотра щелкните «Глобально» в области «@Медиа».

Определение селекторов CSS

  1. На панели конструктора CSS выберите источник CSS в области «Источники» или медиазапрос в области «@Медиа».

  2. В области «Селекторы» щелкните . С учетом выбранного в документе элемента конструктор CSS определяет подходящий селектор и предлагает его пользователю (до трех правил).

    Вам доступны следующие действия.

    • Предлагаемый селектор можно сделать более или менее точным с помощью клавиш со стрелками вверх или вниз.
    • Можно удалить предложенное правило и ввести необходимый селектор. При введении имени селектора его необходимо сопроводить обозначением типа селектора. Например, если указывается идентификатор, то перед именем селектора необходимо поставить символ «#».
    • Для поиска определенного селектора используется поле поиска, которое находится вверху области.
    • Чтобы переименовать селектор, щелкните его и введите необходимое имя.
    • Чтобы изменить порядок расположения селекторов в списке, перетащите селектор в нужное положение.
    • Для перемещения селекторов между источниками, перетащите его на нужный источник в области «Источники».
    • Чтобы создать копию селектора в выбранном источнике, щелкните селектор правой кнопкой мыши и выберите команду «Дублировать».
    • Чтобы создать копию селектора и добавить ее в медиазапрос, щелкните селектор правой кнопкой мыши, наведите указатель на пункт Дублировать в медиазапрос, а затем выберите медиазапрос.

    Примечание. Пункт «Дублировать в медиазапрос» доступен, только если источник выбранного селектора содержит медиазапросы. Нельзя создать копию селектора из одного источника в медиазапросе другого источника.

Копирование и вставка стилей

Теперь можно копировать стили из одного селектора и вставлять их в другой. Можно копировать все стили или стили только определенной категории, например макет, текст и рамки. 

Щелкните селектор правой кнопкой мыши и выберите один из доступных параметров.

  • Если в селекторе отсутствуют стили, элементы «Копировать стили» и «Копировать все стили» будут неактивны.
  • Элемент «Вставить стили» неактивен при работе с удаленными сайтами, которые нельзя редактировать. Однако функции «Копировать» и «Копировать все стили» доступны.
  • Вставка стилей, которые уже частично существуют в селекторе (наложение), возможна. В таком случае вставляется объединение всех селекторов.
  • Копирование и вставка стилей также возможны для различных связок файлов CSS: импортированных, связанных, встроенных стилей.
Копирование и вставка стилей
Копирование и вставка стилей


Переупорядочение селекторов

Щелкните нужный селектор и перетащите его на новое место в области «Селекторы».

Задание свойств CSS

Свойства группируются в следующие категории и представляются разными значками в верхней части области «Свойства»:

  • Макет
  • Текст
  • Рамка
  • Фон
  • Другое (список свойств «Только текст», а не свойств с визуальными элементами управления)

Примечание.

Перед редактированием свойств селектора CSS задайте элементы, связанные с селектором CSS, используя обратную проверку. Этот способ позволяет оценить, всем ли элементам, выделенным во время обратной проверки, фактически требуются изменения. 

Установите флажок «Показывать заданные», чтобы в списке отображались только заданные свойства. Чтобы отобразить список всех свойств, которые можно указать для селектора, снимите флажок «Показывать заданные».

Чтобы задать свойство, например width или border-collapse, щелкните нужный вариант, отображенный около свойства в области Свойства.

Имена переопределенных свойств отображаются перечеркнутыми.

Задание свойств margin, padding и position

Элементы управления в области «Свойства» конструктора CSS позволяют быстро задать такие свойства, как margin (поле), padding (заполнение) и position (положение). Если вы предпочитаете работать с программным кодом, то в текстовых полях быстрого редактирования можно указать сокращенный код для параметров margin и padding, как показано в данном примере.

Свойство margin
Свойство margin

Щелкните значение и введите нужные цифры. Если все четыре значения должны быть одинаковыми и изменяться одновременно, щелкните значок связи в центре.

Определенные значения можно в любое время отключить или удалить. Например, можно удалить значение свойства 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 для этих элементов, а затем изменить свойства.

Для определения элементов страницы, связанных с селектором CSS, наведите курсор мыши на селектор в режиме интерактивного просмотра (со значением интерактивного кода «выкл»). Dreamweaver выделит пунктирными линиями связанные с ним элементы.

Чтобы зафиксировать выделение элементов, щелкните селектор. Теперь элементы выделены синим контуром.

Чтобы удалить синий контур вокруг элементов, еще раз щелкните селектор.

Интерактивное выделение по умолчанию включено. Чтобы отключить интерактивное выделение, щелкните опции интерактивного просмотра на панели инструментов документа и выберите опцию «Отключить интерактивное выделение». 

Создание ссылки на внешнюю таблицу стилей CSS

При изменении внешней таблицы стилей CSS все документы, связанные с этой таблицей, обновляются в соответствие с правкой.

Можно экспортировать стили CSS, применяемые в документе, чтобы создать новую таблицу стилей CSS, присоединить или привязать внешнюю таблицу стилей, чтобы применить имеющиеся в ней стили.

К страницам можно присоединить любую таблицу стилей, созданную или скопированную в сайт.

  1. Откройте конструктор CSS, выполнив одно из следующих действий.

    • Выберите меню «Окно» > «Конструктор CSS».
    • Нажмите клавиши Shift + F11.
  2. В конструкторе CSS щелкните значок «+» рядом с пунктом «Источники» и выберите «Присоединить существующий файл CSS».

    Присоединить существующий файл CSS
    Присоединить существующий файл CSS

  3. Выполните одно из следующих действий.

    • Нажмите кнопку «Обзор», чтобы просмотреть внешнюю таблицу стилей CSS.
    • Введите путь к таблице стилей в поле «Файл или URL-адрес».
  4. Нажмите кнопку «Просмотр», чтобы убедиться, что к текущей странице применен нужный стиль.

    Если примененные стили отличаются от ожидаемых, то нажмите кнопку «Отмена», чтобы удалить таблицу стилей. Будет восстановлен предыдущий внешний вид страницы.

  5. Нажмите кнопку «ОК».

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет