了解页面样式的来源

在HubSpot中，内容样式可在多个位置添加，且根据添加位置遵循特定应用顺序。本文将介绍样式应用机制、如何在实时页面查找样式，以及如何获取设计编辑支持。

理解样式应用机制

样式在HubSpot中的应用遵循特定顺序。例如，全局样式表中的样式会被特定页面添加的样式覆盖。 

请参考以下列表理解页面样式的来源，从优先应用的样式到最后应用的样式依次排列。

1. 自定义模块CSS
   • 在布局编辑器中附加到模块的样式表。

• • 在模块编辑器中添加至模块.css部分的CSS。

1. • 在模块的HubL标记内添加CSS require_css 代码块内块中的CSS。
2. 通过 require_css 代码块 添加至模板的样式表。
3. 设计管理器中的HubSpot默认样式表（如layout.css）。
4. 布局编辑器中附加于模板的样式表。

5. 页面设置选项卡中附加的样式表。

6. 在所有域名的设置中附加的样式表
7. 特定域名的设置中附加的样式表
8. 在<style>标签内添加的CSS。例如网站设置、页面设置或模板的HTML头部。

9. 通过页面编辑器添加的样式。HubSpot还会为这些样式添加!important标签。了解 !important标签及其对样式设置的影响。

在预览或实时页面查找样式

使用浏览器开发者工具查找应用于实时网站或预览页面的样式。不同浏览器的样式排查方式略有差异，以下示例以谷歌浏览器为例。

1. 导航至您的内容：
   • 在 HubSpot 帐户中，导航到内容 > 网站页面。
   • 在 HubSpot 帐户中，导航到内容 > 登陆页面。
2. 点击页面名称。
3. 在内容编辑器中，点击右上角的预览。
4. 在预览页面中，点击在新标签页中打开。
5. 在预览中，右键点击要检查的元素，然后选择“检查”。
6. 在元素面板中，您将看到页面的HTML代码。点击元素可查看其样式。
7. 在样式面板中，查看应用于该元素的CSS规则。勾选或取消勾选每个样式旁的复选框，可临时移除或添加样式。这有助于确定影响该元素的具体规则。

8. 在 CSS 规则右侧，您将看到该样式的来源名称。这可确认样式来源的位置。将鼠标悬停在来源名称上可查看完整名称：
   • 若样式源自CSS文件，样式表名称将显示在CSS声明旁。请转至设计管理器定位该样式表，并按需进行编辑。

• • 若源名称以module 开头，则样式来自 模块的 CSS。将鼠标悬停在源名称上可查看模块的全名。

• • 若源名称为用户代理样式表， 则样式属于浏览器的默认样式。
    • 通常当浏览器无法为元素找到样式规则时，您会看到此类HTML标签样式（如<p>、<h1>、<span>等）。 
    • 用户代理样式表可通过为该元素添加自定义样式进行覆盖。

• • 若来源名称为页面URL，则样式来自页面中的<style>标签。例如，样式可能设置在页面或模板头部的HTML中。

• • 若源名称为页面URL且样式针对#hs_cos_wrapper_module_number，则该样式来自页面编辑器"样式"选项卡。HubSpot会自动添加 !important 标签。了解有关!important 标签及其对样式影响的更多信息。

• • 若源名称为<style>，样式将自动随元素加载。此情况常见于可嵌入式HubSpot资产（如CTA或会议小部件）的编辑器中。

• • 如果元素样式出现在检查器中的声明旁边，则表示该CSS已被设置为内联样式。内联样式是指直接添加到页面HTML源代码或模板内联样式字段中的样式。例如，源代码中的内联样式将显示为 <p style="background:purple;">Hello world</p>。

有关检查页面的详细方法，请查阅您所用浏览器的帮助文档：

• Chrome
• Firefox
• Microsoft Edge
• Safari

获取设计编辑帮助

修改 HubSpot 模板或样式表的最佳资源是原始模板设计师。但根据您对 HTML 和 CSS 故障排除的熟悉程度，还有多种资源可提供额外帮助。

• 若您熟悉使用检查器工具排查模板设计问题：

• • 在社区的CMS开发论坛中搜索和发帖，可获取技巧、建议或解决代码问题。
  • 查阅CMS参考文档获取教程、指南及框架概述。
  • 加入 HubSpotCMS 开发者社区 Slack，与 HubSpot 产品团队及其他开发者交流。

• 若您不熟悉在模板中阅读或编辑HTML和CSS：

• • 联系具备网站设计专长的认证HubSpot合作伙伴，协助您定制模板。
  • 使用主题模板 编辑页面样式， 无需编写任何代码。
  • 若使用资产市场购买的模板，请直接联系模板设计师咨询页面设计相关问题。