線上支援

WordPress 佈景主題 CSS 客製化(陸續新增)

自從本站上一篇文章 WooCommerce 結帳欄位客製化發佈後，接到了許多各式各樣的問題，我們也把許多實用的功能寫出來再反饋給提問的朋友，而很多時候比較偏佈景主題本身的問題，就沒有整理在文章中，所以就另外寫了這篇修改佈景主題常會遇到的狀況。

希望透過這篇文章，可以讓大家有個方向去修改佈景主題的 CSS ，尤其是付費的佈景主題，雖然控制項非常多，但總是會有想改的地方不受控，像是按鈕的位置、空白間隔太大、在手機版上看內容太小等等，這對於沒有接觸過前端程式的朋友可能會不好改，再加上每個主題的狀況也都不太一樣，所以我們以基礎的 CSS 入門為主，讓大家可以自由運用去修改自己的主題。

主要內容如下：

Topic 0

認識 CSS

如果你有問過工程師朋友要怎麼開始學做網頁，通常都會得到先去學 HTML 與 CSS 的答案，不是工程師聯合起來串通好要這樣回答，而是網頁視覺呈現的基礎就是他們。HTML 全名為超文件標示語言，而 CSS 叫做層疊樣式表，白話的說他們的關係就像前陣子很紅號稱有療癒效果的著色繪本。

還沒有上色的外框就像是 HTML，它決定了這一頁的架構長什麼樣子，然後 CSS 就是彩色筆，要把這頁面著上各種顏色或樣式，當然 CSS 不只可以控制顏色，它還有許多屬性可以使用，但你不用背起來所有的屬性，只要記得它是調整網頁各個元素外觀的工具，想要改的時候再去 Google 關鍵字「 css how to change… 」，就可以找到相對應的屬性來使用。

或是前往 w3schools，看看有什麼相關的屬性可以用，萬一沒找到的話就可以在文末留言給我們了XD

寫 CSS 最重要的觀念就是你寫的這些屬性，會作用在哪個 HTML 元素上面，基本寫法是「 HTML 標籤 { 屬性 } 」，首先我們先來看空白繪本 HTML 的組成，要讓 CSS 畫筆決定要在 HTML 哪格著上顏色，主要有三種方法：

1、指定 HTML 標籤

每段 HTML 都是由各種標籤所組成，有開頭跟結尾，讓 CSS 直接指定 HTML 標籤後，這個標籤就會套用 CSS 屬性，程式範例如下：

// HTML
<h1>我是大標題</h1>

// CSS
h1 {
color: red;
}


當想要控制 HTML h1 標籤裡面的文字顏色時，CSS 部份就寫 h1 { color:red; } 就可以了，這樣就代表會把 color 這個屬性套用到 h1 標籤上，而這頁面中所有的 h1 標籤都會被改成紅色，如果只希望特定的 h1 標籤套用 color 個屬性，就需要下面的第二種方法。

2、指定 class 類別名稱

HTML 標籤本身可以帶有 class 屬性，為了就是用來避免同樣的 HTML 標籤套用到同一個 CSS 屬性，假設現在有兩個 h1 標籤，你只想要第一個改顏色，那就把第一個 h1 加上 class，程式範例如下：

// HTML
<h1 class="text-red">我是大標題一，我想變紅色</h1>
<h1>我是大標題二，我不想變紅色</h1>

// CSS
.text-red {
color:red;
}


注意到 text-red 這個 class 了嗎？HTML 中使用 class=”text-red” 來設定，在 CSS 中則用點「.」來指定 class，所以就會變成 .text-red { color: red; }，這樣就只有帶有 text-red 這個 class 的 h1 會被套用 color:red 這個屬性，而大標題二的 h1 就還是會維持原本顏色。

附帶一提，還有一個叫做 id 名稱，它與 class 的作用一模一樣，差別只差在 class 是用點「.」來接名稱，而 id 是用井字號「 # 」，還有 id 通常是指定給 javascript 使用的唯一值，像是設定文字變紅色的功能通常可以套用到多個 HTML 標籤上，所以 class 可以重覆加入，而 id 只可以加入一次，也就是說相同名稱的 class 在一個頁面可以出現多次，而同一頁面中不會有重覆的 id。

