請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。
了解頁面樣式的來源
上次更新時間: 二月 10, 2025
在 HubSpot 中,有多个地方可以添加内容样式,而且会根据添加位置以特定顺序应用。下面,我们将介绍如何应用样式,如何在实时页面上找到样式,以及如何获得设计编辑帮助。
了解如何应用造型
HubSpot中的CSS样式根据其在HubSpot中设置的位置依次应用,如下所示。例如,全局样式表中设置的样式会被特定页面上设置的样式覆盖。
- 自定义模块 CSS
- 附加到模块的样式表。
- 添加到模块CSS 部分的 CSS。
- 在模块的 HubL 标记内的require_css 块中添加 CSS
- 通过require_css 块添加到模板的样式表
- HubSpot 默认样式表(例如 layout.css)
- 附加到模板的样式表
- 在页面设置选项卡上附加的样式表
- 在所有域的设置中附加的样式表
- 在特定域设置中附加的样式表
- 在 <style> 标记中添加的 CSS。例如,网站设置、页面设置或模板的头部 HTML。
- 通过页面编辑器添加的样式。HubSpot 还会为这些样式添加!important标记。了解有关!important 标记及其如何影响样式的更多信息。
在预览或实时页面上查找样式
您可以使用浏览器中的开发工具来检查应用于实时网站或预览页面的样式。每个浏览器在如何排除样式故障方面都略有不同。
在 Google Chrome 浏览器中查找样式:
- 在预览页面或实时页面上,右键单击要检查的元素,然后选择 "检查"。
- 在左侧的元素窗格中,你可以看到页面的 HTML。你可以点击元素查看它们的样式,也可以使用窗格左上角的光标图标点击页面上的元素。
- 在右侧的 "样式"窗格中,你会看到应用于该元素的所有样式。你可以选择并清除每个样式旁边的复选框,以移除和应用该样式。这将有助于缩小需要更改的样式规则的范围。
- 在 CSS 规则的右侧,你会看到 源名称会告诉你该样式来自哪里。将鼠标悬停在 源名称查看全名:
- 如果样式来自样式表,样式表的名称就会出现在检查器中 CSS 声明的旁边。然后,你就可以导航到设计管理器,找到样式表,并根据需要进行编辑。
- 如果源名称以module 开头,那么样式表可能来自 模块的 CSS。将鼠标悬停在源名称上可查看模块的全名。
- 如果源名称是User agent stylesheet ,则 CSS 是浏览器默认样式 的一部分。这种情况最常见于一般的 HTML 标签样式,如 <p>、<h1>、<h2>、<span>、<div> 等。当浏览器找不到该元素的通用样式规则时,就会应用这种样式,但可以通过为该元素添加自己的样式来覆盖它。
- 如果源名称是页面 URL,则 CSS 来自页面上的 <style> 标记。例如,可以在页面或模板头部的 HTML 中设置样式。
- 如果源名称是页面 URL,且样式针对#hs_cos_wrapper_module_number,那么样式很可能是在页面编辑器的样式选项卡中设置的。HubSpot 将为这些样式添加!important标记。了解有关!important 标记及其如何影响样式的更多信息。
- 如果源名称是<style>,那么样式很可能是自动包含在元素中的。通常,这是由于在可嵌入 HubSpot 资产(如 CTA 或会议小部件)的编辑器中设置了样式。
- 如果 element.style 出现在检查器中声明的旁边,则 CSS 已被内联设置。内联样式是直接添加到页面 HTML 源代码或模板内联样式字段中的样式。例如,源代码中的内联样式将显示为<p style="background:purple;">Hello world</p>。
- 如果样式来自样式表,样式表的名称就会出现在检查器中 CSS 声明的旁边。然后,你就可以导航到设计管理器,找到样式表,并根据需要进行编辑。
有关如何检查页面的详细信息,请查看网络浏览器的帮助文档:
获得设计编辑方面的帮助
修改 HubSpot 模板或样式表的最佳资源是原始模板设计者。不过,您也可以根据自己对 HTML 和 CSS 故障排除的熟练程度,从各种资源中获得有关内容样式的额外帮助。
- 如果你能自如地使用检查器工具来排除模板上的设计问题:
-
- 在社区的CMS 开发论坛上搜索和发帖,以获得提示、建议或排除代码故障。
- 参考CMS 参考文档,了解 CMS 框架的教程、指南和概述。
- 在CMS 开发人员社区 Slack 上与 HubSpot 的产品团队和其他 HubSpot开发人员联系。
- 如果您不方便阅读或编辑模板中的 HTML 和 CSS,请使用 "CSS":
Blog
Design Manager
Website Pages
Account Management
你的意見回饋對我們相當重要,謝謝。
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助。