| 表明使用CSS語言於HTML中 | |
| 方法一： | 在<head></head>中加入以下一段內定語言，使文件中所有<style></style>皆具此語言，故在<head></head>中，您只需要用<style></style>來代表使用，不用再設type="text/css"： <meta http-equip="Content-style-Type" content="text/css"> <style> <!-- slector {property:value; property:value; ....} </style> |
| 方法二： | 可以在<head></head>中，每一次使用加入以下一段(必須每一次都指明type為text/css)： <style type="text/css"> <!-- slector {property:value; property:value; ....} --!> <style> |
| 方法三： | 使用外在樣式檔(.css)，則請加入以下一段：(樣式檔內容正是<style></style>) <link rel=stylesheet type="text/css" href="樣式檔名稱.css"> |
樣式分類：HTML元素樣式、CLASS元素樣式、ID樣式、inline樣式、Contextual樣式
| HTML元素樣式 | |
| 解說： | 在<style></style>中做設定，當slector為HTML元素名稱時，瀏覽器會以HTML元素本身的特性為依據，再加上此部分之HTML元素樣式設定，以增加HTML元素本有的特性，來呼喚使用。 |
| 設定格式： | HTML元素名稱 {property:value; property:value; ....} |
| 使用格式： | <HTML元素名稱></HTML元素名稱> |
| CLASS元素樣式 | |
| 解說： | 在<style></style>中做設定，針對群族做樣式處理，以達到使用同一個HTML元素名稱時，有多個不同樣式設定的選擇。 |
| 設定格式： | HTML元素名稱.CLASS樣式名稱 {property:value; property:value; ...} |
| 使用格式： | <HTML元素名稱 class="CLASS樣式名稱"></HTML元素名稱> |
| ID樣式 | |
| 解說： | 在<style></style>中做設定，針對單一元素做樣式設定，以配會不同HTML元素名稱，皆可使用此樣式設定。 |
| 設定格式： | #ID樣式名稱 {property:value; property:value; ....} |
| 使用格式： | <HTML元素名稱 id=ID樣式名稱></HTML元素名稱> |
| inline樣式 | |
| 解說： | 直接在HTML元素在中做設定，針對單一元素做樣式設定，以配會不同HTML元素名稱，皆可使用此樣式設定。 |
| 設定格式： | style=" property:value; property:value; ...." |
| 使用格式： | <HTML元素名稱 style="property:value property:value; ...."></HTML元素名稱> |
| Contextual樣式 | |
| 解說： | 在<style></style>中做設定，針對元素階層做樣式設定。 |
| 設定格式： | 父HTML元素名稱 子HTML元素名稱 { property:value; property:value; ....} |
| 使用格式： | <父HTML元素名稱><子HTML元素名稱></子HTML元素名稱></父HTML元素名稱> |
樣式性質分類：
長度值、百分比值、顏色表示法、字型性質、文字性質、箱形性質、顏色及背景性質、分類性質、位置性質、顯示或隱藏。
| 長度值： | |
| 一個後面接著單位的數值，數值本身可以是小數，同時也允許使用(+)(-)符號。 | |
| 1.相對單位 | |
| em | 以元素本身的字型高度(通常就是大寫字母M的高度)為參考標準。 |
| ex | 以元素本身的字型高度的一半(通常是小寫字母x的高度)為參考標準。 |
| px | 像素點(pixel)。像素點被視為相對單位才是合理的作法，瀏覽器應該在不同的解析度顯示裝置自動做出不同的調整。 |
| 2.絕對單位 | |
| cm | 公分。 |
| mm | millimeters。 |
| in | 英吋。 |
| pt | points(1 point =1/72 inches)。 |
| pc | picas (1 pica = 12points)。 |
| 百分比值 |
| 一個後面接著%符號的數值，數值本身可以是小數，同時也允許使用(+)(-)符號。 |
| 顏色表示法 | |
| 格式一： | 以#號帶頭，後接三組(由00至FF)十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色。 |
| 格式二： | 以rgb(red,green,blue)函式表示顏色，每一個數值可以是由0至255之間的數值，也可以是百分比數值。 |
| 字型性質 |
| 1. | 性質： | font-family |
| 功能： | 設定字型種類 | |
| 說明： | 指定字型名稱，你可以指定多個字型名稱，並以逗號隔開，瀏覽器會依照字型名稱出現的順序去尋找去找使用者系統上的字型來使用，若所有指定的字型都無法找到，瀏覽器會使用內定的字型。除了指定的字型名稱，你也可以指定下列的通用字型名稱，它們代表的是字型的特色而不是字型的名稱，當你指定它們時，瀏覽器會自動採用符合該字型特色的實際字型：
|
|
| 應用範圍： | 所有元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P {font-family: 細明體, 標楷體, Time new roman, arial, serif, san-serif} |
| 2. | 性質： | font-style |
| 功能： | 設定字型樣式 | |
| 說明： | 指定字型樣式，它可以是normal或italic。normal表示正常體，italic表示斜體。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P EM {font-style:italic;} |
| 3. | 性質： | font-weight |
| 功能： | 設定字型份量 | |
| 說明： | 指定字型的份量，它可以是normal或bold。normal表示正常體，bold表示粗體。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | BLOCKQUOTE {font-weight:bold;} |
| 4. | 性質： | font-size |
| 功能： | 設定字型大小 | |
| 說明： | 指定字型的大小，以下是它可以接受的設定值：xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller、長度值或是百分比值。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P {font-size:larger;} |
| 文字性質 |
| 1. | 性質： | text-decoration |
| 功能： | 設定文字裝飾形態 | |
| 說明： | 指定文字元素的裝飾形態，它可以是none、underline、line-through。none表示不裝飾，underline會在文字元素下方加上底線，而line-through則會以直線穿過文字元素。若應用到非文字元素上，它並不會產生任何作用。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H1 {text-decoration:underline;} |
| 2. | 性質： | text-transform |
| 功能： | 設定文字的轉換方式 | |
| 說明： | 指定文字元素的大小寫轉換方式，它可以是none、capitalize、uppercase、lowercase。none表示不做任何轉換，capitalize表示將每一個字的第一個字母轉換成大寫，uppercase表示將所有的字母轉換成大寫，lowercase表示將所有的字母轉換成小寫。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H1 {text-transform:uppercase;} |
| 3. | 性質： | text-align |
| 功能： | 設定文字對齊方式 | |
| 說明： | 指定區塊中文字元素的對齊方式，它可以是left、right、center、justify。left表示靠左對齊，right表示靠右對齊，justify表示左右對齊。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | H1 {text-align:left;} |
| 4. | 性質： | text-indent |
| 功能： | 設定文字的縮排方式 | |
| 說明： | 指定文字首行的縮排距離，它的設定值是一個長度值或百分比值。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P {text-indent:5%;} |
| 5. | 性質： | line-height |
| 功能： | 設定行距 | |
| 說明： | 指定區塊中文字元素的行距，它的設定值是一個長度值或百分比值。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P {line-height:120%;} |
| 箱形性質 |
| 1. | 性質： | border-width, border-top-width, border-right-width, border-bottom-width, border-left-width |
| 功能： | 設定邊框寬度 | |
| 說明： | 指定邊框的四個邊的寬度。你可以利用border-top-width，border-right-width，border-bottom-width，border-left-width來分別設定上、右、下、左四個邊框的寬度，它們的設定必須為一個數值。另外，你也可以值接利用border-width一設定好四個邊框的寬度，它的設定是以空格分開的四個長度數，依序來設定上、右、下、左四個邊框的寬度。當你只給定一個長度數值時，它會視邊框具有相同的寬度。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P
{border-top-width: 20pt;} P {border-width:10pt 15pt 20pt 5pt;} P {border-width: 10pt;} |
| 2. | 性質： | border-style |
| 功能： | 設定邊框樣式 | |
| 說明： | 指定邊框的顯示樣式，它可以是none、solid、double、groove、ridge、inset、outset，各自代表著各種不同的顯示樣式。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H1 {border-style: groove;} |
| 3. | 性質： | border-color |
| 功能： | 設定邊框顏色 | |
| 說明： | 指定邊框的顏色，它的設定值是一個顏色值，其表示方式請參見顏色表示法。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H1
{border-color: blue;} H1 {border-color: #0000FF;} |
| 4. | 性質： | padding, padding-top, padding-right, padding-bottom, padding-left |
| 功能： | 設定填補空間 | |
| 說明： | 指定元素內容與邊框之間的填埔空間距離。你可以利用padding-top、padding-right、padding-bottom、padding-left來分別設定上、右、下、左四個空間的距離，它們的設定值必須是一個長度數值。另外，你也可以直接利用padding一次就設好四個填補空間，它的設定格式是以空格分開的四個長度數值，依序代表上、右、下、左四空間距離，當你只給定一個長度數值時，它會視同四個空間具有相同的距離。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P
{padding-top: 20pt;} P {padding: 20pt 30pt 10pt 50pt;} P {padding: 10pt;} |
| 5. | 性質： | Margin,margin-top,margin-right,margin-bottom,margin-left |
| 功能： | 設定邊界距離 | |
| 說明： | 指定區塊元素與其相鄰元素彼此邊界之間的空間距離。你可以利用margin-top、margin-right、margin-bottom、margin-left來分別設定上、右、下、左四個空間的距離，它們的設定值必須是一個長度數值。另外，你也可以直接利用padding一次就設好四個空間距離，它的設定格式是以空格分開的四個長度數值，依序代表上、右、下、左四空間距離，當你只給定一個長度數值時，它會視同四個空間具有相同的距離。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P {margin-top:
20pt;} P {margin: 20pt 30pt 10pt 50pt;} P {margin: 10pt;} |
| 6. | 性質： | float |
| 功能： | 設定區塊元素的對齊方式 | |
| 說明： | 指定區塊元素與其父元素之間的對齊關係，它的設定值可以是none、left、right。none表示不做任何對齊，left表示靠左對齊，right表示靠右對齊，同一階層的元素則圍繞在它的另外一側。請注意，在設定float性質時，不要做margin-left或margin-right的設定，否則會有意想不到的效果。 | |
| 應用範圍： | block-level元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H1 {float: right;} |
| 7. | 性質： | clear |
| 功能： | 設定元素左右兩側可否放置float元素 | |
| 說明： | 指定元素的那一側不能float的元素，它的設定值可以是none、left、right、both。none表示元素的兩側都可以float元素，left表示元素的左側不能float元素，right表示元素的右側不能有float元素，both表示元素的左右兩側不能有float元素。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P {clear: right;} |
| 顏色及背景性質 |
| 1. | 性質： | color |
| 功能： | 設定前景顏色 | |
| 說明： | 指定文件元素的顏色，它的設定值是一個顏色值，其表示方式請參照顏色表示法。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | P {color:
#FF0000; } P {color: red; } |
| 2. | 性質： | blackground-color |
| 功能： | 設定背景顏色 | |
| 說明： | 指定元素的背景顏色，它的設定值是一個顏色值，其表示方式請參照顏色表示法。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P
{background-color: #FF0000; } P {background-color: red; } |
| 3. | 性質： | blackground-image |
| 功能： | 設定背景圖案 | |
| 說明： | 指定元素的背景圖案 ，它的設定值是參照到該圖案的url。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | P {background-image: url(.../image.gif); } |
| 分類性質 |
| 1. | 性質： | display |
| 功能： | 設定顯示模式 | |
| 說明： | 指定元素的顯示模式，它的設定值包括none、block、inline、list-item。none表示不顯示元素(包括所有的子元素)，block表示將顯示模式設定為block模式，inline表示將顥示模式設定為inline模式，list-item表示將顯示模式設定為list-item模式。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | H2 {display:inline; } |
| 2. | 性質： | list-style-type |
| 功能： | 設定list-item元素的項目符號 | |
| 說明： | 指定list-item元素的項目符號，它的設定值包括disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha，它們分別代表一種不同的項目符號，例如disc是實心圓形符號，circle是空心圓形符號，square是方形符號、decimal是數字、lower-roman是小羅數字(如i,ii,iii)、upper-roman是大羅馬數字(如I,II,III)、lower-alpha是小寫英文字母(如a,b,c)、upper-alpha是大寫英文字母(如A,B,C)。 | |
| 應用範圍： | 顯示模式為<li>元素 | |
| 繼承性： | 會向下繼承 | |
| 例子： | ul li {list-style-type:disc; } |
| 位置性質 |
| 1. | 性質： | position |
| 功能： | 設定定位特性 | |
| 說明： | 指定元素的定位特性，它的設定值可以是static、absolute及relative，當它為absolute或relative時，表示此元素為可定位的元素，其中absolute是具有可定位的父元素，若無父元素則為document本身，relative則是目前的流動位置，static表示此元素是不可定位的，且所有與位置相關的性質都是無效的。 | |
| 應用範圍： | 所有元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | <H1 style="postition:absolute">內容</H1> |
| 2. | 性質： | left, top |
| 功能： | 設定左上角的位置 | |
| 說明： | 指定元素的水平及垂直位置，left代表的是水平位置，top代表的是重直位置，它們的設定值必須是長度數值。 | |
| 應用範圍： | position為absolute或relative的元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | <DIV style="postition:absolute; left:10pt; top:5pt;">內容</DIV> |
| 3. | 性質： | z-index |
| 功能： | 設定z軸數值 | |
| 說明： | 指定元素的z軸數值，它必須是一個整數值，數值愈大的元素會疊在數值小的元素之上。 | |
| 應用範圍： | position為absolute或relative的元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | <DIV style="z-index:8">內容</DIV> |
| 顯示或隱藏 |
| 1. | 性質： | visibility |
| 功能： | 利用chip設定元素顯示或隱藏 | |
| 說明： | 指定元素的顯示或隱藏，IE的設定值可以是visible、hidden及inherit，NS的設定值可以是show、hide及inherit。Visible或show表示元素會被顯示出來，hidden或hide表示元素會被隱藏，inherit表示設定值會依據父元素設定而設定。 | |
| 應用範圍： | 利用chip及position為absolute或relative的元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | document.all.chip.visibility="hidden";
(for IE) document.layer1.chip.visibliity="hide"; (for NS) |
| 2. | 性質： | weight,height |
| 功能： | 利用chip設定元素區間的大小 | |
| 說明： | 利用chip設定元素的大小，weight代表的是寬度，height代表的是高度，它們的設定值必須是長度數值。 | |
| 應用範圍： | 利用chip及position為absolute或relative的元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | .chip.weight=100pt; |
| 3. | 性質： | rect |
| 功能： | 利用chip設定元素區間的大小 | |
| 說明： | 利用chip設定元素的大小，IE設定為rect(top right bottom left)，而NS為rect(left,top,bottom,right)，四邊的設定值必須是長度數值。 | |
| 應用範圍： | 利用chip及position為absolute或relative的元素 | |
| 繼承性： | 不會向下繼承 | |
| 例子： | .chip="rect(0 10 20 10)"; (IE與NS不同) |
對於動態存取、控制樣式，IE對CSS支援較強，其動態存取、控制樣式如下：
| 動態存取、控制樣式 (for IE) |
| stylesheet | IE將所有樣式清單放於stylesheet中。 |
| stylesheet.length | 可以知道樣式清單的數目。 |
| rules | 清單中的樣式順序放於rules中。 |
| stylesheet[i].rules.length | 可以知道樣式清單i中樣式數目。 |
| selectorText | 存放樣式選擇器。 |
| style.property | slector {property:value; property:value;} 中property的value值。 |
background
設定背景樣式。值可以為所有背景樣式屬性的設定值(也就是所有[back-ground-]開頭的樣式屬生值)。設定值和設定值之間以空白隔開，例如：
| body {background:url(圖案.gif) fixed left top} |
background-attachment
設定背景是否為固定。值可以為：scroll(隨捲軸捲動)或fixed(固定)。
background-color
設定背景顏色。值可以為任何顏色的表示法。
background-image
設定背景圖案。值為圖檔的URL。
background-position
設定背景圖位置。一般是有設定為重複時，才使用。值可以為：bottom、center、left、right、top、百分比表示或長度單位表示。
background-repeat
設定背景的重複方式。值可以為repeat(重複背景圖至全滿)、repeat-x(水平方向重複)、repeat-y(重直方向重複)、no-repeat(不重複)。
border-bottom-color
設定物件的底邊框的顏色。
border-bottom-style
設定物件的底邊框樣式。設定值請參看border-style。
border-bottom-width
設定物件底邊的邊寬。值可以為長度單位。
border-color
設定物件的邊框顏色。只給一個值時，表示四個邊框顏色一樣；給兩個值時，表示上下邊顏色一樣，左右顏色一樣。給值的順序是上、右、下、左。
border-left-color
設定物件的左邊框的顏色。
border-left-style
設定物件的左邊框樣式。設定值請參看border-style。
border-left-width
設定物件左邊的邊寬。值可以為長度單位。
border-right-color
設定物件的右邊框的顏色。
border-right-style
設定物件的右邊框樣式。設定值請參看border-style。
border-right-width
設定物件右邊的邊寬。值可以為長度單位。
border-style
設定物件的邊框樣式。值可以為none(沒有框邊)、dotted(點式框邊)、dashed(短線虛線)、solid(實線)、doubled(雙線)、groove(立體溝狀)、ridge(立體丘狀)、inset(立體下凹)、outset(立體凸出)。只給一個值時，表示四個邊框樣式一樣；給兩個值時，表示上下邊框一樣，左右邊框一樣。給值的順序是上、右、下、左。
border-top-color
設定物件的上邊框的顏色。
border-top-style
設定物件的上邊框樣式。設定值請參看border-style。
border-top-width
設定物件上邊的邊寬。值可以為長度單位。
border-width
設定物件的邊寬，值可為長度單位。只給一個值時，表示四個邊寬一樣；給兩個值時，表示上下邊框一樣，左右邊框一樣。給值順序為上、右、下、左。
clear
設定元件的左右邊否可以有其他元件存在。值可以為：both、left、none及right。
color
設定前景顏色。可以為任何顏色表示法。
display
顯示樣式。值可以為inline、block及none。
float
設定元件向左或向右靠，文字圍繞在右邊或左邊。值可以為left、right及none。
font
設定文字樣式。值可以為所有字型樣式屬性的設定值(也就是所有[font-]開頭的樣屬性設定值)。設定值及設定值之間以空白格隔開。例如：
| H1 {font: Arial 24pt italic} |
font-family
設定文字字型(值為字型名稱)，若字型名稱中有包含空白時，請加上單引號或雙引號。
font-size
設定字型大小。一般使用的是以pt為單位，或是以百分比表示(相對於父元件字型大小)。值也可以是絕對大小的：small、meduum、large或是相對大小的smaller、larger。：
font-style
設定字體樣式。一般使用的值為：normal(一般樣式)或italic(斜體式)
font-variant
設定字體變化。可設定的值有：normal及small-caps(英文字母轉換成小的大寫)。
font-weight
設定字體粗細。設定值為：normal、bold(粗體)、bolder(較粗的)、lighter(較細的)、100、200、300、400、500、600、700、800及900(數字愈大愈粗)。
height
設定元件的高度。值可以為auto、長度單位或以百分比表示。
left
設定元件和網頁文件左邊的距離。值可以為：auto、長度單位或百分比表示。
letter-spacing
設定字（字母）的間距。值可以為：normal（間距為0）或是以pt為單位。
line-height
設定列高，預設值為normal。值可以為以pt為單位的數值，或百分比表示。
list-style
設定項目樣式。值可以為所有項目樣式屬性的設定值（也就是所有〔list-style-]開頭的樣式屬性設定值）。設定值和設定值之間以空白隔開。例如：
| XX {list-style: url(項目圖案．gif) outside square} |
list-style-image
以圖形為項目符號。值為圖檔的URL，方式以url(圖檔來源)。
list-style-position
設定項目符號的位置。值可以為inside（段落內）、outside（段落外)。
list-style-type
設定項目符號，預設為disc。值可以為disc、circle、decimal、lower-alpha、upper-alpha、lower-roman、upper-roman。
margin
設定邊界（留白）。值可為長度單位，或以百分比表示。只給一個值時，表示四個邊界一樣；給兩個值時，表示上下邊界一樣，左右邊界一樣。給值的順序為上、右、下、左。
margin-bottom
設定下邊界（留白）。值可以為長度單位，或以百分比表示。
margin-left
設定左邊界（留白）。值可以為長度單位，或以百分比表示。
margin-right
設定右邊界（留白）。值可以為長度單位，或以百分比表示。
margin-top
設定上邊界（留白）。值可以為長度單位，或以百分比表示。
padding
設定物件內容和物件邊的留白。值的設定方式和margin一樣，可以同時設定左、右、上、下四個邊留白。
padding-bottom
設定物件內容和物件底邊之間的留白。值可以長度單位，或百分比表示。
padding-left
設定物件內容和物件左邊之間的留白。值可以長度單位，或百分比表示。
padding-right
設定物件內容和物件右邊之間的留白。值可以長度單位，或百分比表示。
padding-top
設定物件內容和物件上邊之間的留白。值可以長度單位，或百分比表示。
position
設定元件在視窗顯示區的位置參考方式。值可以為：absolute、relative或static。
text-align
設定文字對齊方式。值可以為：center、justify、left、right。
text-decoration
設定文字效果。值可以為：none、underline、overline（頂線）、line-through及blink（閃爍）。一般文字預設為none，若為可連結文字則為underline。
text-indent
設定首行縮排的長度。預設值為0，值可以為以pt為單位的數值或以百分比表示，若為負值表示凸排。
text-transform
設定文字大小寫，只適用放英文字。值可以為：none、capitalize、uppercase、lowercase。
top
設定元件和網頁文件頂邊的距離。值可以為：auto、長度單位或百分比表示。
vertical-align
設定網頁元件垂直對齊。值可以為：baseline、bottom、sub、super、text-bottom、text-top、top以百分比表示。
visibility
設定元件的可見性。在IE，值可以為visible、hidden及inherit。在NS，值可以為show、hide或inherit。
width
設定元件的寬度。值可以為：auto、長度單位或以百分比表示。
z-index
設定層疊的前後屬性，設定值可以為auto或數字。值越大表示越在上方，在上方則不會被其他層疊蓋著。