建立、編輯及附加 CSS 檔案

層疊樣式表（CSS）透過選取頁面元素並為其設定樣式，來控制網站頁面的視覺呈現。您可以使用設計管理員來建立新的 CSS 檔案、編輯現有檔案，並將其套用至範本、特定頁面或整個網域。

若要對特定頁面進行簡單的設計變更，請進一步了解如何在內容編輯器中編輯頁面內容。若您正在使用主題範本，請進一步了解如何編輯主題設定。

建立新的 CSS 檔案

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
2. 在「尋找器」中，點擊左上角的「檔案」>「 新增檔案」。
3. 在對話方塊中，點擊下拉式選單並選擇「CSS + HubL」。 
4. 點擊「下一步」。
5. 在「檔案名稱」欄位中輸入檔案名稱。
6. 若要變更檔案位置，請點擊「變更」。在彈出視窗中，選擇新的檔案位置。 
7. 完成後，請點擊「建立」。

編輯 CSS 檔案

建立或開啟現有 CSS 檔案後，請在程式碼編輯器中進行編輯。除了標準 CSS 之外，程式碼編輯器還支援HubL 變數和巨集，讓您更輕鬆地維護 CSS。

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

1. { local.navDesignManager }}
2. 在檔案管理員中，點選「檔案」>「 新建檔案」，或開啟現有的 CSS 檔案。
3. 在程式碼編輯器中，輸入或更新 CSS 以進行編輯。 

若要預覽HubL的渲染效果，請點擊編輯器頂部的「顯示輸出」開關。右側將開啟一個面板，顯示渲染後的預覽。

檢查錯誤

發佈前，請檢查程式碼中是否存在 HubL 錯誤。錯誤會顯示在程式碼編輯器底部的控制台、左側的錯誤邊欄，以及右側的捲動列中。

會阻礙您發佈的錯誤將以紅色顯示，而一般警告則以黃色顯示。在程式碼編輯器的底部，點擊「顯示詳細資訊」可在錯誤控制台中查看更多錯誤資訊，點擊「隱藏詳細資訊」則可收起錯誤控制台。

發佈 CSS 檔案

編輯完 CSS 檔案後，請點擊右上角的「發佈變更」。若要在其他已編寫的範本中呼叫此樣式表，請點擊瀏覽器中的「動作」下拉式選單，並選擇「複製公開網址」。 

將樣式表附加至資產

將樣式表附加至您的模板、單一頁面或整個網域。樣式表會根據其附加位置，依照特定順序套用。以下清單反映了它們在您的網站上套用的順序：

1. public_common.css （必填）：此樣式表主要由 HubSpot 應用程式使用，但也適用於某些網站功能。
2. 頁首 HTML：在「內容 > 頁面設定」中，新增至網站全域<head>的 link 標籤。
3. Layout.css （拖放式佈局必備）：附加於所有拖放式範本佈局的預設響應式 CSS 檔案。
4. 附加樣式表（頁面）：在「內容 > 頁面設定」中附加至整個網站的樣式表。
5. 附加樣式表（部落格）：在「內容 > 部落格設定」中附加至您的部落格的樣式表（會覆寫網站的全域樣式表）。
6. 連結的樣式表（建議用於模板佈局）：附加於模板佈局中的樣式表。
7. 範本中的額外 <head> 標記：新增至特定範本佈局<head>中的連結標籤。
8. 頁面專用樣式表：在頁面設定中附加的樣式表。
9. 頁面首部 HTML：在頁面設定中，於特定頁面的<head>中新增的連結標籤。

將樣式表附加至範本

您可以在設計管理員的檢視器中，將樣式表附加至拖放式模板。至於程式碼模板，則需直接在程式碼編輯器中新增樣式表。

拖放式模板

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「設計管理工具」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「設計管理工具」。
2. 在檔案瀏覽器中，點擊您要拖放的模板檔案名稱。
3. 在檢視器中，點擊「連結的樣式表」區段中的「新增」下拉式選單，並選取您的樣式表。若要移除樣式表，請點擊 X。
4. 完成後，請點擊 右上角的「發佈變更」 ，將您的變更套用至使用該模板的 線上頁面。

程式碼模板

對於程式碼模板，請直接在程式碼編輯器中，透過 <link> 標籤，或在檔案的區塊中使用 HubL 的<head>標籤來附加樣式表。請參閱開發者文件以進一步了解程式碼模板。

將樣式表附加至特定頁面

請注意：此選項不適用於主題範本。瞭解如何編輯您的主題設定。

若要從內容編輯器的「設定」區段附加特定頁面的樣式表：

1. 導覽至您的內容：

   • 網站頁面：在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「網站頁面」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「網站頁面」。
   • 著陸頁：在你的 HubSpot 帳戶中，點擊「更多」，然後前往「內容」 > 「登陸頁面」。如果你的帳戶中沒有顯示「更多」，請直接前往「內容」 > 「登陸頁面」。
2. 點擊您的頁面名稱。
3. 在內容編輯器中，點擊「設定 」選單 ，然後選擇「進階」。 
4. 在對話方塊的「樣式表」區段中，點擊「附加樣式表」下拉式選單，並選取一個樣式表。若要移除樣式表，請點擊該樣式表旁邊的「X」 。
5. 若要停用從範本或網域繼承的樣式表，請點擊樣式表旁邊的下拉式選單，並選擇「停用」。

附加網域樣式表

請注意：主題範本必須包含註解enableDomainStylesheets: true使用網域層級的樣式表。進一步了解範本註解。

若要將樣式表套用至整個網域：

1. 在你的 HubSpot 帳戶中，點擊頂端導覽列中的「設定圖示」。
2. 在側邊欄選單中，點選「內容」>「 頁面」。
3. 點擊下拉式選單，選擇 您 要更新設定的 網域 。
4. 在「範本」分頁的「CSS 與樣式表」區段中，點擊「+ 新增樣式表」。若要移除樣式表，請點擊已附加樣式表旁的「X」。
5. 點擊「儲存」。

請注意： 當降級至 HubSpot 的Starter 方案或免費工具時，已附加的網域層級樣式表將保持有效，直到您將其移除為止。一旦所有樣式表均被移除，您將無法再於網域層級附加樣式表。進一步了解訂閱降級。