實際的用法對於開發者比較需要了解，如果你是買主題且不熟 CSS 的朋友，看到 # 字號也不用擔心，就簡單想成它跟 class 是一樣的作用就好。

3、階層指定

HTML 的的結構就像大腸包小腸一樣，是一層包一層的，而 CSS 也可以使用連接式寫法，指定糯米腸把屬性直接套用在香腸身上，我們來看程式範例：

// HTML
<div>
<h1>我是被 div 包住的大標題</h1>
</div>
<section>
<h1>我是被 section 包住的大標題</h1>
</section>

// CSS
div h1 {
color:red;
}


div h1 就是使用連接式寫法來把 color 屬性套用給「我是被 div 包住的大標題」，所以「我是被 section 包住的大標題」不會受到影響，如果要控制「我是被 section 包住的大標題」的話，想必大家都知道怎麼寫了，就是 section h1 { color: red; }。

HTML 標籤可以用拼接式的，class 當然也可以，程式範例如下：

// HTML
<div class="title">
<h1>我是被 div 包住的大標題</h1>
</div>
<section class="title">
<h1>我是被 section 包住的大標題</h1>
</section>

// CSS
.title h1 {
color:red;
}


上面這樣的寫法，可以讓有名為 title 的 class 同時套用 color:red 屬性，也就是說 div 跟 section 包住的 h1 都會被改變文字顏色。另外非常關鍵的一點，CSS 連接式的寫法，是可以跨很多層的 HTML，再拿大腸包小腸來說，通常外面會有一層紙袋，連接式的寫法可以這樣寫「紙袋 > 香腸」，直接跨過糯米腸，看到這例子只覺得肚子餓的朋友可以看下面的程式範例：

// HTML
<div class="title">
<div class="titleWrapper">
<h1>我是被 div 包住的大標題</h1>
</div>
</div>

// CSS
.title h1 {
color:red;
}


上述的例子 CSS 連接式直接寫 .title h1 就可以了，而不用寫 .title .titleWrapper h1 ，雖然後者也是可行而且權重較高（文後會提到權重），這樣的寫法之所以很關鍵，並不是因為午餐時間到了，而是在 WordPress 的 HTML 結構當中，每一個頁面或是文章都會有一個獨立的 class 在 HTML 的 body 標籤上，通常會叫做 postid-XXX，XXX 是這篇文章的 id 編號，所以假設你今天要修改一篇文章裡面 h1 標籤的文字顏色，並希望它只會在這篇文章有所改變而不會影響到其它文章的 h1，CSS 的連接式就可以寫成 .postid-XXX h1 來指定只在文章 id 為 XXX 的頁面上裡面的 h1 標籤。

