CSS基礎入門

Andy 0

要能夠靈活的設計WordPress網站,達到自己想要的外觀,CSS可以說是相當重要的能力,不僅能擴充免費版的佈景主題,也能補足內容編輯器的不足。

每一個網站都是都是藉由容器(div)堆疊出來了,而容器裡面有各式各樣的元素(elements),每一個容器跟每一個元素,都能夠有兩個屬性,一個是類別,英文是class,另一個是名稱,英文是id,class跟id跟用中文溝通的比較少,多半都用class跟id。

而class跟id就是CSS跟HTML溝通的管道,每一個元素、容器可以完全不指定class或是id,但是只能套用一個id,class可以很多個。

簡單來說,id就是網頁內元素的身分證字號,在命名id的時候要注意不要有重複的名稱出現。class的話可以理解成元素的身分(頭銜),所以每一個元素或是容器可以有很多的身分(頭銜)。

針對id的CSS,會用#作為指定,而針對class的CSS設定,會用點 . 作為指定。

所以如果有一個p元素(文字段落)id是paaa,class是ptext,那麼在HTML的定義就是

<p id="paaa" class="ptext">文字內容</p>

如果CSS只有簡單一兩個設定,可以直接定義在標籤之內

<p id="paaa" class="ptext" style="CSS內容">文字內容</p>

如果有比較多設定,就會分離出來設定

<p id="paaa" class="ptext" >文字內容</p>

<style>
#paaa
{
CSS內容
}
.ptext
{
CSS內容
}
</style>

而如果有更多的CSS設定,可以用嵌入檔案的方式。以Wordpress為例,任何的佈景主題或是外掛,都會將所有的基礎CSS寫在名稱為style.css的檔案當中,特殊的css內容才會寫到自己定義的檔案名稱.css檔案中。

CSS的優先權

CSS概念中有一個優先權的順序,以WordPress佈景主題為例,會先套用style.css檔案內的設定,但是這個檔案內的任何程式內容都是最低優先權的。

而如果有用頁面編輯器,編輯器的設定會覆蓋掉style.css的內容,也就是說,頁面編輯器的CSS設定優先權會高於佈景主題的預設。

但三個層級是,Custom CSS區塊,佈景主題在自訂的區塊,有一個CustomCSS的選項,這邊撰寫的CSS程式碼,優先權是最高的,不過這個區塊的優先權與頁面編輯器的Custom CSS區塊的優先權,每一個編輯器設定不同,需要自己測試才會知道。

所謂優先權就是,哪一個設定會被套用,優先權低的會被優先權高的覆蓋過去。

不過有一個程式碼可以打破這個規則,就是「!important」,這個程式碼會覆蓋過所有的優先權,讓這個程式碼達到最高先權。

「!important」是放在分號的前面。

例如低優先權的CSS設定區塊寫了!important,那這行CSS設定就會超過高優先權的CSS設定,但是如果高優先權區塊的同樣設定的程式碼,也設定了!important,那麼在兩邊都有!important的狀況下,就會維持套用高優先權的設定。

如果我們再做任何CSS設定的時候發現沒有作用,如果確認cache快取或是cookie不是影響因素,那就可能是優先權的問題,可以嘗試透過!important來解決。

不過CSS的邏輯規則不是非常的嚴謹,遇到問題的時候還是要個案處理,有時候可能是佈景主題在布局的時候,就在預設的style.css寫上了!important規則,如果外掛又套用CSS,又加上頁面編輯器的CSS設定,造成一個元素可能有三至四個CSS設定,就有可能造成整體CSS優先權的衝突。

Andy

現職橡實網頁設計工程師,經歷了近十年的CMS開發經驗,走向減法思考的WordPress玩家,期望用最乾淨的程式,最少的外掛,解決最多的問題!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *