使用“CSS”面板更改样式

CSS 面板概览

“CSS”面板可以显示您选择的任意元素的已定义样式规则，包括动画元素的 keyframes 规则。您还可以使用“CSS”面板的样式标签为元素的类修改样式、添加内嵌样式，以及创建新样式规则。

要查看元素的 CSS 属性列表，请切换到计算出的样式属性标签。

要在文档中创建新样式规则，请执行以下操作：

1. 选择要将新样式规则应用到的元素。
2. 在“CSS”面板底部点击添加规则按钮 。
3. Google Web Designer 随即会生成一个独一无二的类选择器，以便您进行修改。如果您输入一个类选择器，Web Designer 会将该类添加到所选元素。
4. 在用于声明新规则的括号之间，点击添加属性，然后输入 CSS 属性和值，例如 width: 209px;。
5. 继续添加新的“属性/值”对，直到完全定义规则为止。

要向元素添加内嵌样式，请执行以下操作：

1. 选择所需元素。
2. 在“CSS”面板中，点击内嵌样式块中的添加属性按钮。
3. 添加“属性/值”对，以更改该元素的样式。

要修改样式，请执行以下操作：

1. 在您的文档中选择所需元素。“CSS”面板随即会显示与该元素关联的样式规则。
2. 点击相应的属性或值，以进行修改。要删除属性，请清除相应属性名称。

要启用/停用属性，请执行以下操作：

1. 点击属性名称旁边的复选框。该复选框处于取消选中状态时，浏览器预览和发布的文件中将不会包含相应属性。
2. 要重新启用相应属性，请再次点击对应的复选框。

动画的关键帧规则

“CSS”面板会显示 CSS 动画元素的关键帧规则（包含 @keyframes 关键字）。

要为元素创建新的关键帧规则，请执行以下操作：

1. 选择一个没有动画的元素。
2. 在“CSS”面板底部点击添加关键帧规则按钮 。Google Web Designer 随即会添加起始和结束关键帧（0% 和 100%），并将动画时长默认设置为 1 秒。
3. 要为关键帧添加动画属性，请点击添加属性，然后输入 CSS 属性和值。
4. 继续添加新的“属性/值”对，直到完全定义规则为止。

要添加关键帧，请执行以下操作：

1. 选择一个动画元素。
2. 在“CSS”面板中，在现有关键帧之间点击插入关键帧。
3. Web Designer 随即会自动将关键帧插入到两端关键帧之间的中点位置。点击百分比可更改关键帧时序。
4. 动画属性是根据两端的关键帧插入的。您可以添加、修改或删除新关键帧的属性。

您不能添加超出现有动画末端的关键帧。要执行此操作，请改用时间轴。