構成網頁的三大元素有HTML、CSS、JavaScript，CSS語法可以編輯整個網站或部分頁面的外觀、字體顏色、元素排版，讓網頁呈現出更多風格，如果您想修改wordpress CSS樣式要從何處下手呢？以下將分享WordPress佈景主題CSS樣式修改教學，即使您不是網站程式設計師，你也可以透過本篇CSS語法教學與範例，輕鬆學會自訂Wordpress網頁排版與CSS樣式修改。
WordPress CSS樣式要如何修改＆新增？
WordPress可以直接從後台安裝佈景主題模板，但這些免費版的佈景主題樣式看起來相當簡單普通也不美觀，如果要修改佈景主題的樣式，可以從佈景主題的自訂項目或安裝外掛來修改設定。
但自訂項目沒有提供設定該怎麼辦呢？目前在Wordpress有兩種方式可以修改CSS樣式，第一種方法是編輯「style.css」檔案更換網頁樣式與排版。
方法一：編輯 style.css 檔案
1. 登入Wordpress > 左側選單的「外觀」> 佈景主題檔案編輯器。
2. 在佈景主題檔案中就可以找到style.css，滑鼠點擊打開檔案，接下來我們就可以直接在上面添加CSS語法修改網頁的顏色、字體、排版等等。
P.S：並不是每個佈景主題都一定會把Css語法寫在style.css檔案內，有可能會另外開一份檔案將Css語法寫在裡面，但基本上檔案的位置一定都在Wordpress佈景主題的資料夾裡，您可以透過之前小編介紹過的外掛程式 「String Locator」，直接輸入關鍵字來查找.css檔案的位置。
若您是網頁新手或沒有CSS基礎概念的人，不建議直接編輯style.css檔案，怕您在修改程式碼的過程中會不小心改錯檔案或代碼，導致網頁排版跑掉，比較推薦的做法是使用Wordpress「附加的CSS」功能，只要照著以下步驟操作就可以輕鬆完成。
方法二：Wordpress「附加的CSS」功能
1. 登入Wordpress > 點擊左上角的「自訂」。
2. 左側會彈出Wordpress佈景主題的功能設定選單 > 點擊「附加的CSS」。
3. 在「附加的CSS」欄位裡面貼上CSS樣式的語法。
4. 將自訂Css樣式添加到Html：我自己的做法是使用html class屬性來導入css樣式，舉例來說，我們要讓H2標題可以套用某個Css樣式，只需在H2標籤內添加Class選擇器就可以直接使用了。
<h2 class="title-use">使用css修改Wordpress標題樣式</h2>
網頁瀏覽樣式如下：
wordpress自訂css樣式預覽
5. 以下提供目前網站標題所使用的CSS樣式給大家當作參考。
.title-use
{
background-color: #f7f7f7; //背景顏色
padding: 16px 0 16px 24px;
border-left: 8px solid #e85a5a;
color: #333 !important;
}
如何查看別人網頁的CSS語法？
1. 如果無意間看到一個很漂亮的網頁，您可以使用Chrome瀏覽器的「開發人員工具」或 「按右鍵 > 檢查」來查看對方網頁所使用的CSS語法。
CSS語法表介紹
CSS語法表（樣式表）是用來設定網頁樣式與佈局的一項技術，舉例來說，我們可以使用CSS來改變網頁的顏色、字體、字型大小、間距，以下列出一些常用的CSS屬性供大家參考。
background-color : #f7f7f7; // 背景顏色 font-size : 16pt; // 文字大小 color : #000000; // 文字顏色 border-width : 10px; // 邊框寬度 border-color : #111111; // 邊框顏色 border-style : solid; // 邊框樣式 width : 30px; // 寬度 height : 9px; // 高度 padding:5px 0px 5px 0px; // 內邊距 margin : 5px 0px 5px 0px; // 外邊距 line-height : 150%; // 行高 text-align : center; // 本文排列 white-space:nowrap; // 設定內容文字不換行 display : none; // 顯示樣式
總結：
WordPress佈景主題新增自訂CSS樣式教學就到此結束，您是否學會如何在Wordpress自訂與修改CSS樣式呢？如果想更深入研究CSS語法，w3schools網站有分享多款CSS範例與模板供我們套用到網頁中，您可以點擊下方連結前往觀看更完整的CSS語法教學。