如何在WordPress中添加CSS代码?
WordPress中常用的加入CSS程式碼的方式有兩種:
- 一種是在Elementor編輯介面為特定的元素添加CSS樣式。
- 另一種是在主題自訂裡添加CSS。
第一種適合給個別頁面的特定元素單獨添加一些CSS樣式,第二種更適合全域設置,例如設定整個網站的圖片都帶有邊框。
在Elementor中添加CSS代码
首先要使用Elementor編輯需要新增CSS程式碼的頁面。
選取要加入CSS樣式的元素,開啟進階設置,就能看到Custom CSS,在裡面加入對應的CSS程式碼即可。
通常是先給指定的元素添加CSS ID或是CSS類名,以便更好的使用css選擇器為對應元素添加樣式。
要注意的是,CSS ID是具有唯一性的,一個頁面盡量不要出現2個相同的CSS ID。
「文檔語言可能包含以id聲明的屬性。真正讓ID特別的地方是它的唯一性,文檔中不能包含一樣的ID值;無論文檔語言是什麼類型,ID屬性總是會被作為元素的唯一標誌存在。在HTML中,所有的ID屬性都以”id”命名;XML應用可能會有不一樣的ID屬性,但是一樣的應用場景”
而CSS類別名稱是可以為多個元素添加相同的,方便控制多個元素的樣式,但是類別名稱沒有ID的權重高,有時候使用類別名稱添加樣式可能作用不到對應的元素,就是因為優先順序的原因。
使用選擇器的時候(新增CSS程式碼時)元素ID前面要加“#”,類別名稱前面要加“.”。
具體的CSS選擇器教學請參考:W3C的CSS2 selector文件。
在主题中添加CSS代码
外觀– 自訂– 額外CSS,就可以為整個網站添加CSS程式碼,例如為網站新增漸層色字體樣式。
這種方式更適合添加全域CSS樣式,如果你只是想對某個頁面的特定元素添加樣式,不建議在這裡添加,它會出現在每個頁面,增加頁面的程式碼量。
在元素選擇器上,除了為指定元素添加類別名稱或ID外,元素本身也是有ID或類別名稱的。
可以在瀏覽器開啟網站前端頁面,按F12審查元素,查看對應元素的類別名稱或ID:
至此,本篇WP新增CSS程式碼的兩種方式分享結束。
Well推薦你看為網站產生漸層色背景。
推薦你看更多建站教程。