1. 程式人生 > >第 1 章 開始學習 CSS,為網頁新增樣式

第 1 章 開始學習 CSS,為網頁新增樣式

認識 CSS 樣式

CSS 全稱為“層疊樣式表 (Cascading Style Sheets)”,它主要是用於定義 HTML 內容在瀏覽器內的顯示樣式,如文字大小、顏色、字型加粗等。

如下列程式碼:

p{
   font-size:20px;/*設定文字字號*/
   color:red;/*設定文字顏色*/
   font-weight:bold;/*設定字型加粗*/
}

使用 CSS 樣式的一個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型、字號或者顏色等。

CSS 程式碼語法

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成,如下圖所示:

此處輸入圖片的描述

選擇符:又稱選擇器

,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如 ol )不會受到影響。

宣告:在英文大括號“{}”中的的就是宣告,屬性和值之間用英文冒號“:”分隔。當有多條宣告時,中間可以英文分號“;”分隔,如下所示:

p{font-size:12px;color:red;}

注意:

  1. 最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。
  2. 為了使用樣式更加容易閱讀,可以將每條程式碼寫在一個新行內,如下所示:
p{
   font-size:12px;
   color:red;
}

CSS 註釋程式碼

就像在 Html 的註釋一樣,在 CSS 中也有註釋語句:用/*註釋語句*/

來標明(Html中使用<!--註釋語句-->)。就像下面程式碼:

此處輸入圖片的描述