請注意：：這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立，可能沒有經過校對。因此，這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

了解頁面風格的來源

上次更新時間： 2025年9月8日

可搭配下列任何訂閱使用，除非另有註明：

所有產品和版本

在 HubSpot 中，有多個地方可以新增內容造型，而且會根據新增的位置以特定的順序套用。以下介紹如何套用樣式、如何在即時頁面中找到樣式，以及如何獲得設計編輯方面的協助。

瞭解如何套用樣式

HubSpot中的CSS樣式是依據其在HubSpot中的設定順序套用的，如下所示。例如，在全局樣式表中設定的樣式會被特定頁面上設定的樣式覆蓋。

自訂模組 CSS
1. 附加到模組的樣式表。
2. 新增至模組 CSS區段的 CSS。
3. 在require_css 區塊內的模組 HubL 標記內的 CSS
透過require_css 區塊新增至模板的樣式表
HubSpot 預設樣式表 (例如 layout.css)
附加到模板的樣式表
在頁面的設定標籤上附加的樣式表
在所有網域的設定中附加樣式表
在特定網域的設定中附加的樣式表
在 <style> 標籤中新增的 CSS。例如，網站設定、頁面設定或範本的標頭 HTML。
透過頁面編輯器新增的樣式。HubSpot 也會在這些樣式中加入!important標籤。了解更多關於!important 標籤及其如何影響樣式。

page-editor-styles-tab

在預覽頁面或即時頁面尋找樣式

您可以使用瀏覽器中的開發者工具來檢查套用在您的即時網站或預覽頁面上的樣式。每個瀏覽器在排解樣式問題的方式上略有不同。

在 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，則造型可能是在頁面編輯器的Styles標籤中設定。HubSpot 會在這些樣式中加入!important標籤。了解更多關於!important 標籤以及它們如何影響樣式。
- 如果來源名稱是<style>，樣式可能會自動包含在元素中。通常，這是由於在可嵌入 HubSpot 資產的編輯器中設定了樣式，例如 CTA 或會議小工具。
- 如果檢查器中的聲明旁邊出現 element.style，則表示 CSS 已內嵌設定。內嵌式樣式是直接加入頁面 HTML 原始碼的樣式，或是模板的內嵌式樣式欄位。例如，源代碼中的內嵌式樣式會顯示為<p style="background:purple;">Hello world</p>。