На панели CSS можно просмотреть стиль оформления любого выбранного элемента, включая правила keyframes для анимации. На вкладке Стили также можно изменять стили для классов элементов, использовать встроенные стили и создавать новые правила.
Чтобы увидеть свойства CSS для выбранного элемента, перейдите на вкладку Вычислено.
Чтобы создать в документе новый стиль, выполните следующие действия:
- Выберите элемент, к которому необходимо применить новое правило стиля.
- Нажмите кнопку Добавить правило
в нижней части панели CSS.
- Google Web Designer автоматически создаст уникальный селектор класса, который можно редактировать. Когда вы укажете селектор, Google Web Designer добавит этот класс к выбранному элементу.
- В объявлении нового правила между фигурными скобками нажмите Добавить свойство и введите свойство CSS со значениями, например
width: 209px;. - Добавьте в правило необходимое количество свойств со значениями.
в нижней части панели CSS.Чтобы добавить к элементу встроенный стиль, выполните следующие действия:
- Выберите элемент.
- На панели CSS в блоке Встроенный стиль нажмите кнопку Добавить свойство.
- Добавьте свойства со значениями, чтобы изменить стиль элемента.
Чтобы изменить стиль, выполните следующие действия:
- Выберите элемент в документе. На панели CSS будут показаны правила стилей, связанные с элементом.
- Выберите свойство или значение, которое нужно изменить. Чтобы удалить свойство, очистите поле его названия.
Чтобы включить или отключить свойство, выполните следующие действия:
- Снимите флажок возле названия свойства, чтобы отключить его в предварительном просмотре в браузере и опубликованных файлах.
- Установите флажок, чтобы снова активировать свойство.
Правила ключевых кадров для анимации
На панели CSS показаны правила ключевых кадров (включая правила с ключевым словом @keyframes) для элементов, анимированных с помощью CSS.
Чтобы создать новое правило ключевых кадров для анимированного элемента, выполните следующие действия:
- Выберите элемент без анимации.
- Нажмите кнопку Добавить правило ключевых кадров
в нижней части панели CSS. Google Web Designer добавит начальный и завершающий кадр (0 % и 100 %) и установит продолжительность анимации по умолчанию (1 секунда).
- Чтобы добавить анимированное свойство в ключевой кадр, нажмите Добавить свойство и укажите свойство CSS и значение.
- Добавьте в правило необходимое количество свойств со значениями.
Чтобы добавить ключевой кадр, выполните следующие действия:
- Выберите анимированный элемент.
- На панели CSS между существующими кадрами нажмите Вставить ключевой кадр.
- Google Web Designer автоматически вставит новый ключевой кадр посередине между существующими. Нажмите на значок процента, чтобы изменить время перехода между ключевыми кадрами.
- Анимированные свойства переносятся из соседних ключевых кадров. Их можно добавлять, редактировать и удалять.
Такой способ не позволяет добавлять ключевые кадры после окончания существующей анимации. Это можно сделать на временной шкале.