建立、編輯和附加CSS檔案以設定網站樣式

CSS （層疊樣式表）檔案是選擇頁面元素並控制其演示文稿的編碼檔案。 CSS檔案無法附加到電子郵件或電子郵件範本。 

本文介紹如何在HubSpot中建立、發佈和附加CSS檔案。 你可以了解如何對特定頁面進行簡單的設計變更。 如果你使用佈景主題範本，請了解如何編輯佈景主題設定。

建立新的CSS檔案

• 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
• 按一下左上角的資料夾圖示folder，即可展開側邊欄選單。 然後按一下「檔案」>「新檔案」。

• 在對話方塊中，按一下CSS樣式表。 然後輸入CSS樣式表的名稱，然後按一下「建立」。

編輯CSS檔案

建立或開啟現有的CSS檔案後，請在程式碼編輯器中進行編輯。 除了標準CSS之外，程式碼編輯器還支援HubL變數和巨集，以便更輕鬆地維護CSS。 若要預覽HubL的渲染方式，請按一下以切換編輯器頂部的顯示輸出開關。 右側將打開一個面板，顯示渲染的預覽。

若要查看HubSpot範本的標準CSS選擇器清單，請參閱Boilerplate CSS。

發佈代碼前，請檢查代碼是否有HubL錯誤。 在自訂模組或編碼檔案中，有三個地方可以找到HubL錯誤或警告：

• 在程式碼編輯器底部的錯誤主控臺中。
• 在程式碼編輯器左側的錯誤溝槽中。
• 在編輯器右側的捲動列中。

無法發佈的錯誤會顯示為紅色，而一般警告則會顯示為黃色。 在程式碼編輯器底部，按一下顯示詳細資訊，即可在錯誤主控臺中查看更多有關錯誤的資訊，並按一下隱藏詳細資訊，即可折疊錯誤主控臺。

在錯誤主控臺中，只要程式碼或自訂模組中出現HubL錯誤或警告，就會顯示連結。 將滑鼠遊標懸停在程式碼編輯器左側的紅色錯誤指示器上，即可查看程式碼中的錯誤或警告。 點擊錯誤將使光標循環到該行上的所有錯誤或警告。 單擊滾動條批注將帶您到文件的該部分。

您也可以在程式碼編輯器中按一下行號，並取得相應的檔案更新網址。 這樣您就可以與其他人分享程式碼的連結，並將他們引導至您在檔案中工作的確切位置。

編輯檔案後，按一下右上角的發佈變更。 如果您想在其他編碼範本中呼叫此樣式表，請按一下左側邊欄選單中的「操作」>「複製公開網址」，複製工作表的網址。

附加到模板

在HubSpot中，您可以通過幾種不同的方式爲內容附加樣式表。 以下是您網站上附加樣式表的連結順序：

1. public_common.css * ：主要由HubSpot應用程序使用的樣式表，但也適用於某些網站功能。
2. 在「網站」>「頁面：新增至網站全域< head >的連結標籤」下的設定中的標題HTML。
3. Layout.css * * ：附加到所有拖放模板布局的默認響應式CSS文件。
4. 在「網站」>「頁面」下的設定中附加樣式表：附加到整個網站的樣式表。
5. 在「網站」>「網 誌」下的設定中附加樣式表：附加到網誌的樣式表（覆蓋網站全域表）。
6. 連結的樣式表* * * ：樣式表附加在範本佈局中。
7. 模板中的其他< head >標記：連結標籤已添加到特定模板佈局的< head >。
8. 頁面特定的樣式表：在頁面設定中附加的樣式表。
9. 頁首HTML ：在頁面設置中添加到特定頁面的< head >的鏈接標籤。

*必填

* *需要拖放布局

* * *建議範本版面配置的樣式表附件方式

若要將樣式表附加至範本，請在設計管理員中開啟範本。 在「標頭與內文選項」下的右側欄選單中，從「連結的樣式表」旁邊的「新增」下拉式選單中選擇一個檔案。 

您可以編輯或移除已附加的樣式表，方法是將遊標暫留於該樣式表上，然後按一下「編輯」以進行變更，或按一下「X」以移除該樣式表。

新增樣式表後，按一下右上角的「發佈變更」，即可使用範本將變更套用至即時分頁。

在特定頁面上附加或移除樣式表(僅適用於行銷中心專業版和企業版)