了解页面样式的来源
上次更新时间: 二月 12, 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:
Blog
Design Manager
Website Pages
Account Management
你的反馈对我们至关重要,谢谢。
此表单仅供记载反馈。了解如何获取 HubSpot 帮助。