標準語法大整理 

▍CSS 標準語法大整理 [ Version:1.1 Power by Andy Liu . ]

█ 事前準備：

　　文章用色說明：紅字：語法的指令 綠字：指令的參數 紫字：語法註解

　　昨天將CSS「邊框」的語法整理好之後（已經放在▍留言區域大動工（含表單設計） [ Version 2.0 ]這篇教學裡面 ），今天想一想，乾脆來將CSS的標準語法作一次的整理好囉！也方便大家以後查詢指令方便。（當然我也很需要^^）

　　整理的CSS語法包括下列幾種：

• 背景控制
• 邊框控制
• 文字控制
• 文字連結控制
• 滑鼠樣式控制
• 方框控制（邊界、欄位間距）

　　PS 　如果你不清楚語法究竟要怎樣加入或設定？請見文章最下面的「實際操作」。

█ 語法說明 -- 背景控制：

/* 語法開始 */

　　 body{ /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

　　　background-image:url(圖片位址);     /* 圖片連結位置 */
　　　background-attachment:fixed;            /* 圖片位置是否要固定 */
　　　background-repeat:no-repeat;             /* 圖片是否要重複顯示 */
　　　background-position:right;                 /* 圖片對齊格式 */
　　　width:400px;                                      /* 文字區塊的寬度 */

　　　}

1. /* XXX */(註解)：註解幫助自己看懂，這部分程式不會執行！XXX可以自行填寫！

2. textarea(文字區塊)：這個部分稱作CSS樣式定義類別，一般來說可以自己定義名稱，但是由於這裡我們是要定義HTML語法的標籤，所以是不能更改的！必須使用textarea。當然如果要定義

   ，就改為h1！(

   ★注意： 不用"")

3. background-image(背景影像)：看你的圖片位址在何處就怎麼寫！只要填在url()的()裡面即可！

4. background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
   屬性有：scroll：隨著捲軸捲動 inherit：繼承之前的設定 fixed：固定不動

5. background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
   屬性有：repeat：重複顯示 no-repeat：不重複顯示 repeat-x：只在X軸重複顯示 repeat-y：只在Y軸重複顯示

6. background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
   屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊 top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)

7. width(寬)：文字區塊的寬度 (可以不設定，系統會自動設定大小)

8. height(高)：文字區塊的高度 (可以不設定，系統會自動設定大小)

　　PS1 　其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等！因為部屬於這部分的討論範圍！暫時就不列出來！

　　PS2　如果你不使用背景影像的話，只想用純顏色當背景時，可以將background-image(背景影像)用background-color(背景顏色)取代！但是盡量避免兩個語法同時使用！

　　　　　範例：background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色！

█ 語法說明 -- 邊框控制：

/* 語法開始：寫法一 -- 分門別類，無微不至 */

/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */

body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

border-XXX-width: 1px;                    /* 邊框寬度 */
border-XXX-style: dotted;                /* 邊框樣式 */
border-XXX-color: #0066FF;            /* 邊框顏色 */

}

1. XXX：請各位先注意XXX的部分，這裡XXX代表著是邊框的上下左右。
   屬性有：top：上方　bottom：下方　left：左邊　right：右邊
2. Width(寬)：邊框寬度。屬性有：N px：像素　N pt：點　N in：英吋　N %：百分比 (N為大小，必須為正整數)
3. Style（樣式）：邊框樣式。屬性有：dotted：點狀線　dashed：虛線　solid：實線　double：雙實線　groove：溝道狀　ridge：山脊狀inset：凹陷狀　outset凸起狀
4. Color(顏色)：邊框顏色。屬性為：#XXXXXX (XXXXXX為顏色代碼)

/* 語法開始：寫法二 -- 精簡寫法，功用一樣 */

/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */

body {

border-XXX: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第一種都像同，只是寫法不一樣！假設我要設定上方邊框為寬度一像素、虛線、紅色，就可以寫成：

          border-top: 1px dashed #FF0000;   /* 邊框 寬度 樣式 顏色 */

/* 語法開始：寫法三 -- 最為精簡、但有限制 */

/* 使用時機：當上下左右、寬度、樣式、顏色都要設定一樣的時候 */

body {

border: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意：相關的語法大致和第二種都像同，只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了！

█ 語法說明 -- 文字控制：

/* 語法開始 */

body {  /* body 是可以依照需要作改變的，下面的內容才是重要的！ */

color: #006699;                                                                   /* 文字顏色 */
font-family:"Times New Roman";                                    /* 文字字型 */
font-size: 14pt;                                                                    /* 文字大小 */
font-style: normal;                                                              /* 文字樣式 */
line-height: 1.5px;                                                               /* 文字行高 */
font-weight: bold;                                                                /* 文字粗細 */
font-variant: normal;                                                           /* 文字變形 */   
text-transform: capitalize;                                                  /* 文字大小寫 */
text-decoration: underline overline line-through blink;    /* 文字裝飾 */

vertical-align: super ;    /*文字上、下標字*/

text-align: center;     /* 文字對齊方式（水平） */
vertical-align: top;    /* 文字對齊方式（垂直） */

letter-spacing: 120%;  /* 單字間距 */
word-spacing: 120%;   /* 字母間距 */
text-indent: 10px;         /* 文字縮排 */
}

1. color(顏色)：設定字體顏色。屬性為：color:#XXXXXX (XXXXXX 為顏色代碼)
2. font-family(文字字型)：設定文字字型。屬性為：font-family:"XXX" （XXX為字體顏色）

　　例如要用新細明體就是：font-family:"新細明體"

★注意：你所設定的字型必須對方的電腦也有這樣的字型，當別人在瀏覽網頁時，才能正常顯示喔！

3. font-size(文字大小)：設定文字大小。屬性有：N px：像素   N pt：點 (N必須為正整數)
4. font-style(文字樣式)：設定文字樣式。屬性有：normal：正常　italic：斜體 oblique：偏斜體
5. line-height(文字行高)：設定文字行高。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
6. font-weight(文字粗細)：設定文字粗細。屬性有：normal：正常　bold：粗體　bolder：特粗　細體：lighter 另外你也可以直接設定為：font-weight: N; (N為正整數 起始值為100)
7. font-variant(文字變形)：設定文字變形。屬性有：normal：正常　small-caps：小型大寫字.
8. text-transform(文字大小寫)：設定文字大小寫。屬性有：capitalize：字首大寫　uppercase：全部大寫　lowercase：全部小寫
9. text-decoration(文字裝飾)：設定文字裝飾。屬性有：underline：底線　overline：上端線　line-through：刪除線　blink：文字閃爍 none：無線(亦可刪除連結底線)
10. vertical-align(上下標字型)：設定上下標字型。屬性有：super：上標字　sub：下標字
11. text-align(文字對齊)：決定 文字水平對齊方式。屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊
12. vertical-align(垂直對齊)：決定 垂直對齊方式。屬性有：top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設)
13. letter-spacing(單字間距 )：設定單字間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
14. word-spacing(字母間距)：設定字母間距。屬性有：N %：百分比 (100為正常值 150 就是1.5倍 依此類推) N px：像素   N pt：點 (N必須為正整數)
15. text-indent(文字縮排)：設定文字 縮排距離。屬性有：N px：像素   N pt：點 (N必須為正整數)

★注意：關於第9點中的「閃爍」效果和第10點的「上下標字型」，會依據瀏覽器、網頁語法編寫不同，而決定是否有支援！也就是不一定設定了就會顯示此類效果！

█ 語法說明 -- 文字連結控制：

/* 語法開始 */

a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:visited {font-weight: