每一個自行架站的人,無論是用wordpress或其他架站工具,或是自己手動寫code,或多或少都會用到CSS。

為什麼要學 CSS 文字屬性?

很多人初次接觸CSS,都是由編輯文字樣式開始,例如會想「怎樣調整文字大小?」、「怎樣改變文字顏色?」、「字體可以轉換嗎?」、「標題還想再粗一點」等等等等的問題,這些都是用CSS可以處理的。

為了新手也可以容易學習,下面我只會分享我個人認為最基本最常用的CSS屬性,因為實在太常用,基本上每一個網頁設計師都能背。

我的建議是:背下來!

背下來我保證你會常常用到。但如果怕會記不住,也可以收藏這篇文章,有需要時查看。

以下的例子為了簡化,全部我都用h1來示範,但你可以選擇其他標籤。

字體大小

這是一個絕對會用到的文字屬性。在HTML中,當你用h1h2h3p之類的標籤時,瀏覽器會根據你的標籤自動用預設的大小來顯示。但很多時候都覺得不太合心意,想再調整一下。

這時候,你就要用到font-size,font就是字體的意思,size就是大小的意思,合起來就是字體大小的意思。(我在說廢話)

然後輸入你想要的值,也就是多少像素,以下的例子我用22px,意思就是每個字的大小是22像素。除像素px外,還有其他單位可以使用,但我建議新手就一律用px好了,簡單一點。

h1 {
  font-size: 22px;
}

字體粗細

在html中,你可以用bstrong來顯示粗體,但如果你的html中沒有用到這些標籤,想調整粗細,就可以用font-weight來完成。而且不單單只有預設的粗體,在CSS中,你可以更具體地告訴瀏覽器你到底想要多粗。

在賦值方面,你可以用boldnormal這些來代表粗細,也可以用數值表示,一般是用100200300......900,數值越大代表越粗,就看你想要多粗。

h1 {
  font-weight: 900;
}

文字顏色

好,現在來調整一下顏色。文字顏色的屬性很簡單,就是color。(沒有font在前面喔!)

在CSS中的顏色可以有多種形式表示,但我建議新手還是不要弄得太復雜,用一種就好,我推薦用16進位色碼。

至於怎樣取得所要顏色的色碼,可以用不同的工具,我一般是用Sip在螢幕吸取顏色,或在Color Hunt看看有沒有喜歡的顏色組合。

h1 {
    color: #FF486A;
}

文字對齊

文字對齊就是text-align,記住是text(文字),不是font(字體),因為是要把文字對齊,不是把字體對齊

好,大家來學學英文單字,左邊是left,右邊是right,中間是center。然後把值賦予text-align就完成了。

就是這麼簡單。

h1 {
  text-align: center;
}

行距

這是我個人認為對網頁文章易讀性,有很大影響的一個屬性。
很多人沒有調整好適合的行距,文章就變得密密麻麻,很難看。
行距的屬性是line-height,所以有些人會翻譯成「行高」,也是一樣的。
這裡的值,我建議新手就用數字好了,像11.52之類,然後試試看哪一個看起來適合。

h1 {
  line-height: 1.5;
}

字體

最後是字體,之所以把它放在最後,是因為中文字體的選擇實在不多,我自己很多時也只會用預設字體。但在英文網頁中,這是一個十分常用的屬性,甚至決定著整個網站的美觀性。

字體的屬性是font-family,因為每一種字體真的好像一個家族,有各自的粗體、斜體。賦值時,輸入字體名稱就可以了。以下用sans-serif這個英文常用字體做例子。

h1 {
  font-family: sans-serif;
}
, CSS