创建、编辑和附加 CSS 文件,为网站设计风格
上次更新时间: 二月 13, 2025
CSS(层叠样式表)文件是一种编码文件,用于选择页面元素并控制其表现形式。CSS 文件不能附加到电子邮件或电子邮件模板中。
本文介绍如何在 HubSpot 中创建、发布和附加 CSS 文件。你可以学习如何对特定页面进行简单的设计更改。如果您使用的是主题模板,请学习如何编辑主题设置。
创建新的 CSS 文件
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 单击左上角的文件夹图标 folder ,展开侧边栏菜单。然后单击文件> 新建文件。
- 在对话框中,单击CSS 样式表。然后输入 CSS 样式表的名称,点击创建。
编辑 CSS 文件
创建或打开现有 CSS 文件后,即可在代码编辑器中进行编辑。除标准 CSS 外,代码编辑器还支持HubL 变量和宏,使 CSS 维护更轻松。要预览 HubL 的渲染效果,请单击 编辑器顶部的 " 显示输出 " 开关。右侧将打开一个面板,显示渲染预览。
要查看 HubSpot 模板的标准 CSS 选择器列表,请查看Boilerplate CSS。
发布前,请检查代码中是否有 HubL 错误。在自定义模块或编码文件中,有三个地方可以找到 HubL 错误或警告:
- 在代码编辑器底部的错误控制台中。
- 在代码编辑器左侧的错误沟中。
- 在编辑器右侧的滚动条中。
无法发布的错误将显示为红色,而一般警告将显示为黄色。在代码编辑器底部,单击 "显示详细信息"可查看错误控制台中的更多错误信息,单击 "隐藏详细信息"可折叠错误控制台。
在错误控制台中,代码或自定义模块中出现 HubL 错误或警告的地方都会有链接。将鼠标悬停在代码编辑器左侧的红色错误指示器上,即可查看代码中的错误或警告。点击错误,光标将循环显示该行的所有错误或警告。点击滚动条上的注释,将进入文件的该部分。
您还可以点击代码编辑器中的行号,并相应更新文件的 URL。这样,您就可以与他人共享代码链接,引导他们准确找到您正在文件中工作的位置。
编辑文件后,单击右上角的 "发布更改"。如果想在其他编码模板中调用该样式表,可单击左侧边栏菜单中的 "操作>复制公共URL",复制样式表的 URL。
附加到模板
在 HubSpot 中,您可以通过几种不同的方式将样式表附加到内容中。以下是附加样式表在网站上的链接顺序:
- public_common.css*:主要用于 HubSpot 应用程序的样式表,也用于某些网站功能。
- 网站>页面"下设置中的标题 HTML:在网站的全局 <head>中添加链接标记。
- Layout.css**:附加到所有拖放模板布局的默认响应 CSS 文件。
- 网站>页面"下设置中的附加样式表:附加到整个网站的样式表。
- 网站>博客"下设置中的附加样式表:附加到博客的样式表(覆盖网站全局样式表)。
- 链接样式表***:模板布局中附加的样式表。
- 模板中的附加 <head> 标记:在特定模板布局的 <head>中添加的链接标记。
- 页面特定样式表:页面设置中附加的样式表。
- 页面头部 HTML:在页面设置中添加到特定页面 <head> 中的链接标记。
* 需要
** 为拖放布局所必需
*** 推荐的模板布局样式表附件方法
要将样式表附加到模板,请在设计管理器中打开模板。在标题和主体选项下的右侧边栏菜单中,从链接样式表旁边的添加下拉菜单中选择一个文件。
您可以编辑或删除已附加的样式表,方法是将鼠标悬停在样式表上,然后单击 "编辑"对其进行修改,或单击 "X"将其删除。
添加样式表后,单击右上角的 "发布更改",即可将更改应用到使用该模板的实时页面。
在特定页面上附加或删除样式表( 仅限Marketing Hub专业版 和 企业版)
请注意: 此选项不适用于主题模板。了解如何编辑主题设置。
从页面编辑器的设置部分添加或删除特定页面的样式表:
-
导航至您的内容:
- 网站页面:在 HubSpot 帐户中,导航到内容 > 网站页面。
- 登陆页面:在 HubSpot 帐户中,导航到内容 > 登陆页面。
- 点击页面名称。
- 在内容编辑器中,单击 "设置 "菜单并选择 "高级"。
- 在对话框的 页面样式表 部分,单击 附加样式表 下拉菜单并选择样式表。要删除样式表,请单击 该样式表旁边的X 。
- 要关闭从模板或域继承的样式表,请单击样式表旁边的下拉菜单并选择禁用。
附加或删除域样式表(仅限Marketing Hub专业版和企业版)
请注意: 主题模板必须包含注释enableDomainStylesheets: true才能使用域级样式表。了解有关模板注释的更多信息。
从域的所有内容中添加或删除样式表:
- 在 HubSpot 帐户中,单击顶部导航栏中的 settings“设置”图标。
- 在侧边栏菜单中,单击网站>页面。
- 单击下拉菜单,选择要更新设置的 域 。
- 在"模板 "选项卡上,滚动到CSS 和样式表。要添加样式表,请单击+ 添加样式表。单击所附样式表旁边的X可将其删除。
- 单击保存。
请注意: 在降级为 HubSpot入门级或免费工具时,附加的域级样式表将保持激活状态,直到您将其删除。一旦移除所有样式表,就不能再附加域级样式表。了解有关降级订阅的更多信息。