在選擇 WordPress 佈景主題之後，多多少少心裡會有這些聲音出現：「欸感覺標題字體大小可以調整」、「佈景的超連結顏色不喜歡，想要改變」，而且使用熱門模板，應該也蠻容易跟其他部落客「撞版」，一看就知道用一樣的模板，有時會覺得好像沒有把部落格佈景打造出自己的獨特特色出來。
因此，WordPress 提供了一個功能：附加 CSS (在「自訂」功能中)，可以讓你設定 CSS，達成版面微調的效果！
這篇會學一些程式語法，對於沒學過程式的人來講可能會需要花一點點時間熟悉，但我跟你保證並不會難，把這一篇多看幾次就可以上手了，如果有不懂的地方也歡迎留言詢問！
HTML 與 CSS
可以想像 HTML 是我們房子的骨架，CSS 則是房子的裝潢。HTML 是撰寫網頁基本內容的標籤語言，CSS 是網頁的化妝師，網頁的編排、美化都是靠 CSS 達成！
WordPress「附加的 CSS」
WordPress 的「附加的 CSS」在大部分的情形之下，會將你寫的 CSS 覆蓋原本的語法，而達成顯現你要的畫面。但不建議藉由「附加的 CSS」寫上大量的 CSS 把整個網頁畫面大改！建議還是找到跟你期望很相近的佈景主題，再藉由「附加的 CSS」修改一小部分的元件畫面即可。
基本的 CSS
CSS 一開始可能要花一點點時間理解，但他其實沒有很難。我職業是網頁工程師，CSS 有一定的熟悉度，我也盡量以簡單的方式讓大家理解 CSS 的基本語法。
CSS 格式是以頁面元素+頁面樣式形成。頁面元素是 「CSS 抓取 HTML 標籤」找到我們想要修改的位置，頁面樣式就是我們想要調整的樣子。
CSS 抓取 HTML 頁面元素
<div class="new-class post-2" id="HelloId"> Hello! </div> 上面是基本 HTML 語法，如果你不熟 HTML，你只要記得以下事情就可以了：
- 外面一定會用標籤符號包住裡面的內容( ex: <>內容</>)
- 標籤名稱會不一樣( ex: <div>, <p>, <span> )
- class 和 id 是選用，不會每個標籤都有
- class 內容可以多組，中間用空白建區隔(像上面的new-class、post-2)
假設我們現在想要幫「Hello!」改變樣式，那我們要如何使用 CSS 抓取上面那一段 HTML 元素呢 ? 在這邊我提出一個容易使用的公式抓取頁面元素：
- [標籤].[選取一個 Class 內容名稱]：如果標籤中只有 class，使用標籤 + class的方法，注意 class 前面要有「.」
- #[id名稱]：如果標籤中有 id，直接拿 id 名稱即可，注意 id 前面要有「#」
所以我們的取法會變成下面這樣，兩種方法都可以取得元素：
div.new-class {
// style;
}
#HelloId {
// style;
}到這邊，我們提一下 CSS 取得元素的語法，幫助你記憶：
- class 前面會用「.」
- id 前面會用「#」
- 標籤前面不會有任何的記號
- 同層級的標籤與class，我們可以直接把他連起來使用(ex: div.new-class)
CSS 抓取多層次 HTML 標籤
我們的 HTML 結構通常沒有向上面範例那麼簡單，假設有下面例子
<span> 我在外面 </span>
<div class="container">
<div class="main">
<span> 我在裡面 </span>
</div>
</div>如果我們想要更改「我在裡面」字體的樣式，照前一段文章的邏輯，我們會想要使用 span + class 名稱的方法，但是，我們發現「我在裡面」的 span 標籤，沒有 class 可以讀取，那怎麼辦?
如果我們的 css 的頁面元素僅僅使用 span，會連上面的「我在外面」的 span 元素一起被改掉，我們在下面看看這錯誤的範例：
span {
// 這更改方式會讓整個網頁的span樣式都被更改
}我們今天只是想要更改「我在裡面」的 span 標籤，但我不想要把所有網站的 span 標籤都改掉，我們就需要在 css 把外面的標籤也都寫進去頁面元素裡面，才能抓到我們想要的標籤，下面的三種方法都可以：
div.container div.main span {
// 從最外面的標籤開始寫，把包在外面的標籤與 class 都寫進來，中間用空格隔開
}
div.main span {
// 我們也不一定要每層標籤都寫，這樣寫也可以，如果這樣沒辦法改到樣式，我們再把 div.container 寫進來
}
.container .main span {
// 如果不想打太多字，我們單純寫 class，也可以達到一樣的效果
}到這邊，我們總結前面與到現在 CSS 取得元素的語法，幫助你記憶：
- class 前面會用「.」
- id 前面會用「#」
- 標籤前面不會有任何的記號
- HTML 同層級的標籤與 class，在 css 的頁面元素中，可以直接把他連起來使用(ex: div.new-class)
- HTML 不同層級的標籤與 class，在 css 的頁面元素中，中間需加上空格(ex: .class-1 .class-2)
不可使用的class
在 WordPress 中，帶有「數字」或「亂碼」的 class 會因為不同文章而變動 ( ex: post-2 )，這種 class 因為不是固定的，所以不能在 CSS 裡面寫到這類型的 class
使用 Google Chrome 開發者工具取得頁面元素
那我們怎麼知道在WordPress裡面我們想修改的地方，他的 HTML 架構是什麼? 因為我們要知道 HTML 架構，才能去寫 CSS ，這時候開發者工具就派上用場了。
因為不同的佈景主題，HTML程式碼可能會不一樣，在此我以我的部落格模板為範例。
按下 F12 開啟開發者工具
我們進去我們的部落格網站，按下 F12 ，這時候網頁右邊會出現密密麻麻的程式碼，那個就是開發者工具。
找尋我們要修改的元素
在開發者工具的左上方，有個箭頭圖案(檢查工具)，點選他，他可以透過游標點選網頁上的元件，直接在開發者工具顯示目標元件的 HTML 碼。
點選之後，在開發者工具會顯示我們需要修改的程式碼區段
檢視 HTML 架構
如果我想要更改「近期文章」的文字顏色變成綠色，我需要先找到近期文章所依附的標籤是什麼：
從下方圖，我們知道了幾件事情：
- 「近期文章」用<h4> 標籤包著
- 但是網頁其他地方也可能有用<h4>，我只想改這邊而已，不想其他地方也被改到樣式
- 我需要往外找標籤，上面一層標籤和上上一層標籤都有 class 可以幫助區別 ( 如黃色標註 )
- 上面的 class 「wp-container-62357f7e47c74」因為帶有亂碼，表示此 class 在其他地方可能會被變動，不可以使用
撰寫 CSS 在「附加的CSS」中
我們預估寫完的 css 會是這樣
.wp-block-group .wp-block-group__inner-container h4 {
color: green;
}但是因為我只需要網上寫一層，就可以幫助「近期文章」文字顏色變成綠色了，所以我們不用寫.wp-block-group在最前面了。
到這邊寫的有一點累，我們下篇再來講樣式要怎麼寫吧！