样式面板概述

样式面板位于设计器工具内，提供各种样式控件，让您能够个性化网站上的每个组件。您可以使用样式面板中提供的全套控件灵活地修改元素的布局、背景颜色或排版。

除了单个元素的样式外，您还可以选择将样式保存为类，这样您就可以将一致的样式集应用于整个网站的元素。此外，您还可以利用断点（也称为媒体查询）在“样式”面板中为不同设备尺寸定制布局。

本指南将让您了解样式面板的各个组件：

1. 课程
2. 选择器字段
3. 州菜单
4. 样式部分
5. 继承和应用样式指标

课程

虽然可以使用样式面板单独设置网站上每个元素的样式，但手动调整元素可能既费力又费时。这时类就派上用场了。

类存储样式信息，可应用于整个网站中的众多元素。只要您在“样式”面板中开始为元素设置样式，就会自动生成一个类并将其分配给所选元素。此外，您还可以选择手动创建和重命名类。

您甚至可以创建组合类，从原始类中继承样式值以及您在该组合类上实现的任何其他样式。了解有关类和组合类的更多信息。

选择器字段

元素类型位于样式面板顶部，表示您当前正在设置样式的元素（例如，图像、div 块、表单等）。元素类型下方是 选择器字段，展示应用于该元素的所有标签、类和组合类。可在此字段中直接重命名现有类并创建新类或组合类。

在选择器字段中创建和重命名类

在启动元素的样式时，将根据元素类型自动为其分配一个类名（例如，在将样式应用于段落元素时，无需手动创建类，将自动为其分配一个名为“段落”的类）。双击 选择器字段，您可以重命名该课程或创建一个新课程。

要引入新类，请在 选择器字段.

删除课程

您可以选择从元素中删除类 选择器字段。需要注意的是，虽然此类可以随时重新用于设置其他元素的样式，但它不会被从 样式选择器面板 或您的网站。从您的网站上完全删除课程只能在 样式选择器面板 当它们不再与任何元素关联时。

州菜单

要改变特定元素的外观和行为 状态， 例如 徘徊 或者 专注，您可以从 选择器字段 > 状态 下拉菜单。有关样式状态的更多见解可在此处找到。

继承菜单

这 遗产 菜单位于略高于 选择器字段单击它会显示所选元素的父元素和祖先元素，一直到全局标签（例如 正文（所有页面）标签）。从继承菜单中，您还可以选择和更新任何类的样式。

继承菜单还提供了组合类的基类。选择状态后，菜单会指示应用样式的状态。深入了解继承和应用样式指示器。

受影响元素

这 受影响元素 指示器显示在选择器字段正下方，指示选择器字段中的类或标签在当前页面和整个网站上使用的次数。通过单击文本，您可以切换共享该类或标签的所有元素的轮廓。

样式部分

样式面板中的每个部分管理一组不同的 CSS 属性（即样式）。您可以自由地在以下部分中调整不同的样式，并在画布上预览您的修改：

• 布局
• 间距
• 尺寸
• 位置
• 排版
• 背景
• 边界
• 效果
• 自定义属性

您可以单独或同时展开、折叠或切换各个部分 专注模式. 

要激活专注模式： 

1. 单击“三个点”图标位于 样式面板
2. 检查 专注模式 选项
3. 选择一个部分 样式面板 扩大它（例如，间距、背景等）

要禁用专注模式： 

1. 单击“三个点”图标位于 样式面板
2. 取消选中 专注模式 选项

专家提示： 使用 Alt/选项 + 年代 展开或折叠全部 样式面板 属性部分。按 Alt/选项 + 转移 + 年代 切换 专注模式 开启和关闭。 

请记住，焦点模式的选择或取消选择将在整个会话期间保持不变。例如，如果您启用焦点模式并刷新设计器工具或在另一个浏览器或选项卡中访问它，焦点模式将保持不变。但是，焦点模式设置不会延续到不同的网站。如果您在一个网站上激活焦点模式并在设计器工具中切换到另一个网站，焦点模式将在新网站上被禁用。

布局

将元素添加到画布后，其默认显示选项会影响其外观。 布局 部分提供默认显示选项，例如 堵塞, 柔性, 网格， 或者 没有任何。点击“箭”图标，您可以访问 显示选项 下拉菜单，其中包括以下选项 内联块, 内联弹性, 内联网格， 和 排队. 在本节中了解有关显示设置的更多信息。

