前言

  常在閱讀網頁文章的朋友應該都有一些經驗,有些網頁的文字內容,有些文字太小,排版不佳,甚至所有的字都擠在一起,閱讀起來相當的吃力,如果你是文章的創作者,一篇好的文章結果卻因為排版的問題而讓閱讀經驗不佳而讓成果大打折扣,那實在是太可惜了。雖然大部份的部落格系統的文章編輯器的功能陽春,想要換個字型或是改變一下字的大小,或是調整一下字距行距都做不到,更不要說要建立一些文章的子標題了。但是,這些其實不需要靠編輯器,使用一些CSS語法就可以完成了。在這一篇文章中,我們就簡單地來說一些CSS命令的用處以及教大家如何使用在你的文章中。

 什麼是CSS

  CSS是Cascading Style Sheets的縮寫,主要的目的是為了對於網頁中的元件(包括排版、文字、圖片、表格等等)強化格式的設定,透過適當的設定,網頁可以有非常多樣化的格式變化(就像是本文一樣),而設定CSS的對象,可以針對全篇網頁,也可以針對某一特定的段落或是某一特定的元件(如表格式圖片)等等,非常具有設定上的彈性。

 如何在部落格文章中使用CSS

  CSS有非常多的設定內容以及命令,對於完全沒有經驗的朋友,一開始可能會覺得非常地難以學習。一大堆的專有名詞,可能讓很多的初學者不知道如何開始,不過很棒的是,其實對於部落客來說,一開始不用學那麼多,因為每一篇文章都是由段落所組成的,所以只要針對每一個段落來設定就可以了,設定好一個段落之後,按下Enter鍵跳到下一個段落的時候,前一個段落的格式設定會被延用到目前這個段落,所以只要設定一次就可以。如果有許多不同的段落設定,也可以在編輯器用整段複製的方式複製到你想要設定的段落就好。

  那要如何設定呢?在大部份的部落格系統編輯器都有提供直接編輯網頁原始碼的方式來編輯你的文章內容,如果是使用WordPress的話,在你的編輯器右上角有一個「文字」的頁籤,如下所示:

css01

  選用這個頁籤,你就可以看到整篇文章的HTML格式設定以及文字內容,如下所示:

css02

  在上圖中,你會看到我們是如何透過「<p style」這個指令來設定文章的標題以及各段落的內容的,如果你覺得這個排版方式很喜歡,只要照著做就可以了。如果你是使用痞客邦的話,也可以在文章編輯器的左上角看到HTML這個按鈕,如下所示:

css03

  按下HTML這個按鈕之後,就可以看到以下的畫面:

css04

  藉由上圖,你也可以發現,我們是怎麼樣幫這篇文章的文字加上粗體字的效果。

 和部落格文章格式有關的CSS命令

  在這裡我們就很簡單地列出和段落文字格式設定有關的CSS指令給大家參考。所有的指令設定,都只要寫在<p style=””>的雙引號中就可以了,要注意的是,每一個指令和它的參數中間是以冒號來分隔,而不同的指令之間則是以分號來分隔,如果分號和冒號沒有分清楚,是看不出效果的。

  font-size:10pt; (用來設定文字大小)

  font-family:微軟正黑體; (用來設定字型,中文網站的內容,站長習慣設定成微軟正黑體)

  font-weight:bold; (把這一段文字設定為粗體)

  line-height:200%; (把行距設定為二列行高)

  color:#ffffff; (把文字顏色設定為白色,其中fff分別代表RGB三原色的值,ff代表最亮)

  background-color:#aaaaff; (把背影色設定為淺藍色)

  letter-spacing: (字與字的間距設定為2點)

 結語

  就只要使用前面幾個簡單的CSS指令,善加運用,就可以大幅地改善排版出來的成果,各位部落客們,趕快試用看看,讓你的文章可以大變身,令別人驚艷一下喔。

(2074)

%d 位部落客按了讚: