建立、編輯和附加CSS檔案以設定網站樣式
上次更新時間: 六月 28, 2023
CSS (層疊樣式表)檔案是編碼檔案,可選擇頁面的元素並控制其演示文稿。 將自訂範本的HTML視為網站的骨骼,而CSS則是網站的皮膚。
本文介紹如何在HubSpot中建立、發佈和附加CSS檔案。 您可以在此處學習如何對特定頁面進行簡單的設計更改。 如果你使用的是主題範本,請了解如何編輯主題設定。
新建CSS文件
- 在你的 HubSpot 帳戶中,瀏覽「行銷」>「檔案和範本」>「設計工具」。
- 按一下左上角 的 資料夾圖示資料夾以展開側邊欄選單。 然後按一下「 檔案」 >「 新檔案」。

- 在對話方塊中,按一下 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 Professional和Enterprise )

請注意:此選項不適用於主題模板。 了解如何編輯主題設定。
若要從頁面編輯器的「設定」部分新增或刪除特定頁面的樣式表,請按照以下步驟操作:
- 瀏覽網站頁面或登陸頁面。
- 將遊標停留在頁面上,然後按一下「編輯」。
- 在頁面編輯器中,按一下頂部的「設定」。
- 向下捲動並按一下「進階選項」。
- 在「 頁面樣式表」下,按一下附加樣式表下拉式選單,然後選擇要附加的工作表。 按一下您要移除的樣式表旁邊的 X。
- 按一下右上角的「 儲存並發佈」。
您也可以停用由頁面從範本或網域繼承的樣式表。 禁用後,這些樣式表將不會套用到您的頁面:
- 在頁面編輯器的 「 設定」標籤下, 從包含的樣式表旁的下拉式選單中選擇「已停用」。
- 按一下右上角 的「儲存 並發佈」。
在網域級別上附加或移除樣式表(僅限Marketing Hub Professional和Enterprise )
請注意:主題範本必須包含註釋enableDomainStylesheets: true才能使用網域級樣式表。 了解有關模板批注的更多信息。
若要從網域上的所有內容中新增或移除樣式表,請按照以下步驟操作:
- 了解更多
- 在側邊欄選單中,按一下「 網站」 >「 頁面」。
- 按一下下 拉式選單,選擇您想要更新設定的網域 。
- 在範本 標籤上,捲動至 CSS和樣式表。 若要新增樣式表,請按一下 +新增樣式表。 按一下所附樣式表 旁邊的 X即可移除。
- 按一下 儲存。
請注意:當降級至HubSpot的Starter或免費工具時,附加的網域級別樣式表將繼續有效,直到您刪除它們為止。 移除所有樣式表後,便無法再在網域級別附加樣式表。 進一步了解如何降級訂閱。