操作碰到困難?試試搜尋功能吧!

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,至於該如何決定很簡單,就看你希望是整個網站擁有相同選擇器的 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 結帳欄位客製大全文章的操作步驟,並請接續完成建立子主題的部份,確保了解何謂子主題以及為何需要它後再往下看。

完成子主題的建立後,我們使用編輯器打開子主題的 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 」,還記得連接式中間空格的寫法嗎?如果記得的話就可以很快的理解,這個 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*/

.h-text-center { text-align: center!important; } /* 把文字置中 */
.h-hidden { display: none !important; } /* 禁忌的消失大法 */
@media screen and (max-width:767px){ .h-mobileonly-767 { display: none!important; } } /* 在螢幕寬度小於 767 像素時隱藏 */
@media screen and (max-width:414px){ .h-mobileonly-414 { display: none!important; } } /* 在螢幕寬度小於414 像素時隱藏 */

.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 吧!(陽光)

 

 

13 則留言

  • 超棒的,那個DISPLAY:NONE真的很好用

  • John表示:

    感謝大神的無敵詳細教學,
    而且是針對Wordpress作為示範。
    想學習CSS的朋友一定要讀這篇~

  • eric表示:

    不好意思請問一下
    我套用一個主題
    桌機板會直接進入首頁
    但是手機會先經過一個”歡迎來到你的網站!這是您的首頁,也就是大多數訪客第一次造訪時看到的畫面”
    的頁面並且能選mobile和desktop
    我不想要這個畫面並且直接進入首頁
    我要在哪裏設定或修改??
    謝謝

    • oberon表示:

      您好,這應該是跟你使用的怖景主題有關係,可以去查看它的使用手冊看能否關閉此畫面~

  • Jimmy表示:

    謝謝你的文章,獲益良多!

    最近遇到了難題,我想要將網頁標題改成同時有好幾個顏色的文字,
    Ex : 歡迎來到(白色) 我的家(紅色) !(黑色)
    用CSS的話似乎沒法對局部字體做改變,僅能全部一起改變 ,
    所以改嘗試用HTML的方式去改,只是找到以後…..
    就沒有然後了…….不知該如何下手,還請大大指點!

    • Jimmy表示:

      (語法的部分消失了,我再打一次)
      所以改嘗試用HTML的方式去改,只是找到以後…..
      就沒有然後了…….不知該如何下手,還請大大指點!

    • oberon表示:

      不客氣!

      你有實際在線上的網頁嗎?把你想改的部份說明一下,我試著用你的網站提供範例給你。
      一般來說 WordPress 的頁面在 body 的部份都會有頁面 slug 的 class name,只要用這 class name 來選擇 h1 標題,就能進行局部的修改!

  • C表示:

    我的後台沒有CSS這個選項,只有AMP,我只是想要把主題的預設字體顏色更改而以呀!

    • oberon表示:

      您好,

      如果您是使用 AMP for WordPress 這支外掛的話,它可以在後台選單「外觀 > AMP」的選項裡面修改文字顏色,您參考看看~

  • WU表示:

    不好意思
    我想請問一下你的BLOG
    會有粉紅色的 TOPIC 圖案
    還有1.2.3.4.5 粉紅色的圈包起來
    還有程式碼部分有灰底 底上面還有一條粉紅色的槓
    那是怎麼用的呢?

    • oberon表示:

      您好,這部份是用 css 製作的,相關的屬性可以參考:border-radius、background-color、border-top

  • oberon表示:

    邊寫文章邊重新認識了 CSS 基本概念,給自己推推 ^^

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

 

WordPress 教學