上次更新时间： 2026年9月22日
层叠样式表（CSS）通过选择页面元素并为其设置样式，来控制网站各页面的视觉呈现。您可以使用设计管理器创建新的 CSS 文件、编辑现有文件，并将它们关联到模板、特定页面或整个域名。
若需对特定页面进行简单的设计更改，请了解如何在内容编辑器中编辑页面内容。如果您使用的是主题模板，请了解如何编辑主题设置。
创建新的 CSS 文件
需要权限 需要在设计管理器中创建 CSS 文件，必须具备“设计工具”权限。
- 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
- 在资源管理器中，点击左上角的“文件”> “新建文件”。
- 在对话框中，点击下拉菜单并选择“CSS + HubL”。
- 点击“下一步”。
- 在“文件名”字段中输入文件名。
- 若要更改文件位置，请点击“更改”。在弹出的窗口中，选择新的文件位置。
- 完成后，点击“创建”。
编辑 CSS 文件
创建或打开现有 CSS 文件后，请在代码编辑器中进行编辑。除了标准 CSS 之外，代码编辑器还支持HubL 变量和宏，以便更轻松地维护您的 CSS。
需要权限 需要在设计管理器中编辑 CSS 文件，必须具备“设计工具”权限。
要查看 HubSpot 模板的标准 CSS 选择器列表，请参阅Boilerplate CSS。
要预览HubL的渲染效果，请点击编辑器顶部的“显示输出”切换按钮。右侧将弹出一个面板，显示渲染后的预览。
检查错误
发布前，请检查代码中是否存在 HubL 错误。错误会显示在代码编辑器底部的控制台、左侧的错误边栏以及右侧的滚动条中。
阻止您发布的错误将以红色显示，而一般警告则以黄色显示。在代码编辑器底部，点击“显示详细信息”可在错误控制台中查看更多错误信息，点击“隐藏详细信息”则可折叠错误控制台。
发布 CSS 文件
编辑完 CSS 文件后，请点击右上角的“发布更改”。若要在其他已编码的模板中调用此样式表，请点击资源管理器中的“操作”下拉菜单，然后选择“复制公共 URL”。
将样式表附加到资源
可将样式表附加到模板、单个页面或整个域名上。样式表将根据其附加位置按特定顺序应用。以下列表反映了它们在网站上的应用顺序：
- public_common.css （必填）：该样式表主要由 HubSpot 应用使用，但也用于某些网站功能。
- 页眉 HTML：在“内容”>“页面设置”中添加到网站全局
<head>中的 link 标签。 - Layout.css （拖放布局必填）：附加到所有拖放模板布局上的默认响应式 CSS 文件。
- 附加样式表（页面）：在“内容”>“页面设置”中附加到整个网站的样式表。
- 附加样式表（博客）：在“内容”>“博客设置”中附加到博客的样式表（会覆盖网站全局样式表）。
- 链接的样式表（推荐用于模板布局）：附加在模板布局中的样式表。
- 模板中的额外 <head> 标记：添加到特定模板布局的
<head>中的链接标签。 - 页面专用样式表：在页面设置中添加的样式表。
- 页面头部 HTML：在页面设置中添加到特定页面
<head>中的链接标签。
将样式表附加到模板
在设计管理器中的检查器内，可将样式表附加到拖放模板上。对于代码模板，则需直接在代码编辑器中添加样式表。
需要权限 向模板附加样式表需要“设计工具”权限。
拖放模板
- 在你的 HubSpot 帐户中，单击更多，然后导航到内容 > 设计管理器。如果你的帐户中未显示更多，请直接导航到内容 > 设计管理器。
- 在资源管理器中，点击要拖放的模板文件名称。
- 在检查器中，点击“关联样式表”部分中的“添加”下拉菜单，然后选择您的样式表。要删除样式表，请点击“X”。
- 完成后，点击 右上角的 “发布更改 ”，将您的更改应用到使用该模板的 在线页面。
代码模板
对于代码模板，需在代码编辑器中直接使用 <link> 标签，或在文件的部分使用 HubL<head>标签来附加样式表。有关代码模板的更多信息，请参阅开发者文档。
将样式表附加到特定页面
需要订阅 Marketing Hub 需拥有“专业版”或“企业版”许可，才能将样式表附加到特定页面。
需要权限 向特定页面添加样式表需要编辑权限。
请注意：此选项不适用于主题模板。了解如何编辑主题设置。
若要在内容编辑器的“设置”部分为特定页面添加样式表：
-
导航至您的内容：
- 点击页面名称。
- 在内容编辑器中，点击“设置”菜单 ，然后选择“高级”。
- 在对话框的“样式表”部分，点击“附加样式表”下拉菜单并选择一个样式表。要删除样式表，请点击样式表旁边的“X” 。
- 若要禁用从模板或域继承的样式表，请点击样式表旁边的下拉菜单，然后选择“已禁用”。
附加域名样式表
需要订阅 Marketing Hub 需拥有“专业版”或“企业版”才能将样式表附加到域。
需要权限 向域添加样式表需要“网站设置”权限。
请注意：主题模板必须包含注解enableDomainStylesheets: true才能使用域名级样式表。了解有关模板注解的更多信息。
要为整个域名附加样式表：
- 在 HubSpot 帐户中，单击顶部导航栏中的
“设置”图标。 - 在侧边栏菜单中，点击“内容”>“页面”。
- 点击下拉菜单，选择 您 要更新设置的 域名 。
- 在“模板”选项卡的“CSS 和样式表”部分，点击“+ 添加样式表”。要删除样式表，请点击已关联样式表旁边的“X”。
- 点击“保存”。
请注意： 当降级至 HubSpot 的Starter 套餐或免费工具时，已附加的域名级样式表将保持有效，直到您将其移除。一旦所有样式表均被移除，您将无法再在域名级别附加样式表。了解有关降级订阅的更多信息。
