CSS 入門

CSS

• CSS的語法規則由兩部分組成：選擇器、宣告敘述。
• 宣告敘述可用來定義樣式
• 選擇器可分為：通用選擇器、標籤選擇器、類別選擇器及id選擇器，主要用來指定要使用樣式的元素。

選擇器

• 通用選擇器的表示法為：*
• 標籤選擇器的表示法為標籤名，例如：p、a、h1
• 類別選擇器的表示法要結合標籤的class屬性，可在標籤中新增class屬性，並為其設定一個類別名稱：

<p class= "p2">段落2</p>

並在選擇時輸入.類別名稱，例：.p2，即可

• id選擇器的表示法要結合標籤的id屬性，可在標籤中新增id屬性，並為其設定一個id名稱：

<p id= "p3">段落3</p>

並在選擇時輸入#id名稱，例：#p3，即可

• 若要選擇多種選擇器，只要在不同選擇器中加入, 分隔即可
  

1. 通用選擇器控制字體大小＝18px
2. 標籤選擇器p設定為紅色
3. 類別選擇器.p2設定為藍色
4. id選擇器#p3設定為紫色
5. 同時選中.p2、#p3並設定字體為：italic，顯示如下：
   

樣式

• 背景：與背景相關的屬性都是以background開頭

• 文字：包括對齊方式、縮排、文字間隔

1. text-indent:縮排
2. text-align:對齊方式
3. word-spacing:文字間隔
4. letter-spacing:字元間隔
5. text-transform:字母大小寫
6. text-decoration:字元樣式

• 邊框：可設定邊框樣式、寬度、顏色

1. border-style:邊框樣式
2. border-width:邊框寬度
3. border-color:邊框顏色

• 邊距：在版面設定中，CSS盒模型的概念非常重要，如下圖：
  

1. margin:可控制外邊距，上下左右分別加上top、bottom、left、right，即可分別控制
   margin-top、margin-bottom、margin-left、margin-right
2. padding:可控制內邊距，同樣可分別控制上下左右邊
   padding-top、padding-bottom、padding-left、padding-right

以上就是今天的CSS入門的基礎內容，下篇將會介紹JavaScript的語法簡介！