CSS介紹

CSS(Cascading Style Sheets)中文為層疊樣式表，這是一種用來為結構化文件(HTML、XML)，增加樣式的程式語言。

簡單來說就是你在網頁上看到的顏色、字型、背景、動畫等等，都是CSS做的。

但是CSS不能單獨存在，他本身並不會產生文字，如果只有CSS就什麼都沒有。

講這麼多，我們來舉一個範例比較快！

以下是一個簡單的HTML，可以新增一個文件，取名為 index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
<h1>Welcome to Johntool-工具王阿璋!</h1>

    

This is my CSS example

  </body>
</html>

然後打開 index.html ，網頁的內容就會就會長成下面這樣：

接著在新增一個新文字文件，加上下面的CSS語法，把他改名成 style.css。


h1 {
color: lightblue;
background-color: gray;
border: 1px solid black;
}

p {
color: red;
}

這時候再開啟一次網頁，就會看到網頁變成下面這個樣子：

這樣大家應該稍微了解 CSS的作用了吧！

接著要進入我們文章的重點了。

如何更改標題的CSS？

WordPress是一套很友善的系統，為什麼這樣說呢？因為他不用去主機內改程式碼，只需要透過後台就可以了。

我們先進入後台，選擇外觀，然後點選 編輯CSS。

如果在這裡找不到的話，可以參考這篇文章。

然後就會看到下面的畫面，在左邊就可以新增CSS語法。

那大家剛進來的時候，這裡肯定是空的畫面。

然後就會問，我該在裡面打什麼？我想要的樣式怎麼做出來？

補充

在這裡編輯CSS是為了方面立即查看，但不是最好的方式！

正確的擺放位置請參考這篇文章：【WordPress教學】如何自訂WordPress語法？6個程式碼片段範例教學

所以接下來我會提供三個範例CSS給大家模仿使用。

範例一

首先，教大家改h1，h1比較特別，他在HTML語法中，通常會被視為標題，也就是你文章內的標題。

那我們要如何達成以下的樣式呢？

在WordPress的設計中，標題會有一個class，叫做 entry-title ，那如果要改class，就要加一個 . ，加起來就是 .entry-title 。

程式碼如下：


.entry-title
{
/*
左邊界間隔5px
ridge代表凸線
rgba代表顏色以及透明度
*/
border-left: 5px ridge rgba(147,10,164,0.37);
/*邊界的角度，越大代表越圓*/
border-radius: 31px;
/*文字與文字的間距*/
padding:5px;
/*文字的顏色*/
color:red;
}

其中，顏色或是寬度等等都可以自行調整，在編輯CSS這邊，可以馬上看到你的樣式改變的樣子。

範例二

接著我們示範 h2 ，h2~h6 的class都是一樣的，叫做 entry-content ，所以我們在使用的時候要用 .entry-content 。

但是光憑上面那樣，我們沒辦法去區分到底要改哪一個部分。

所以要打 .entry-content h2 ，如果是別的標題，就把h2改掉。

那我們這裡要達到的效果如下：

詳細的CSS語法如下：


.entry-content h2
{
/* 背景顏色 #eeeeee */
background-color:#eeeeee;
/*左側框線寬度(5px)、solid(實線)、顏色(orange)*/
border-left:5px solid orange; 
/*行內文字間距(5px)*/
padding:5px;
/*垂直置中*/
}

顏色的部分，有幾種方式可以打，直接打英文(orange)、#色號(#eeeeee)、RGB(rgb(255, 0, 0))，然後實線的部分可以參考這個網站改成你要的線條。

範例三

範例三我一樣拿h2來示範，但這個例子就比較炫砲一點，參考參考就好。

程式碼如下：


.entry-content h2
{
box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
font-weight:bold;
color:red;
}

如果這三個例子都不喜歡怎麼辦，繼續看下面的章節吧！