在 CSS 的專有名詞中，大括號 { 左邊的部份，也就是像上面例子的 h1、.title h1、.title .titleWrapper h1 這些叫做 selecter，中文叫選擇器，也就是 CSS 選到哪個 HTML 標籤來進行屬性的套用，一般在寫連接式寫法的時候，多半是用空格來連結，事實上還有很多其它的連接方法可以指定特殊的對象，像是大於符號 >、加號 ＋ 等等，萬一你在主題中看到這些符號不用緊張，就 Google 關鍵字「CSS 選擇器 加號」就可以查到是代表什麼意思了。

Topic 1

WordPress 加入 CSS 的方式

在不使用 WordPress css 外掛 ( ex: css hero ) 的情況下， WordPress 裡面有很多地方可以加入 CSS，至於該如何決定很簡單，就看你希望是整個網站擁有相同選擇器的 HTML 標籤都要被套用，還是只要套用在局部的頁面或元素上就好，以下就作用範圍的不同，介紹該把 CSS 寫在哪裡：

1、針對全站調整

假設你今天想要修改主選單的背景顏色，而主選單是不管什麼頁面都會有的內容，這時候就適合寫在全站的 CSS 中。而全站的 CSS 寫入的方式有兩種，一種是使用 WordPress 內建的附加的 CSS，二是通常付費佈景主題的設定項裡面會有欄位可以填寫，以下先就內建的方式做介紹。

登入 WordPress 後台

使用「附加的CSS」進行全站 CSS 設定

可以使用 /* 這裡面是不會作用的文字 */ 來寫一些註解提醒自己這段 CSS 的作用

第二種方式如果你是使用付費主題，因為每個主題的狀況可能都不太一樣，所以這邊先以 Divi 為範例，示範如何使用主題的設定項來控制全站的 CSS。

進入 Divi 主題選項

捲到最下面就可以看到自訂 CSS

2、針對特定頁面調整

假設今天有一檔促銷活動頁面，你希望在內文所有的標題可以更顯眼的話，就可以把 CSS 直接寫在這個頁面之中，這樣這些屬性就只會作用在該頁面。

進到要修改的頁面或文章

在最上方加入 HTML 標籤 <style>，這樣就可以把 CSS 寫在頁面中

3、針對特定頁面特定元素調整

沿續上一個促銷活動頁的修改，假設我只想讓第一個 <h2> 改變 CSS 樣式，依照上面提到的做法，可以幫第一個 <h2> 加入 class 名稱，譬如 <h2 class=”text-red”> ，或是可以用第二種方法，把 style 屬性直接寫在 HTML 標籤裡面：

// HTML
<h2 style="color:red;">Hellowp 入門計劃限時優惠年繳只要 5,400 喔～～～</h2>


正常情況下，使用 class 是比較好的做法，因為哪天 .text-red 想要新增或是修改 CSS 屬性，就可以一次調整完成，如果是用 style 的方式寫，比較適合用在一次性的修改，雖然很方便，但除非不得已的情況下，還是會建議使用 class。

或許你會問：「如果在不同地方但 CSS 選擇器都選到了同一個對象，瀏覽器會以哪邊的為第一優先呢？」非常好的問題，理論上來說瀏覽器是一行一行程式讀取的，所以最後寫的會蓋過之前寫的，通常全站的 CSS 都會在網頁一開頭的時候載入，而針對特定頁面的 CSS 會在網頁中間才被讀取到，所以如果遇到相同的選擇對象時，後者的權重會蓋過前者，但有兩個常見的例外狀況。

第一個是上面文中有提到的狀況，同樣是要修改 h1，使用越接近 h1 的連接式選擇器以及選擇器越完整的權重會較高，有點抽象，但不想再拿出大腸包小腸了，直接看程式範例：

// HTML
<div class="title">
<div class="titleWrapper">
<h1>我是被 div 包住的大標題</h1>
</div>
</div>

// CSS
.title .titleWrapper h1 {
color:yellow;
}
.titleWrapper h1 {
color:blue;
}
.title h1 {
color:red;
}


各位可以猜看看 h1 到底會變什麼顏色？我們先看讀取順序，「.title .titleWrapper h1 」是最先出現的，而「.title h1 」擺在最後，所以依照順序讀取的方式來看，應該是會變成紅色，但同樣都是選到 h1，比較接近 h1 的 class 是 .titleWrapper，所以應該是變藍色，但(還來!?)指到 h1 選擇器 class 的路徑最完整，所以答案揭曉，會是「.title .titleWrapper h1」所指定的黃色！

而第二個常見情況，有試著修改過 CSS 的朋友可能會知道，就是在屬性的後面寫上 !important，像是 h1 { color:red!important; }，這代表不管順序誰先誰後、誰指定的 class 路徑完整，只要附上 !important ，這個屬性的權重就是最高的，看似非常方便的大絕招卻會帶來後續的麻煩，常見的問題就是修改的人不明白 CSS 選擇器的權重規則，當一發現改不動的時候，就一律使用 !important 來覆寫所有的屬性，這可能會造成覆寫到其它不想動到屬性的對象上，或是剛好同一個對象在別的地方也被指定了 !important 的屬性。

沒錯，當大家都給它 !important 的時候，權重問題又回到了第一個狀況，也就是要比順序跟誰的選擇器完整，所以當不了解第一種狀況而只用 !important 時，就會發生怎麼改都改不動的情形。

說明完這三種方法後，接下來的第四種方法是我個人比較建議也是開發上常用的做法，通常我們會用獨立的 .css 檔案來把所有的 CSS 都寫在同一個地方，一來是方便管理，二來是搭配快取讓所有的 CSS 只要下載一次就就能載入完成，如果是散落在各個地方就會要重新讀取造成讀取時間增加，所以為了想更系統化整理 CSS 的朋友，接下來介紹該如何使用 .css 檔。

Topic 2

使用網頁編輯軟體+使用子主題

不論是在附加的 CSS 或是使用文字模式來修改 CSS 都沒有使用網頁編輯器來的方便，因為在編輯器中，才能比較方便的整理格式，另外在撰寫上會有方便的屬性提示功能來避免錯別字的情況發生，在這篇教學中我們使用的編輯器是 Sublime Text 3，安裝方法請參考 WooCommerce 結帳欄位客製大全文章的操作步驟，並請接續完成建立子主題的部份，確保了解何謂子主題以及為何需要它後再往下看。

完成子主題的建立後，我們使用編輯器打開子主題的 wordpress style.css，這個檔案就是我們要把所有 CSS 都寫在這邊的檔案，以下就檔案內容簡單說明：

子主題 style.css 的寫法

A.匯入父主題的 CSS

使用 @import 這個關鍵字可以把其它路徑中的 .css 檔整份匯入到這份文件中，之所以要先匯入父主題的 CSS 是因為我們啟用了子主題，要先把原本已有的 CSS 拉進來，不然整個網站的樣式就會爆炸，用下面這個簡單的例子來說明 @import 的具體功用：

/* a.css 檔案裡面的樣式 */
.title h1 {
color: red;
}
/* b.css 檔案裡面的樣式 */
@import url('a.css')
.title h2 {
color: blue;
}
/* 因為在 b.css 裡面已把 a.css 檔案中所有的樣式都匯入
所以瀏覽器在讀取 b.css 的時候看起來是這樣 */
.title h1 {
color: red;
}
.title h2 {
color: blue;
}


還記得上面提到的依讀取順序判定權重嗎？為了要父主題的 CSS 先被讀取，所以 @import 會放在最上面，所以接下來我們自己加入的 CSS，就有較高的權限去覆蓋過父主題的 CSS，達成自訂的目標。

B.使用註解來說明 CSS 用途

有時候這個網站不只你一個人在修改，就算是你自己改的，時間久了也有可能會忘記當初為什麼要寫這個，所以避免接下來要修改的人不知道這段 CSS 的用途，通常我們會在開始寫之前加上註解。另外在現有主題的 CSS 中，也常會看到 header、nav、sidebar 之類的註解關鍵字，這就代表這一段落的 CSS 是控制某個頁面中的區塊，像是 header 通常指的是頁首區塊，而 nav 是導覽選單、sidebar 是側邊欄的 CSS，你自己在寫的時候也可以加上這一類的註解，來告訴自己或別人這一段 CSS 是控制哪個區塊，而未來在這區塊裡面又有需要新增的 CSS，也就一併寫在這個地方，之後要搜尋的話就會非常方便。

CSS 註解的寫法也是包含一個開頭跟結尾，開頭是「/*」，結尾是「*/」，它們不用一定要在同一行，只要是在這兩個符號中間出現的任何內容，都會被視為註解。註解可以寫中文，但如果不是用有 UTF-8 編碼的編輯器開啟會出現亂碼，所以通常會用英文來做註解。

C.縮排使用二或四個字元

通常寫 CSS 都會把屬性的部份做換行縮排，目的就是為了好閱讀，通常會用 tab 鍵進行縮排，而在 ST3 在右下角可以看到 Tab Size，預設值為 4，你可以依照個人喜好去調整按一次 tab 要縮幾個字元。

設定縮排字元數

D.打關鍵字跳出建議屬性

屬性提示是使用網頁編輯器最大的好處，它可以避免拼錯字，還可以找到你可能需要的屬性，如果你想要設定字型的尺寸，但不太確定正確的屬性名是什麼，你就可以先打 font，它就會自動帶出 font 相關的屬性，使用上下鍵選擇，按 enter 後它就會自動帶入屬性名稱。

自動帶入屬性功能

熟悉了網頁編輯器之後，接下就開始實作修改 CSS 吧！

Topic 3

CSS 修改工作流程

裝好了 Sublime Text 3，也確定了有成功安裝並設定好 SFTP 套件，接下來就把 ST3 晾一邊，因為主角就要登場了，那就是你每天在用的「瀏覽器」！別以為瀏覽器只是看網頁的工具，事實上他才是修改 CSS 最強大的幕後推手。雖然我自己習慣是用 Safari，但考慮到 Chrome 可能比較多人在用，所以接下來就用 Chrome 來進行操作示範。

Chrome 有什麼功能呢？簡單來說，它提供了非常多的實用工具，像是載入速度偵測、資源查看、輸入控制台，最重要的是它可以即時查到滑鼠指到的 HTML 被套用到哪一個 CSS 樣式，並且可以即時修改查看結果。接下來我們開啟一個網站，來試試改變一些 CSS：

選擇想要修改的 HTML

檢視目前元素所使用到的 CSS 屬性

有看到這個 h2 標籤的 CSS 選擇器了嗎？它是「.et_pb_cta_0.et_pb_promo .et_pb_promo_description h2 」，這個就是 wordpress css class，還記得連接式中間空格的寫法嗎？如果記得的話就可以很快的理解，這個 h2 是被至少兩層的 HTML 包住，但你可能會對第一個 class「 .et_pb_cta_0.et_pb_promo 」感到困惑，當兩個 class 中間沒有空格時，指的是含有兩個以上的 class 名稱，也就是 <div class=”et_pb_cta_0 et_pb_promo”>。在 class 裡面可以有不只一個名稱，依照上面提到的權限問題，越完整的 class 名權限越高，也因此 .et_pb_cta_0.et_pb_promo 的權限大於只寫 .et_pb_cta_0 的選擇器。

接下來讓我們直接在瀏覽器裡面做一些修改：

新增一項 CSS 屬性

text-decoration 是裝飾文字的屬性

underline 是下底線效果

可以看到 h2 標籤已經改變了樣式

對，就是這麼神奇，在瀏覽器的開發工具裡面可以直接修改 CSS 樣式，但這個修改並非真的在網站主機上，而是只有在你自己的電腦上才看的到，所以你可以先用開發工具來進行 CSS 的調整，因為可以即時預覽，所以可以更精準又即時的預覽修改效果，等到確認是希望的修改結果，再把整段 class 貼到你的 style.css 檔案之中。

複製 CSS 選擇器以及屬性

回到 ST3，開啟 style.css 後貼入

把格式整理好後上傳到網站主機

屬性「 font-weight: 800; 」可以把它移除掉，因為它已經被定義在原有的 CSS 之中，如果沒有打算要修改它，在我們的 .css 檔案中就不需要再去重覆寫一次。

以上的步驟大概就是我們修改 CSS 的工作流程，使用 Chrome 的開發工具調改，完成後複製貼上到網頁編輯器中，最後再把 style.css 檔案上傳到網站主機。用這方法改記得要完整複製 CSS 選擇器，如果你在開發工具裡面就發現已經有改不動的情形，就可以先檢查是否有其它地方的選擇器權重更高，如果有，就使用上文提到的方法來達到 CSS 覆寫的結果。

Topic 4

禁忌的消失大法

「請問該怎麼讓 XXX 不要出現？」這應該是我們每週一定會被問到超過三次以上的問題，基本上是買付費主題的話，去爬一下它的說明書，通常在 Themeforest 上面購買的主題一定會有說明文件，沒有的話這主題會上不了架，因為是平台規定一定要有的，根據你希望讓它隱藏的區塊是什麼功能，去找出說明文件相對應的操作教學，看它能否關閉或取消。

其次是 WordPress 內建的一些基本功能，像是留言區塊、上方工具列、或是側邊欄中的某個小工具，這些基本上都是可以在後台設定關閉的，如果你確定你希望隱藏的功能不在後台設定裡面，可以 Google 一下關鍵字「 WordPress how to hide… 」，常常會有相關的 Hook 可以移除這些東西，但要使用前請先確保理解子主題的設定方式以及 Hook 原理，避免改錯了不知道怎麼恢復。

最後一種情況是主題把它寫死了，沒有設定項可以控制，或是 WordPress 本身並沒有關閉它的機制，爬了很多文，發現要改很多程式碼，請求原廠又無法獲得幫助，這時只剩下一招，傳說中禁忌的消失大法，步驟如下：

找到要讓它消失的 HTML

使用 display:none

這招之所以是禁忌，因為實在不怎麼健康，第一：用這種方式隱藏 HTML 還是會顯示，如果你今天要隱藏的是一些不想讓人看到的資訊，有心人使用開發工具，把 display:none 屬性關閉，就全部都看光光了，第二是因為這麼做會增加載入速度的負擔，不要讓它出現在頁面中的內容也不該存在於 HTML 之中，避免為了讀取這些無用的內容而增加下載時間。

display:none 的用法適合在第一眼不需讓使用者看到、而必須透過介面的操作才會出現的內容，像是常看到的 Tab 頁籤功能，第二個之後的頁籤內容通常都是 display:none，總之用這方法來讓某些區塊或內容消失是不恰當的做法，要謹慎使用。

Topic 5

外邊距與內邊距

「要如何把 XXX 移過來一點點？」這是每週熱門問題的第二名，在國外付費主題中，所有內文排版都是依照歐文來進行優化，換上中文後就會發生字型尺寸過大或小、間距過寬的情形，造成版面的原始比例失衡。這時就要透過微調來重新調配視覺比例。在 CSS 裡面可以用來調整位置的方法非常多，但最基本的就是外邊距(margin)與內邊距(padding)。

為了更好理解邊距的概念，我們先想像每一個 HTML 標籤都是一幅被裱框起來的名畫，margin 指的是畫框與外面物體之間的距離，而 padding 是指畫布到畫框的距離，這邊還有個屬性叫 border，也就是畫的邊框，但通常我們不會用 border 來控制位置，所以主要是 margin 與 padding。

margin 與 padding 的具體展示

如果今天要把這幅畫往下移一點，最直覺的想法就是去調整 margin 與上方的距離。margin 可以接受四個數字，寫成「 margin: 1px 2px 3px 4px; 」，四個數字分別代表距離上方、右方、下方與左方的距離，單位可以用 px 或是百分比，所以要把畫往下移 10px，就可以寫成「 margin: 10px 0 0 0; 」，或是可以寫成「 margin-top: 10px; 」，對，另外還有 margin-bottom、margin-left、margin-right 這樣的寫法，但就是只能寫一個數字，而這距離也可以寫成負數，像是「 margin: -10px 0 0 0; 」指的就是再往上移 10 像素。

但 margin-top 跟 margin-bottom 有時會失靈，第一個狀況是如果這個 HTML 標籤被設定為行內元素或它本身就是，上下 margin 就會沒有作用，要讓它有作用必須先把它改設定為區塊元素，程式範例如下：

// HTML
<p class="inline-element">P 標籤本身為行內元素<p>
<div class="block-element">DIV 標籤本身為區塊元素，但在 CSS 裡把它設定為行內元素<div>
// CSS
.inline-element {
margin: 10px 0 10px 0; /* 這樣設定上下外邊距是不會有效果的 */
display: block; /* 要先把它變成區塊元素 */
margin: 10px 0 10px 0; /* 這樣才會有效果 */
}
.block-element {
display: inline; /* 被設定成行內元素 */
margin-top: 10px; /* 這樣寫就無效 */
}


另一個狀況是縱使已經設定為 block 區塊元素了，但如果第一個 HTML 標籤設定了 margin-bottom，而第二個接著它的標籤設定了 margin-top，則會發生邊界重疊的 bug，所以記得在使用上 margin-top 或 bottom 只要採用一種就好，不要在兩個上下並排的標籤同時使用這兩個屬性，更多關於外邊距重疊的問題可以參考 MDN 的文章。

介紹完 margin 後接下來是 padding，padding 就沒有像 margin 有這麼多規矩，只要記得它是畫框裡面「畫布的延伸」，如果畫布上面的內邊距增加，它也能拉長與上面的距離，而且也不用考慮它是不是區塊元素，在很多時候它會比 margin 來得更方便使用。但只有一種情況要注意，就是它增加的距離也是畫布的一部份，所以如果你的畫布有上色或是有圖片，新增加的距離也會填滿原有的顏色。

Topic 6

手機版優化

關於手機版的部份，很多人可能有聽過 RWD，也就是 Responsive Web Design，中文叫做自適應網頁設計或是響應式網頁設計，它的基本邏輯就是每個 HTML 標籤的寬度不用絕對單位寫死，像是上面例子都是使用 px 像素，這就是一種絕對單位，在電腦螢幕上設定 1000px 寬看起來很正常，但在整個畫面只有 400px 寬的手機上，1000px 的內容就會爆炸了，所以我們需要用百分比這種相對單位來設定寬度。

當寬度設定 50% 的時候，不管是在什麼什麼寬度的螢幕下，都只會佔 50% 的寬度，如果營幕是 1920px 內容就變成 960px，螢幕是 400px 內容就變成 200px，這時百分比就是一種相對單位，也就是相對於螢幕寬度的單位。但當這樣寫的時候會有問題，有時候需要在寬螢幕上用絕對單位，在小螢幕用相對單位，這時就需要另一把武器：Media Query。

Media Query 事實上不是全新的東西，原來也並非是設計出來用在 RWD 上的，但就剛好時機到了就被湊合在一起了XD。它的用法很簡單，就是在原本的 CSS 外面再多包一層：

// HTML
<section class="block">我是要被處理的內容<section>

// CSS
.block {
width: 1180px; /* 正常情況下內容的寬度 */
}
@media screen and (max-width: 760px) {
.block {
width: 80% /* 當畫面小於 760px 寬的時候，內容寬度是畫面的百分之八十寬 */
}
}
@media screen and (max-width: 400px) {
.block {
width: 100% /* 當畫面小於 400px 寬的時候，內容寬度是畫面的百分之百寬 */
}
}
@media screen and (min-width: 1440px) {
.block {
width: 1440px /* 當畫面大於 1440px 寬的時候，內容寬度是 1440 像素 */
}
}


這就是 Media Query 的寫法，關鍵在 @media 跟 max-width、min-width，max-width 想成是畫面的最大寬度，在這寬度以下的裝置會套用這些 CSS 屬性，而 min-width 就是畫面最小寬度不小於設定的像素值，兩個同時寫還可以來鎖定特定範圍的尺寸，但怕不熟的朋友搞混，只要先記得 max-width 是用在手機、平板電腦，min-width 是用在超大螢幕上這樣就夠了，想了解更多的朋友可以參考這邊。

所以回到真實的範例中，當你發現你的網站在手機上面看時標題太大、內容太窄時，就可以用 Media Query 來進行調整，在調整時也務必記得權重問題，相同的選擇器在符合 Media Query 的螢幕條件下，權重會優先於沒設 Media Query 的選擇器。以下的範例將說明如何在 iPhone 6 Plus 或是寬度小於 414px 時讓標題的字型尺寸變為 25px。

點擊右鍵選擇「檢查」進入開發者工具，Chrome 可以模擬手持裝置的畫面

選擇要使用哪種裝置來模擬瀏覽你的網站

因為畫面寬度是 414px，而 CSS 中有設定當畫面小於 767px 的時候套用下方 CSS 選擇器

直接在此處修改 CSS，調整到合適的樣式後，把選擇器複製起來，

回到編輯器把 CSS 貼上，然後把 max-width 修改為 414px 以及整理好 Media Query 的標準格式

style.css 修改好後就上傳主機，這樣就完成修改了。但要小心一個地方，這個主題在原本的 CSS 之中 font-size 屬性有被指定 !important，還記得前面提過的權重問題嗎？當大家都有 !important 的時候，比的就是讀取的順序 > 選擇器的完整度，現在還多了一個 Media Query 條件。

當螢幕尺寸為 414px 的時候，max-width: 414px 會比 max-width: 767px 來得權重更高，因為前者更精準了符合當下的條件，但這範例中理論上不該使用 !important 的，只是因為這套佈景主題的字型尺寸是用 Divi 視覺化編輯器動態產生的，它的設計前提是以用它的人都會是用編輯器來修改尺寸，所以加了 !important 來避免編輯器的設定被蓋過。

最後在這邊再重新整理一下 CSS 選擇器的權重順序，由上至下代表權重高到低：

神大無敵 !important >

高有加 Media Query 且符合螢幕寬度條件的選擇器 >

中指定路徑越完整的選擇器 >

低離目標 HTML 標籤越近的選擇器 >

地最後被載入的選擇器

Topic 7

改變互動狀態

在網站易用性的原則之中，有一點很重要，那就是「要讓按鈕看起來可以點」。這可以從兩個層面來解釋，一個是如字面的意思，另一個是當滑鼠進入按鈕後，會與使用者有互動的反應，像是按鈕變色、字型變大、增加陰影，藉此來提示使用者你已經進入按鈕的感應範圍，下一個動作如果點擊的話就會觸發事件。

常用的滑鼠觸發事件有兩種，主要是 :hover 與 :active，程式範例如下：

// HTML
<a class="link">我是一個即將要被點的按鈕<a>

// CSS
a.link:hover {
color: red; /* 滑鼠進入時文字變紅色 */
}
a.link:active {
color: blue; /* 滑鼠左鍵按下時文字變藍色 */
}


Topic 8

常用 Helper

為了讓 CSS 的屬性可以更容易的被運用，我們可以事先定義好 class，當你在編輯內容或是可以修改 HTML 的地方，只要加入相對應的 class 名稱就可以快速套用樣式，而不用再重覆寫相同的 CSS，這種 class 通常叫做 helper class，為了與一般正常 class 區分，在命名時會多一個 h-，像是 class=”h-font-size-16″，下面列出一些常用的 helper class ，可以視需求修改成適合自己網站使用的 CSS。

.h-mt10 { margin-top: 10px!important; } /* 增加上方外邊距 10 像素 */
.h-mt20 { margin-top: 20px!important; } /* 增加上方外邊距 20 像素 */
.h-ml20 { margin-left: 20px!important; } /* 增加左方外邊距 20 像素 */
.h-mr40 { margin-right: 40px!important; } /* 增加右方外邊距 40 像素 */
/* 以此類推，可以自由增加需要的值，或是新增內邊距的 helper class*/

.clearfix:before,
.clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both; } /* 這三行是一起的，主要是清除文繞圖的效果 */


因為要讓 helper class 可以達到效果，所以通常都會用 !important 來讓它強制執行，如果相同屬性已經有被用到 !important 了，就又要開始比大小、比誰權限高了，這也是為何盡量不要用 !important 的原因，因為它會讓 helper class 變成魯蛇。

Topic 9

其它

CSS 是一門入手容易、要專精卻非常困難的一種語言，在 codepen 上可以看到一堆神人用 CSS 畫圖或是做 3D 動畫，但如果是使用現成的佈景主題，基本上就是修改開發者已經寫好的樣式，至於該如何修改就是把握文中所提的大方向，了解要把 CSS 寫在哪、勤用 Google 大神查 CSS 屬性、使用網頁編輯器修改，以及最最最重要的權限問題，掌握這些原則就能做到理想中的修改了。

如果你在修改 CSS 有遇到任何問題，可以在下方留言，不是太困難的問題我們都可以幫忙看看，或是可以再加入到文章中來幫助遇到相同問題的朋友，希望從這篇開始，大家一起來玩 CSS 吧！(陽光)