WordPress 如何自訂 CSS
首先要知道怎麼在 WordPress 網站找到你要修改的地方。
▼假設我要修改這個 WordPress 網站的 logo ，我想要用 CSS 去自定他的屬性讓他變成圓形。
▼我用 Chrome 瀏覽器在網頁上的任何一個地方按右鍵 > 檢查
▼右上角這個區塊是整個頁面的程式碼，我們在上面滑動，左邊會閃藍色的區塊範圍，以這個例子來說，我們滑鼠移到 <header> 區塊時，左邊頁面上半部整個區塊反藍，而我們要修改的 logo 就位在這個區塊裡面，但他還不是很準確，因為現在反藍的範圍比我們的 Logo 大多了，所以我們要在網這個區塊的「內部」去找，好像一個大盒子裡面，又有小盒子，小盒子裡面又有小小盒子的概念。
▼我們按 <header> 前面的三角形，可以展開裡面的項目
▼一直往下找，一邊注意左邊藍色的區塊。最後找到這個區塊是屬於 Logo 的區塊，這個區塊是從 <p class=”site-title”> 開始。如果我們看到 class=”XXX” 意思就是這個區塊要套用名為 XXX 的CSS 屬性。這個區塊顯然是套用名為 site-title 的 CSS 屬性。
而我們看到 <p class=”site-title”> 下面還有一個 <a ….. 的標籤，以及一個 <img src ….. 的標籤，裡面才是我們 Logo 的圖片。
所以我們現在知道我們要改的圖片是位在 site-title CSS屬性下的 a 標籤，再下面的 img 標籤（ html 標籤看藍色的字就好）。
＊通常我會建議找到那個要修改的元素後，如果它本身沒有套用 CSS 樣式，那就往上層找到最近的 div 或 p 標籤，看看有沒有套用 CSS 樣式，如果有就從那個 CSS 選擇器開始下手。但這不鐵律，也有可能可以從像是 li 標籤上的 CSS 樣式去修改，反正都可以嘗試看看，只是自訂CSS不會把網站搞壞的，不用擔心。
▼現在我們要寫入自訂的CSS，從「外觀 > 自訂 > 進階 > 附加的CSS」進入（不一樣的佈景主題，選項用詞可能會略有不同）。
進去之後我們先寫一個點，因為我們在宣告 class 選擇器名稱時會先打一個點。接在後面的是一個空格然後「a」在空一格然後「img」，這個意思就是我們要控制的項目是位在「site-title」CSS選擇器下面的 a 標籤下面的 img 標籤。然後我們打兩個大括弧 { } ，這兩個大括弧裡面我們就可以設定屬性。（關於CSS選擇器的類型可以參考這篇：class 與 id 選擇器）
用這種方式我們就可以找到 WordPress 裡面的每個元素的位置，並且找到控制它的CSS 去修改他的屬性，來達成各種效果。
▼比如說如果這一段我們要讓 Logo 變圓形，我們就會設一個倒圓角的屬性，並且把值設為 50%，這樣 Logo 就變成圓形了。
如果還是不太清楚怎麼找到元素所屬 CSS 的位置，可以參考這一篇：自訂CSS 調整 WordPress 文字、顏色、背景、寬度等
以下就列出幾個常用的屬性，就算還不懂 CSS 也可以直接套用。
常用 CSS 語法
| border:5px solid #fff; | 邊框的粗細、樣式(虛線貨實線)、邊框顏色 |
| border-radius:15px; | 倒圓角，可以用 px (pixel)表示，也可以用百分比表示。如果想要四個角分開設定，可以寫 border-radius:15px 50px 0px 5px; 這4個值由前到後分別用來設定「左上角」「右上角」「右下角」「左下角」＊要設定圓角前，要先定義 border 屬性。 如：border: solid 1px #555; |
| width: 50%;
height: 500px; |
width 屬性用來設定寬、height 用來設定高，值可以是百分比(以父元素為基準)，也可以用 px 來表示。 |
| color: #ffffff; | color 用來設定「文字」的顏色，用16進位法表示，如果想要查詢色碼的話，可以用 Google 搜尋「color picker」 |
| background-color:red; | 設定背景顏色，和上一個屬性一樣，可以用16進位色碼，也可以直接寫入色彩名稱。 |
| display: none; | 直接讓那個元素不顯示 |
| opacity: 0.5; | 透明度 值:0~1 |
| padding: 30px; | 區塊內元素距離區塊邊緣的距離 |
| line-height:30px; | 行距 |
| box-shadow: 3px 3px 5px #eee; | 區塊陰影，四個值分別為「水平位置」「垂直位置」「模糊程度」「陰影顏色」 |
| text-shadow: 0.2em 0.5em 0.1em #600 | 文字陰影：和區塊陰影一樣，只是是設定文字陰影。 |
| font-size: 18px; | 文字尺寸 |
| font-weight:600; | 文字粗細，值越大越粗 |
| XXX:hover{… } | 滑鼠滑上去時：XXX 這個CSS 樣式滑鼠滑上去時的變化樣式寫在{…}裡面。 |
| .XXX:hover img{ animation: mymove 1s infinite; } @keyframes mymove { 50% {transform: rotate(20deg);} } |
滑鼠移上去後讓圖片旋轉：其中「XXX」要改成 CSS 選擇器的名字，而這個區塊下面的圖片會套用這個 CSS 屬性。
其中「1s」這個值是表示一次動作的時間，時間設越短動作越快。 而「20deg」是代表旋轉的角度。 這兩個值可以自己修改看看變化會怎樣。 |
| .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } |
呼吸閃爍 |
| transform 變形效果 | 參考：CSS: transform：旋轉 rotate、縮放 scale、平移 translate、歪斜 skew、3D 透視 perspective |
| animation 動畫效果 | 參考：CSS animation 動畫效果 |
| a:link { color: green; }a:visited { color: green; }a:hover { color: red; }a:active { color: yellow; } |
a:link 連結的樣式
a:visited 連結訪問過的樣式 a:hover 滑鼠移上去時的樣式 a:active 點擊時的樣式 |
| .abc { position: relative; top: -10px; } |
position: relative 宣告元件的相對位置，後面可以接 top, left, bottom, right 的值。意思是元件往上移、往左移、往下移、往右移多少，可以是負值。 |
如果想了解更多 CSS 屬性，可以參考：CSS 課程