上次更新時間： 六月 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或免費工具時，附加的網域級別樣式表將繼續有效，直到您刪除它們為止。 移除所有樣式表後，便無法再在網域級別附加樣式表。 進一步了解如何降級訂閱。