间距

间距允许您定义元素的间距，即元素边界内外的呼吸空间。 边距 确定元素边框外的空间， 填充 定义元素内部、其内容和边框之间的空间。 

您可以指定 间距 元素的顶部、底部、左侧和右侧 间距 部分。 间距 值可以单独应用于一侧、两条互补的边或所有四条边。有关间距的更多见解可在此处找到。

尺寸

默认情况下，元素要么拉伸到其父元素的宽度，要么适应其中内容的大小。 尺寸 部分提供了自定义选项 宽度, 高度, 方面比率, 溢出， 和 合身 设置。

笔记： 肯定 尺寸 容器元素的选项可能会受到限制。 

探索本节中可用的各种尺寸设置以了解更多详细信息。

位置

在里面 位置 部分，您可以配置元素 位置 （例如静态、相对、绝对、固定或粘性），以及 漂浮 和 清除 设置。在本节中深入了解位置、浮动和清除设置。

排版

在 排版 部分中，您将找到控制外观和样式的设置。命令网页上文本的显示。

如果您修改任何 排版 设计元素时，调整将应用于该元素及其后代元素内的所有文本元素。了解有关排版配置和推荐方法的更多信息。

出场

在 出场 category，您可以将背景图像、渐变或颜色合并到任何元素（不包括媒体元素），并且可以修改其 剪裁 属性。此外，您还可以修改 方面, 放置， 和 图案 显示任何背景图像。了解有关背景配置的更多信息。

边

边缘确定元素边界的曲率或确定元素周长一个或多个侧面的轮廓。在 边 category，您可以设置 曲率范围, 时尚, 厚度， 和 阴凉处 用于元素边缘。进一步探索边缘配置。

影响

在 影响 部分，您可以为元素分配各种效果。这些包括： 融合, 半透明, 盒子阴影, 2D 和 3D 转换, 转变, 过滤器, 风景滤镜， 和 光标。此外，您还可以将效果应用于特定状态（例如悬停、聚焦等）。了解有关效果的更多信息。

自定义属性

在 自定义属性 category，您可以注入自定义 CSS，以集成样式面板其他部分自然不支持的 CSS 属性和值。熟悉自定义属性。

遗产和实施风格标记

在样式面板中折叠 category 时，如果该 category 中的任何属性实施了任何本地或继承的样式，则 category 名称旁边会出现有色点。在样式面板中展开 category 时，任何拥有本地或继承样式的属性名称上都会显示有色标签。

这些有色标记表示样式的来源——样式是在所选元素、当前类上实现的，还是从核心类、父元素、全局标签或放大的视口传递的。

您可以合并其他样式、取代继承的样式或消除任何这些样式。您还可以通过从 遗产 落下。

橙色标记

橙色标记表示当前样式继承自所选元素的前身 — 这意味着所选元素的样式继承自标签、核心类、更高断点或父元素上的文本样式。单击橙色标记可查看样式的继承来源。

您可以取代继承的样式（用橙色样式标记表示），也可以导航到类或标签并在那里编辑样式。从 遗产 落下。

从此下拉菜单中，您可以选择并暂时设置类或标签的样式。例如，选择 H1 标题后，您可以打开 遗产 下拉列表并选择 所有 H1 标题 标签。

蓝色标记

如果样式标记是蓝色的，则表示元素的样式源自当前类、标签或断点。当您修改继承的（橙色）样式时，标记也会切换为蓝色。点击任何蓝色标记，然后选择 重置 恢复并消除当地风格。

粉色记号笔

粉色样式标记表示该样式已应用于现有断点上当前选定的元素。例如， 网格子项 设置仅应用于所选元素，并且这些样式不会保存在类中。在设置快速堆栈的样式时，也可能会出现粉红色标记。

当您在较小的断点上覆盖继承的（橙色）样式时，标记也会变成粉红色。点击任何粉红色标记标签，然后选择 重置 将其恢复并删除。

专业提示： 利用快捷键组合 Option + 点击 （在 Mac 上）或 Alt + 单击 （在 Windows 上）重置样式。

继续，让你的设计闪耀 样式面板 配置！