CSS (Cascading Style Sheet)
CSS 教學

文章回顧：XHTML (Extensible HyperText Markup Language) 教學
參考來源：http://home.kimo.com.tw/darch2002000/css.HTML
最後修正：2007-08-07
資料修正：Linux0911
轉載請註明來源：http://linux0911.no-ip.info/my_style/doc/css/ 

CSS 是甚麼? 可以吃嗎??

簡單來講，就是為您的網頁上色的意思! (夠簡單明瞭)

以下的整理資料都是很常用的語法，請多多善用 CSS 來搭配 XHTML



資料很多：善用 ctrl + f 來搜尋關鍵字！



何謂 CSS 語法？

CSS 的全名是 Cascading Style Sheet，中文名稱為樣式表。其實它跟 HTML 語法相當的類似

用最基本的文字編輯器(例如記事本)就可以完成，如果你對 HTML 已經有相當的基礎

CSS 將是最佳配角，因為它可以配合 HTML 甚至 JavaScript 來達到多種的效果。

它的主要特色就是排版的效果，在 HTML 語法中，常需要使用到一些設定顏色、文字大小、框線粗細等等這一類的標籤

而 CSS 就是希望在開頭的地方就將這些設定給做好，不需要再反覆輸入同樣的標籤，整個網頁就會套用這個設定來呈現

不但讓網頁大大的減肥，也能降低將來維護網頁的困難度。

它唯一的缺點，就是瀏覽器的支援程度，編寫網頁最頭痛的地方就是，使用不同的瀏覽器看同一個網頁

往往會有不同的結果，CSS 在這方面比 HTML 還要嚴重，所以在使用 CSS 的時候要特別注意

不同的瀏覽器是否都能支援你的語法？ 至少IE 跟 Firefox 都要正常顯示，這才是最高境界。

--------------------------------------------------------------------------------------------

如何加入 CSS 語法

在 XHTML 那篇文章我們提到 XHTML 的標準格式中有提到

呼叫 CSS 的語法是這樣寫的：

<link type="text/css" rel="stylesheet" href="CSS 放置處.css" />

意思就是先把 .css 檔案的位置先指定出來，通常放在 </head> 上面就 ok 了


1、直接定義在原有的 HTML 標籤內，利用 style，例如將語法加入原有標籤 <span> 內

寫法：

<span style="CSS 語法">

在上面範例提到的 CSS 語法就是接下來幾章要介紹的，他每一個參數都有相對應的功能

對於不同功能的參數，我們就用分號 ; 分開

寫法：

<span style="font-size: 20px; font-weight: bold">

經過這樣的設定，夾在 <span>...</span> 這個標籤內文字的樣式，就會依照設定來呈現。





2、在 <head> 與 </head> 之間宣告

(1) 依附標籤

寫法：

span {
	CSS 語法
}

往後我們只要一使用到 <span> 這個標籤，設定將自動被套用。

如果要套用到很多個標籤的話，只要用逗號 , 分開就可以了

例如：

span, td, h1 {
	CSS 語法
}

往後我們只要一使用到 <span>、<td>、<h1> 這些標籤，設定將自動被套用。





(2) 先給名字再呼叫

舉例來說：

.title {
	CSS 語法
}

我們已經將設定命名為 title 了，那想套用的時候，就用 class 呼叫它。

呼叫：

<span class="title">

該 <span>...</span> 標籤內的所有元件，將會套用名字叫做 title 的設定。





(3) 先給名字再呼叫 (id)

舉例來說：

#title {
	CSS 語法
}

我們已經將設定命名為 title 了，那想套用的時候，就用 id 呼叫它。
  
呼叫：
<span id="title">




--------------------------------------------------------------------------------------------








重要標籤

在開始介紹這一章之前，必須先跟大家介紹一下在 HTML 語法中提到兩個重要的標籤

<div> ... </div>
<span> ... </span>

這兩組對應標籤的目的，都是為了讓夾在裡面的元件被定義成一個區塊，被定義成一個區塊有什麼好處呢？

我可以配合很多 CSS 語法，來對這個區塊進行設定，例如設定這個區塊的底色，為這個區塊加上框線等等。

一些原本不能加上底色、框線的元件，例如文字，經過定義後，我們就可以對它為所欲為。

雖然這兩個標籤的功能一樣，不過使用上還是有不同之處。被定義在 <div> 之間的元件，會自動斷行

而 <span> 則不會斷行，也就是上下文仍然在其左右。

舉例說明：
這是


DIV 標籤 DIV 標籤 DIV 標籤 DIV 標籤
 DIV 標籤

這是

SPAN 標籤 SPAN 標籤 SPAN 標籤 SPAN 標籤





區塊設定

width = 指定區塊的寬度;

寫法：

width: 20px;

表示法：20px (直接給定一個值)、30% (百分比)、auto (讓瀏覽器幫你調整)





height =指定區塊的高度;

寫法：

height: 20px;

表示法：20px(直接給定一個值)、30% (百分比)、auto (讓瀏覽器幫你調整)





position = 位置;

接下來我們要介紹區塊的座標位置，要定義一個座標，就一定要有基準點，這個設定就是為了定義基準點。

寫法：

position: absolute;

可以套用
absolute (絕對) 絕對的意思是，基準點位於網頁的最左上角
relative (相對) 而相對的意思，基準點則是位於上一個被定義區塊的最左上角。





top = 上端位置;

寫法：

top: 100px;

指定區塊的最上端位置。以基準點為準，正值代表在基準點的下方，負值代表上方

值越大離基準點越遠。例如 top: -50px 就表示在基準點上方 50 像素的位置





left = 左側位置;

寫法：

left: 100px;

指定區塊的最左側位置。以基準點為準，正值代表在基準點的右方，負值代表左方

值越大離基準點越遠。例如 left: -80px 就表示在基準點左方 80 像素的位置





z-index = 垂直螢幕高度;

寫法：

z-index: 100;

指定區塊垂直螢幕的高度，沒有單位，數字越大位置越高

例如 z-index: 200 比 z-index: 50 高，有了這個語法，就可以產生立體感了。





visibility = 設定顯示與否;

寫法：

visibility: visible

設定是否將定義的區塊顯示出來，可以套用

visible (顯示)

hidden (隱藏，但仍然佔據畫面空間)。





overflow = 設定是否產生捲軸;

寫法：

overflow: auto;

當區塊中的元件比我們設定的區塊還大時，就產生是否產生捲軸的問題，可以套用

auto (當元件大於區塊時，自動產生捲軸)

scroll (不論元件大小，一律產生捲軸)

hidden (不論元件大小，一律不產生捲軸，所以超出區塊的部份就會隱藏不顯示)

visible (若元件大於區塊，則區塊自動撐大)。





margin = 設定區塊與外界之間留白的大小;

寫法：

margin: 3px 4px 2px 5px;

可以一次設定四個邊與外界之間的留白大小，依序是上、右、下、左。

如果只想設定其中一邊，我們就換個方式來寫

寫法：

margin-top: 3px;
margin-right: 4px;
margin-bottom: 2px;
margin-left: 5px;

或是寫成：

margin-left: auto;
margin-right: auto;

上下左右都置中





padding = 設定元件與區塊邊緣之間留白的大小;

寫法：

padding: 3px 4px 2px 5px;

可以一次設定四個方向留白大小，依序是上、右、下、左。

如果只想設定其中一個方向，我們就換個方式來寫

寫法：

padding-top: 3px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 5px;





--------------------------------------------------------------------------------------------





框線設定

從前只有表格可以有框線，若配合前一章的區塊設定，任何的元件都可以擁有框線了。




border-top-width = 設定框線的寬度;

寫法：

border-top-width: thin;

top 可以換成 bottom、left、right，分別設定上面、下面、左邊、右邊的框線寬度。


thin 可以換成 thin (細框)、medium (一般)、thick (粗框)。

寫法：

border-top-width: 5px;

這跟上面的設定類似，只是我們直接用數值指定框線的寬度。top 一樣可以換成

bottom、left、right。





border-width = 設定所有框線的寬度;

上面的寫法可以個別設定四個框線的寬度，如果你想全部設成一樣的話，直接利用這個寫法就可以了。寫法與上面類似。

寫法：

border-width: thick;
border-width: 5px;





border-top-color = 設定框線顏色;

寫法：

border-top-color: #ff0000;

直接用 16 進制顏色命名法。top 可以換成 bottom、left、right，分別設定上面、下面、左邊、右邊的框線顏色。

寫法：

border-top-color: red

直接指定顏色名稱。top 可以換成 bottom、left、right，分別設定上面、下面、

左邊、右邊的框線顏色。

寫法：

border-top-color: rgb(128,255,255)

利用 RGB 顏色命名法。top 可以換成 bottom、left、right，分別設定上面、下面、左邊、右邊的框線顏色。





border-color = 設定所有框線的顏色;

上面的寫法可以個別設定四個框線的顏色，如果你想全部設成一樣的話，直接利用這個寫法就可以了。寫法與上面類似。

寫法：

border-color: #ff0000;
border-color: red;
border-color: rgb(128,255,255);





border-top-style = 設定框線樣式;

寫法：

border-top-style: soild

soild 可以換成 none、dotted、dashed、solid、double、groove、ridge、insert、outset。

因為這些線實在很難用中文形容，所以請自己試看看吧！

top 可以換成 bottom、left、right，分別設定上面、下面、左邊、右邊的框線樣式。





border-style = 設定所有框線的樣式;

上面的寫法可以個別設定四個框線的顏色，如果你想全部設成一樣的話，直接利用這個寫法就可以了。寫法與上面類似。

寫法：

border-style: dashed;





--------------------------------------------------------------------------------------------





捲軸

隱藏所有捲軸 <body scroll="no"> 將整頁的捲軸隱藏

隱藏橫軸

body {
	overflow-x: hidden
}

橫軸隱藏，縱軸仍可使用



隱藏縱軸

body {
	overflow-y: hidden
}

縱軸隱藏，橫軸仍可使用




--------------------------------------------------------------------------------------------



分類性質 

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;
}





--------------------------------------------------------------------------------------------









body {
	/* body = 整體的而且滑鼠沒移動到超連結的狀態 */
}
a:link {
	/* a:link = 設定超連結的樣式 */
}
a:hover {
	/* a:hover = 移到連結用 */
}
a:visited {
	/* a:visited = 設定瀏覽過後超連結的樣式 */
}
a:active {
	/* a:active = 設定點下超連結時的樣式 */
}


┌cursor = 設定滑鼠指標的樣式;
│	cursor: crosshair;	//交叉十字
│	cursor: auto;		//自動手型
│	cursor: default;	//預設箭頭游標
│	cursor: text;		//文字游標
│	cursor: wait;		//沙漏
│	cursor: help;		//箭頭游標 + 問號
│	cursor: ne-resize;	//左下右上
│	cursor: s-resize;	//上下指
│	cursor: e-resize;	//左右指
│	cursor: se-resize;	//左上右下
│	cursor: nw-resize;	//左上右下
│	cursor: n-resize;	//上下指
│	cursor: w-resize;	//左右指
│	cursor: sw-resize;	//左下右上指
└	cursor: ne-resize;	//左下右上指

┌text-decoration = 設定底線的樣式;
│	text-decoration: none;			//無效果維持原狀
│	text-decoration: underline;		//加底線
│	text-decoration: overline;		//加頂線
│	text-decoration: underline overline;	//加頂線底線
│	text-decoration: blink;			//閃爍文字, 僅對 Firefox 有效
└	text-decoration: line-through;		//文字刪除線

┌text-transform
│	text-transform: capitalize;	//每字的第一個字母大寫
│	text-transform: uppercase;	//全部大寫
└	text-transform: lowercase;	//全部小寫

┌text-verticalalign
│	text-verticalalign: top;	//靠上
│	text-verticalalign: middle;	//垂直置中
│	text-verticalalign: bottom;	//靠下
│	text-verticalalign: baseline;	//文字對準基準線
│	text-verticalalign: sub;	//下標
└	text-verticalalign: super;	//上標

┌text-lineheight
│	text-lineheight: 10pt;		//行距 10pt
└	text-lineheight: 20pt;		//行距 20pt

┌letterspacing
│	text-letterspacing: 10pt;	//字距 10pt
└	text-letterspacing: -2pt;	//字距 -2pt

┌wordspacing
│	text-wordspacing: 20pt;		//空白鍵件的距離 20pt
└	text-wordspacing: -8pt;		//空白鍵件的距離 -8pt

┌background-color = 設定背景顏色;
│	└background-color: #000000;	//直接填寫色碼
├background-image = 設定背景圖片;
│	└background-image: url('xxx.jpg');
├background-position = 設定背景圖片的位置;
│	└background-position: 75% 25%;
│	基準點是元件的左上角，第一個參數是指定 X 方向，第二個指定 Y 方向
│	範例中的位置，就是在基準點的右邊，75% 元件寬，下面，25% 元件高的地方。
│	寫法：
├Background-position: 75px 25px;		
│	跟上一個表示法類似，只是將位置直接用像素指定。
│	寫法：
├background-position: right top;
│		X 方向可以指定為 left(0%)、center(50%)、right(100%)
│		Y 方向可以指定為 top(0%)、center(50%)、bottom(100%)
│
├background-repeat = 設定背景的重複;
│	HTML 背景的原理就是一張小圖片，利用貼磁磚的方式貼滿整個畫面。
│	這裡我們可以選擇貼磁磚的方式，不一定要貼的滿滿的。
│
│	可以設定為 repeat (一般貼的滿滿的狀況)、repeat-x (只往 x 方向貼滿)、repeat-y (往 Y 方向貼滿)
│
│	no-repeat (不重複貼，也就是只有一張小圖)
│
├background-attachment = 設定背景是否固定;
│	可以利用這個方法，讓背景圖片不隨著捲軸的捲動而移動位置。
│
├background-attachment: scroll;
│	可以指定為 scroll (一般效果)、fixed (固定不動)
│
└background = background 家族總管;
	上面所介紹的所有 background 語法，我們可以用它來一次設定完畢。
	原寫法：
		{
			background-color: red;
			background-repeat: repeat
		}
	總管寫法：
		{
			background: red repeat
		}
	在不同的設定之間加一個空白鍵就可以了。






常用單位：

像素 px

點 pt

英吋 in






接下來認識一下 !important

參考資料：http://www.w3cn.org/article/tips/2004/91.html

用 !important 解決 IE 和 Mozilla 的佈局差別
作者：阿捷 2004-7-24 14:56:36
在設計《網頁設計師》頁面的時候，有一個問題一直困擾著我，主選單在 IE 和其他 (Mozilla、Opera 等) 瀏覽器裡

顯示的效果偏差 2px。截圖如下：

IE 中的效果


Mozilla Firefox 中的效果


這是因為 IE 對盒之間距離的解釋的 bug 造成的 (參考 onestab 的" 浮動模型的問題 ")。

我一直沒有解決這個問題，直到我翻譯 " 表格對決 CSS--一場生死之戰 " 時

作者的一個技巧提示幫我找到了解決的方法：用 !important。

!important 是 CSS1 就定義的語法，作用是提高指定樣式規則的應用優先權 (參見：W3.org 的解釋)。

語法格式
{
	sRule!important
}
即寫在定義的最後面，例如：
box {
	color:red !important;
} 
最重要的一點是：IE 一直都不支援這個語法，而其他的瀏覽器都支援。

因此我們就可以利用這一點來分別給 IE 和其他瀏覽器不同的樣式定義，例如，我們定義這樣一個樣式：

.colortest { 
	border: 20px solid #60A179 !important;
	border: 20px solid #00F;
	padding: 30px;
	width : 300px;
} 

在 Mozilla 中瀏覽時候，能夠理解 !important 的優先級，因此顯示 #60A179 的顏色：


在 IE 中瀏覽時候，不能夠理解 !important 的優先級，因此顯示 #00F 的顏色：

 
可以看到，利用 !important，我們可以針對 IE 和非 IE 瀏覽器設置不同的樣式

只要在非 IE 瀏覽器樣式的後面加上 !important。因此，上面提到的我的網頁 2px 的顯示差別也輕鬆解決：

padding-top: 11px !important;
padding-top: 9px;

!important 必定成為 CSS 佈局的利器，請記住和掌握它吧:)





CSS 屬性瀏覽器相容一覽表
資料來源：http://www.w3cn.org/article/tips/2006/120.html















--------------------------------------------------------------------------------------------









資料來源：http://www.yesky.com/imagesnew/software/css/css2/default.html

字體文字類相關


font-size-adjust 版本：CSS2　 相容性：NONE　繼承性：有

語法：

font-size-adjust: none | number

參數

none		//允許字體序列中每一字體遵守它的自己的尺寸
number		//為字體序列中所有字體強迫指定同一尺寸

說明：

設置或檢索用於對像中文字的字體名稱序列是否強制使用同一尺寸。
目前 IE 5.5 尚不支援此屬性。
對應的腳本特性為 fontSizeAdjust。請參閱我編寫的其他書目。

示例：

p {
	font-family: arial, courier;
	font-size-adjust: none;
}
p {
	font-family: verdana, courier;
	font-size-adjust: .56;
}





font-stretch 版本：CSS2　 相容性：NONE　繼承性：有

語法：

font-stretch:
normal | narrower | wider | ultra-condensed | extra-condensed | condensed
semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
 
參數：
 
normal		//不應用拉伸變形
narrower	//使用比當前設置的值導致字體寬度更小的值
wider		//使用比當前設置的值導致字體寬度更大的值
 
說明：
 
設置或檢索用於對像中文字的文字是否橫向的拉伸變形。
改變是相對於瀏覽器顯示的字體的正常寬度的。
目前IE5.5尚不支援此屬性。
對應的腳本特性為fontStretch。請參閱我編寫的其他書目。
 
示例：
 
p {
	font-stretch: wider;
}
p {
	font-stretch: ultra-expanded;
}




font-variant 版本：CSS1　 相容性：IE4+ NS6+　繼承性：有

語法：

font-variant: normal | small-caps
 
參數：

normal		//正常的字體
small-caps	//小型的大寫字母字體

說明：

設置或檢索對像中的文字是否為小型的大寫字母。
對應的腳本特性為 fontVariant。請參閱我編寫的其他書目。

示例：

span {
	font-variant: small-caps;
}




line-height 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

line-height: normal | length
 
參數：

normal		//預設行高
length		//百分比數字
		//由浮點數字和單位標識符號組成的長度值，允許為負值。
		//其百分比取值是基於字體的高度尺寸。請參閱長度單位

說明：

檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。
如行內包含多個對象，則應用最大行高。此時行高不可為負值。
對應的腳本特性為 lineHeight。請參閱我編寫的其他書目。

示例：

div {
	line-height: 6px;
}
div {
	line-height: 10.5;
}



letter-spacing 版本：CSS1　 相容性：IE4+ NS6+　繼承性：有

語法：

letter-spacing: normal | length

參數：

normal		//預設間隔
length		//由浮點數字和單位標識符號組成的長度值，允許為負值。請參閱長度單位

說明：

檢索或設置對像中的文字之間的間隔。
該屬性將指定的間隔添加到每個文字之後，但最後一個字將被排除在外。
對應的腳本特性為 letterSpacing。請參閱我編寫的其他書目。

示例：

div {
	letter-spacing: 6px;
}
div {
	letter-spacing: 0.5pt;
}




word-spacing 版本：CSS1　 相容性：IE4+ NS6+　繼承性：有

語法：

word-spacing: normal | length

參數：

normal		//預設間距
length		//由浮點數字和單位標識符號組成的長度值，允許為負值。請參閱長度單位

說明：

檢索或設置對像中的單詞之間插入的空格數。對於 IE4+ 而言僅在 MAC 平台上可用。
對應的腳本特性為 wordSpacing。請參閱我編寫的其他書目。

示例：

div {
	word-spacing: 10;
}
div {
	word-spacing: 10px;
}




font-style 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

font-style: normal | italic | oblique
 
參數：
 
normal		//正常的字體
italic		//斜體。對於沒有斜體變數的特殊字體，將應用 oblique
oblique		//傾斜的字體

說明：

設置或檢索對像中的字體樣式。
對應的腳本特性為 fontStyle。請參閱我編寫的其他書目。
 
示例：
 
p {
	font-style: normal;
}
p {
	font-style: italic;
}
p {
	font-style: oblique;
}




text-shadow 版本：CSS2　 相容性：NONE　繼承性：無

語法：

text-shadow: color || length || lenth|| opacity
 
參數：
 
color		//指定顏色。請參閱顏色單位和附錄：色碼表
length		//由浮點數字和單位標識符號組成的長度值。可為負值。
		//第一個 length 指定陰影的水平延伸距離。
		//第二個 length 指定陰影的垂直延伸距離。請參閱長度單位
opacity		//由浮點數字和單位標識符號組成的長度值。
		//不可為負值。
		//指定模糊效果的作用距離。
		//如果你僅僅需要模糊效果，將前兩個 length 全部設定為 0。請參閱長度單位

說明：

設置或檢索對像中文字的文字是否有陰影及模糊效果。
可以設定多組效果，方式是用逗號隔開。
可以被用於偽類: first-letter 和 :first-line。
目前 IE 5.5 尚不支援此屬性。
對應的腳本特性為 textShadow。請參閱我編寫的其他書目。

示例：

p {
	text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px;
}
p:first-letter {
	font-size: 36px;
	color: red;
	text-shadow: red 0px 0px 5px;
}






font-weight 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

font-weight: normal | bold | bolder | lighter | number

參數：

normal		//正常的字體。相當於 number 為 400。聲明此值將取消之前任何設置
bold		//粗體。相當於 number 為 700。也相當於 b 對象的作用
bolder		//IE5+　特粗體
lighter		//IE5+　細體
number		//IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

說明：

設置或檢索對像中的文字字體的粗細。
作用由用戶端系統安裝的字體的特定字體變數映射決定。
系統選擇最近的匹配。也就是說，用戶可能看不到不同值之間的差異。
對應的腳本特性為 fontWeight。請參閱我編寫的其他書目。

示例：
 
span {
	font-weight: 800;
}





font-family 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

font-family: name
font-family: cursive | fantasy | monospace | serif | sans-serif

參數：

name		//字體名稱。按優先順序排列。
		//以逗號隔開。如果字體名稱包含空格，則應使用引號括起
		//第二種聲明方式使用所列出的字體序列名稱。如果使用 fantasy 序列，將提供預設字體序列

說明：

設置或檢索用於對像中文字的字體名稱序列。
預設值由瀏覽器確定。
序列可包含嵌入字體字體。請參閱 @font-face 規則。
對應的腳本特性為 fontFamily。請參閱我編寫的其他書目。

示例：

div.fixedwidth {
	font-family: Courier, "Courier New", monospace
}




text-indent 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

text-indent: length

參數：

length		//百分比數字
		//由浮點數字和單位標識符號組成的長度值，允許為負值。請參閱長度單位

說明：

檢索或設置對像中的文字的縮排。
在被另一個對像（如）斷開的對象內不能應用本屬性。
對應的腳本特性為 textIndent。請參閱我編寫的其他書目。

示例：

div {
	text-indent: -5px;
}
div {
	text-indent: underline 10%;
}






text-overflow 版本：IE6+專有屬性　繼承性：無

語法：

text-overflow: clip | ellipsis

參數：

clip		//不顯示省略標記（...），而是簡單的裁切
ellipsis	//當對像內文字溢出時顯示省略標記（...）

說明：

設置或檢索是否使用一個省略標記（...）標示對像內文字的溢出。
對應的腳本特性為 textOverflow。請參閱我編寫的其他書目。

示例：

div {
	text-overflow: clip;
}



vertical-align 版本：CSS1/CSS2　 相容性：IE4+ NS4+　繼承性：無

語法：

vertical-align: baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

參數：

baseline		//將支援 valign 特性的對象的內容與基線對齊
sub			//垂直對齊文字的下標
super			//垂直對齊文字的上標
top			//將支援 valign 特性的對象的內容與對像頂端對齊
text-top		//將支援 valign 特性的對象的文字與對像頂端對齊
middle			//將支援 valign 特性的對象的內容與對像中部對齊
bottom			//將支援 valign 特性的對象的文字與對像底端對齊
text-bottom		//將支援 valign 特性的對象的文字與對像頂端對齊
length			//CSS2　由浮點數字和單位標識符號組成的長度值
			//或者百分比。可為負數。
			//定義由基線算起的偏移量。基線對於數值來說為 0
			//對於百分比來說就是 0%。目前 IE5 尚不支援。請參閱長度單位

說明：

設置或檢索對像內容的垂直對其方式。
對應的腳本特性為 verticalAlign。請參閱我編寫的其他書目。

示例：

td {
	vertical-align: center;
}





text-align 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

text-align : left | right | center | justify

參數：

left		//靠左對齊
right		//靠右對齊
center		//置中
justify		//左右對齊

說明：

設置或檢索對像中文字的對齊方式。
對應的腳本特性為 textAlign。請參閱我編寫的其他書目。

示例：

div {
	text-align: center;
}




layout-flow 版本：IE5.5+專有屬性　繼承性：有

語法：

layout-flow: horizontal | vertical-ideographic

參數：

horizontal		//對像中的內容自左邊流入。下一行在前一行下面。這個值適於拉丁語系
vertical-ideographic	//對像中的內容自上而下流入，下一行在前一行左面。這個值適於亞洲語系

說明：

設置或檢索對像內文字的流動和方向。
當此屬性值發生變化時，text-align 屬性與 vertical-align 屬性的作用也將發生變化。
對應的腳本特性為 layoutFlow。請參閱我編寫的其他書目。

示例：

div {
	layout-flow: horizontal;
}





writing-mode 版本：IE 5.5+ 專有屬性　繼承性：有

語法：

writing-mode: lr-tb | tb-rl

參數：

lr-tb		//左-右，上-下
tb-rl		//上-下，右-左

說明：

設置或檢索對象的內容塊固有的書寫方向。西方語言確省的是左-右，上-下的書寫方式。
但是亞洲語言常有上-下，右-左的書寫方式。
當此屬性值發生變化時，text-align 屬性與 vertical-align 屬性的作用也將發生變化。
對應的腳本特性為 writingMode。請參閱我編寫的其他書目。

示例：

div {
	writing-mode: tb-rl;
}



direction 版本：CSS2　 相容性：IE5+　繼承性：無

語法：

direction: ltr | rtl | inherit

參數：

ltr		//文字流從左到右
rtl		//文字流從右到左
inherit		//文字流的值不可繼承

說明：

用於設置文字流的方向。
假如您想應用 direction 屬性於內聯文字，您必須設定 unicode-bidi 屬性為 embed 或 bidi-override。
對應的腳本特性為 direction。請參閱我編寫的其他書目。

示例：

div {
	direction: rtl;
	unicode-bidi: bidi-override;
}




unicode-bidi 版本：CSS2　 相容性：IE5+　繼承性：無

語法：

unicode-bidi: normal | bidi-override | embed

參數：

normal		對像不打開附加的嵌入層，對於內聯要素，隱式重排序跨對像邊界進行工作
embed		對像打開附加的嵌入層，direction 屬性的值指定嵌入層，在對像內部進行隱式重排序
bidi-override	嚴格按照 direction 屬性的值重排序。忽略隱式雙向運算規則

說明：

用於同一個頁面裡存在從不同方向讀進的文字顯示。與 direction 屬性一起使用。
假如您想應用 direction 屬性於內聯文字，您必須設定 unicode-bidi 屬性為 embed 或 bidi-override。
對應的腳本特性為 unicodeBidi。請參閱我編寫的其他書目。

示例：

div {
	direction: rtl;
	unicode-bidi: bidi-override;
}





word-break 版本：IE5+專有屬性　繼承性：無

語法：

word-break: normal | break-all | keep-all

參數：

normal		//依照亞洲語言和非亞洲語言的文字規則，允許在字內換行
break-all	//該行為與亞洲語言的 normal 相同。
		//也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字
keep-all	//與所有非亞洲語言的 normal 相同。
		//對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字
 
說明：
 
設置或檢索對像內文字的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用 break-all 。
對應的腳本特性為 wordBreak。請參閱我編寫的其他書目。

示例：

div {
	word-break: break-all;
}





line-break 版本：IE 5+ 專有屬性　繼承性：無

語法：

line-break: normal | strict

參數：

normal		//應用日文文字的預設換行規則
strict		//強制日文文字換行規則的嚴謹性

說明：

設置或檢索用於日文文字的換行規則。
對應的腳本特性為 lineBreak。請參閱我編寫的其他書目。

示例：

div {
	line-break: strict;
}





white-space 版本：CSS1　 相容性：IE5.5+ NS4+　繼承性：有

語法：

white-space: normal | pre | nowrap

參數：

normal		//預設處理方式
pre		//用等寬字體顯示預先格式化的文字。不合並字間的空白距離和進行兩端對齊。
		//參閱 pre 對像
nowrap		//強制在同一行內顯示所有文字，直到文字結束或者遭遇 br 對象。
		//參閱 td，div 等對象的 nowrap 屬性（特性）

說明：

設置或檢索對像內空格的處理方式。
對應的腳本特性為 whiteSpace。請參閱我編寫的其他書目。

示例：

p {
	white-space: nowrap;
}




word-wrap 版本：IE 5.5+ 專有屬性　繼承性：有

語法：

word-wrap: normal | break-word

參數：

normal		//允許內容頂開指定的容器邊界
break-word	//內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生

說明：

設置或檢索當當前行超過指定容器的邊界時是否斷開轉行。
對應的腳本特性為 wordWrap。請參閱我編寫的其他書目。

示例：

div {
	word-wrap: break-word;
}




text-autospace 版本：IE 5+ 專有屬性　繼承性：無

語法：

text-autospace: none | ideograph-alpha
ideograph-numeric | ideograph-parenthesis | ideograph-space

參數：

none			//無調整發生
ideograph-alpha		//表意字和非表意字（如 Latin
			//-based，Greek，Cyrillic，Arabic，Hebrew 文字）之間創建額外空格
ideograph-numeric	//在表意字和數字字元之間創建額外空格
ideograph-parenthesis	//在一般（非寬度）插入語和表意字之間創建額外空格
ideograph-space		//當空格相鄰表意字元時，擴展空格的寬度

說明：

設置或檢索對像文字的自動空格和緊縮空格寬度調整的方式。
表意字是東亞編寫系統中的字元，表示一個概念或方法，但不是一個特定的字或詞。
對應的腳本特性為 textAutospace。請參閱我編寫的其他書目。






text-kashida-space 版本：IE 5.5+ 專有屬性　繼承性：有

語法：

text-kashida-space: length

參數：

length		//百分比。
		//標示 kashida 膨脹與空格膨脹的比例。
		//為 100%，僅有 kashida 膨脹。為 0%，僅有空格膨脹。缺省值為 0%

說明：

設置或檢索如何拉伸字元來調節文字行排列。它可以和 text-justify 屬性一起使用。
對應的腳本特性為 textKashidaSpace。請參閱我編寫的其他書目。

示例：

div {
	text-kashida-space: 50%;
}




text-justify 版本：IE 5+ 專有屬性　繼承性：無

語法：

text-justify: auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph

參數：

auto			//允許瀏覽器用戶代理確定使用的左右對齊法則
inter-word		//通過增加字之間的空格對齊文字。該行為是對齊所有文字行最快的方法。
			//它的左右對齊行為對段落的最後一行無效
newspaper		//通過增加或減少字或字母之間的空格對齊文字。是用於拉丁文字母表左右對齊的最精確格式
distribute		//處理空格很像 newspaper，適用於東亞文檔。尤其是泰國
distribute-all-lines	//左右對齊行的方式與 distribute 相同，也同樣不包含兩段對齊段落的最後一行。
			//適用於表意字文檔
inter-ideograph		//為表意字文字提供完全左右對齊。他增加或減少表意字和詞間的空格

說明：

設置或檢索對像內文字的對齊方式。
對應的腳本特性為 textJustify。請參閱我編寫的其他書目。

示例：

div {
	text-justify: auto;
}




ruby-align 版本：IE 5+ 專有屬性　繼承性：無

語法：

ruby-align: auto | left | center | right | distribute-letter | distribute-space | line-edge

參數：

auto			//由瀏覽器確定對齊方式。
			//對於 ideographic（東亞文字）以 distribute-space 值對齊。
			//對於 Latin 文字以 center 值對齊
left			//根據基本寬度靠左對齊
center			//根據基本寬度置中對齊。
			//如果基本寬度小於 ruby 文字的寬度，那麼在 ruby 文字的寬度中置中基本寬度
right			//根據基本寬度靠右對齊
distribute-letter	//如果 ruby 文字的寬度小於基本寬度，則 ruby 文字在基本寬度中均勻分佈。
			//如果 ruby 文字的寬度大於或等於基本寬度，置中對齊
distribute-space	//如果 ruby 文字的寬度小於基本寬度，則 ruby 文字在基本寬度中均勻分佈。
			//在 ruby 文字中，在第一個字元的前面後最後字元的後面有半個字距的空白區域。
			//如果 ruby 文字的寬度大於或等於基本寬度，置中對齊
line-edge		//如果 ruby 文字不相鄰行邊緣，則其被置中。否則 ruby 文字行在基本文字邊的上方

說明：

設置或檢索通過 rt 對像指定的註釋文字或發音指南（參考 ruby 對像）的對齊位置。
ruby 對象及 rt 對像請參閱我的其他著作。
對應的腳本特性為 rubyAlign。請參閱我編寫的其他書目。

示例：

ruby {
	ruby-align: right;
}



ruby-position 版本：IE 5+ 專有屬性　繼承性：無

語法：

ruby-position: above | inline

參數：

above		//在基本文字上方定位 ruby 文字
inline		//ruby 文字與基本文字內聯

說明：

設置或檢索通過 rt 對像指定的註釋文字或發音指南（參考 ruby 對像）的位置。
ruby 對象及 rt 對像請參閱我的其他著作。
對應的腳本特性為 rubyPosition。請參閱我編寫的其他書目。

示例：

ruby {
	ruby-position: above;
}



ruby-overhang 版本：IE 5+ 專有屬性　繼承性：無

語法：

ruby-overhang: auto | whitespace | none

參數：

auto		//ruby 文字突出相鄰基本文字的任何其他文字
whitespace	//ruby 文字只突出空白區域的字元
none		//ruby 文字只突出相鄰基本文字的任何其他文字

說明：

設置或檢索通過 rt 對像指定的註釋文字或發音指南（參考 ruby 對像）的位置。
ruby 對象及 rt 對像請參閱我的其他著作。
對應的腳本特性為 rubyOverhang。請參閱我編寫的其他書目。

示例：

ruby {
	ruby-overhang: auto;
}



ime-mode 版本：IE 5+ 專有屬性　繼承性：無

語法：

ime-mode: auto | active | inactive | disabled

參數：

auto		//不影響 IME 的狀態。與不指定 ime-mode 屬性時相同
active		//指定所有使用 IME 輸入的字元。即啟動本地語言輸入法。用戶仍可以撤銷啟動 IME
inactive	//指定所有不使用 IME 輸入的字元。即啟動非本地語言。用戶仍可以撤銷啟動 IME
disabled	//完全禁用 IME。對於有焦點的控件（如輸入框），用戶不可以啟動 IME

說明：

設置或檢索是否允許用戶啟動輸入中文，韓文，日文等的輸入法（IME）狀態。
對應的腳本特性為 imeMode。請參閱我編寫的其他書目。

示例：






layout-grid 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid: layout-grid-mode || layout-grid-type || layout-grid-line
layout-grid-char || layout-grid-char-spacing

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

設置或檢索復合文檔中指定文字字元版式的網格特性。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGrid。請參閱我編寫的其他書目。

示例：

div {
	layout-grid: char line 12px 12px 5px;
}




layout-grid-char 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid-char: none | auto | length

參數：

none		//不指定行網格值
auto		//在對像文字中按最大字元確定網格
length		//百分比 | 由浮點數字和單位標識符號組成的長度值
		//其百分比取值是基於父對像尺寸。請參閱長度單位

說明：

設置或檢索應用於對像文字的字元網格值。
要實現此屬性，layout-grid-mode 必須設置為 char 或 both。
其視覺效果類似於 line-height 屬性。只應用於塊對像（如 div）。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGridChar。請參閱我編寫的其他書目。

示例：

div {
	layout-grid-char: auto;
}




layout-grid-char-spacing 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid-char-spacing: auto | length

參數：

auto		//在對像文字中按最大字元確定網格
length		//百分比 | 由浮點數字和單位標識符號組成的長度值
		//其百分比取值是基於父對像尺寸。請參閱長度單位

說明：

設置或檢索字元間隔。
要實現此屬性，layout-grid-mode 必須設置為 char 或 both。layout-grid-type 必須設置為 loose。
其視覺效果類似於 line-height 屬性。只應用於塊對像（如 div）。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGridCharSpacing。請參閱我編寫的其他書目。

示例：

div {
	layout-grid-char-spacing: auto;
}





layout-grid-line 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid-line: none | auto | length

參數：

none		//不指定行網格值
auto		//在對像文字中按最大字元確定網格
length		//百分比 | 由浮點數字和單位標識符號組成的長度值
		//其百分比取值是基於父對像尺寸。請參閱長度單位

說明：

設置或檢索應用於對像文字的行網格值。
要實現此屬性，layout-grid-mode 必須設置為 line 或 both。
其視覺效果類似於 line-height 屬性。只應用於塊對像（如 div）。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGridLine。請參閱我編寫的其他書目。

示例：

div {
	layout-grid-line: auto;
}




layout-grid-mode 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid-mode: both | line | char | none

參數：

both		//指定 char 和 line 都被啟用。
		//要在一個對像上完全啟用網格版式，此值是必須的
line		//指定只使用行網格。建議與內聯對像（如 span）一起使用
char		//指定只使用字元網格。建議和塊對像（如 div）一起使用
none		//不使用網格

說明：

設置或檢索文字網格版式是否使用二維。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGridMode。請參閱我編寫的其他書目。

示例：

div {
	layout-grid-mode: char;
}



layout-grid-type 版本：IE 5+ 專有屬性　繼承性：有

語法：

layout-grid-type: loose | strict | fixed

參數：

loose		//指定在中文或韓文中使用網格的文字，只有象形文字，假名，寬字元域網格對齊。
		//其餘的和通常一樣，儘管包含這些字元的文字範圍的 layout-grid-mode 被設置為 none 或 line。
		//該模式還禁用通常用於對像文字的特殊文字對齊和字元寬度調整。
		//最後，如果不能再換行邊界的文字中找到一個換行機會
		//那麼文字將被推至下一行，並且上一行的最後留出空白
strict		//指定在日文中使用網格。規則為：如果沒有其他的寬度調整效果
		//則增加寬字元以獲取精確的網格填充。窄字元（除了草書字體）按照應用於寬字元的一半增量增加
fixed		//指定使用於等寬版式網格。
		//規則為：所有非草書符號視為等寬。
		//預設情況下，每個字元在單一網格中置中。禁止對齊或任何其他改變字元寬度的行為

說明：

設置或檢索應用於對像文字的網格類型。
只應用於塊對像（如 div）。
以東亞語言（如中文，日文）編寫的文檔通常根據一維或二維網格使用字元的頁面版式。
對應的腳本特性為 layoutGridType。請參閱我編寫的其他書目。

示例：

div {
	layout-grid-type: strict;
}










背景類相關


background 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

background:
background-color || background-image || background-repeat
background-attachment || background-position

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

如使用該複合屬性定義其單個參數，則其他參數的預設值將無條件覆蓋各自對應的單個屬性設置。
預設值為：transparent none repeat scroll 0% 0%。
儘管該屬性不可繼承，但如果未指定，其父對象的背景顏色和背景圖將在對像下面顯示。
對應的腳本特性為 background。請參閱我編寫的其他書目。

示例：

div {
	background: red no-repeat scroll 5% 60%;
}
body {
	background: url("images/aardvark.gif") repeat-y;
}
pre {
	background: url("images/aardvark.gif") top;
}
caption {
	background: fuchsia;
}




background-attachment 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

background-attachment: scroll | fixed

參數：

scroll		//背景圖片是隨對像內容滾動
fixed		//背景圖片固定

說明：

設置或檢索背景圖片是隨對像內容滾動還是固定的。
對應的腳本特性為 backgroundAttachment。請參閱我編寫的其他書目。

示例：

html {
	background-image: url("anasazi.tif");
	background-attachment: fixed;
}



background-color 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

background-color: transparent | color

參數：

transparent		/背景色透明
color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索對象的背景顏色。
對應的腳本特性為 backgroundColor。請參閱我編寫的其他書目。

示例：

p {
	background-color: silver;
}
div {
	background-color: rgb(223,71,177)
}
body {
	background-color: #98AB6F
}
pre {
	background-color: transparent;
}





background-image 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

background-image: none | url (url)

參數：

none		//無背景圖
url		//使用絕對或相對位址指定背景圖片

說明：

設置或檢索對象的背景圖片。
對應的腳本特性為 backgroundImage。請參閱我編寫的其他書目。

示例：

code {
	background-image: url("comet.jpg");
}
blockquote {
	background-image: url("c:\InetPub\MyPixs\comet.jpg");
}
br {
	background-image: url(http://Fred.com/ImageFile/Q.gif);
}
body {
	background-image: none;
}





background-position 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

background-position: length || length
background-position: position || position

參數：

length		//百分比 | 由浮點數字和單位標識符號組成的長度值。請參閱長度單位
position: 　top | center | bottom | left | center | right

說明：

設置或檢索對象的背景圖片位置。必須先指定 background-image 屬性。
預設值為：(0% 0%)。
如果只指定了一個值，該值將用於橫坐標。縱坐標將預設為 50%。第二個值將用於縱坐標。
該屬性定位不受對象的補丁屬性 (padding) 設置影響。
對應的腳本特性為 backgroundPosition。請參閱我編寫的其他書目。

示例：

div {
	background: url("images/aardvark.gif");
	background-position: 35% 80%;
}
menu {
	background: url("images/aardvark.gif");
	background-position: 35% 2.5cm;
}
a {
	background: url("images/aardvark.gif");
	background-position: 3.25in;
}
body {
	background: url("images/aardvark.gif");
	background-position: top right;
}






background-positionX 版本：IE5.5+專有屬性　繼承性：無

語法：

background-positionX: length | left | center | right

參數：

length		//百分比 | 由浮點數字和單位標識符號組成的長度值。
		//請參閱長度單位
left		//靠左
center		//置中
right		//靠右

說明：

設置或檢索對象的背景圖片橫坐標位置。
必須先指定 background-image 屬性。預設值為：0%。
該屬性定位不受對象的補丁屬性 (padding) 設置影響。
對應的腳本特性為 backgroundPositionX。請參閱我編寫的其他書目。

示例：

p {
	background-image: url("images/aardvark.gif");
	background-positionX: 35%;
	background-repeat: no-repeat;
}





background-repeat 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

參數：

repeat		//背景圖片全部填滿
no-repeat	//背景圖片不重複
repeat-x	//背景圖片往 x 軸上填滿
repeat-y	//背景圖片往 y 軸上填滿

說明：

設置或檢索對象的背景圖片是否及如何鋪排。
必須先指定對象的背景圖片。
對應的腳本特性為 backgroundRepeat。請參閱我編寫的其他書目。
 
示例：
 
menu {
	background: url("images/aardvark.gif");
	background-repeat: repeat-y;
}
p {
	background: url("images/aardvark.gif");
	background-repeat: no-repeat;
}




layer-background-color 版本：NS4+專有屬性　繼承性：無

語法：

layer-background-color: transparent | color

參數：

transparent		//背景色透明
color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索對像整個區域的背景顏色。

示例：

div {
	layer-background-color: transparent;
}




layer-background-image 版本：NS4+專有屬性　繼承性：無

語法：

layer-background-image: none | url (url)

參數：

none		//無背景圖
url		//使用絕對或相對位址指定背景圖像

說明：

設置或檢索對像整個區域的背景圖像。

示例：

code {
	position: absolute;
	top: 100px;
	left: 300px;
	width: 200px;
	border: thin solid black;
	background-image: url("comet.jpg");
	layer-background-image: url("bb_comet.jpg");
}








 




定位類相關


position版本：CSS2　 相容性：IE4+ NS4+　繼承性：無

語法：

position: static | absolute | fixed | relative

參數：

static		//無特殊定位，對像遵循 HTML 定位規則
absolute	//將對像從文檔流中拖出，使用 left，right，top，bottom 等屬性進行絕對定位。
		//而其層疊通過 z-index 屬性定義。此時對像不具有邊距，但仍有補白和邊框
relative	//對像不可層疊，但將依據 left，right，top，bottom 等屬性在正常文檔流中偏移位置
fixed		//IE5.5 及 NS6 尚不支援此屬性

說明：

檢索對象的定位方式。
對應的腳本特性為 position。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	bottom: 1in; 
	left: 1in;
	right: 1in;
	top: 1in;
}
div {
	position: relative;
	top: -3px;
	left: 6px;
}




z-index 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

z-index : auto | number

參數：

auto		//遵從其父對象的定位
number		//無單位的整數值。可為負數

說明：

檢索或設置對象的層疊順序。
如兩個絕對定位對象的此屬性具有同樣的值，那麼將依據它們在 HTML 文檔中聲明的順序層疊
對應的腳本特性為 zIndex。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	z-index: 3;
	width: 6px;
}



top 版本：CSS2　 相容性：IE4+ NS4+　繼承性：無

語法：

top: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值，或者百分比。
		//必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。
		//請參閱長度單位

說明：

檢索或設置對象與其最近一個定位的父對像頂端相關的位置。
對應的腳本特性為 top。
其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posTop，pixelTop，以及對象的 offsetTop 等特性。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	top: 1in;
}
div {
	position: relative;
	top: -3px;
	left: 6px;
}




right 版本：CSS2　 相容性：IE5+　繼承性：無

語法：

right: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。
		//請參閱長度單位

說明：

檢索或設置對象與其最近一個定位的父對像右邊相關的位置。
對應的腳本特性為 right。
其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posRight，pixelRight 等特性。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	right: 1in;
}
div {
	position: relative;
	top: -3px;
	right: 6px;
}




bottom 版本：CSS2　 相容性：IE5+　繼承性：無

語法：

bottom: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值 | 百分比。
		//必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。
		//請參閱長度單位

說明：

檢索或設置對象與其最近一個定位的父對像底邊相關的位置。
對應的腳本特性為 bottom。
其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posBottom，pixelBottom 等運行時特性。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	bottom: 1in;
}
div {
	position: relative;
	bottom: 6px;
}





left 版本：CSS2　 相容性：IE4+ NS4+　繼承性：無

語法：

left: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值 | 百分比。
		//必須定義 position 屬性值為 absolute 或者 relative 此取值方可生效。
		//請參閱長度單位

說明：

檢索或設置對象與其最近一個定位的父對像左邊相關的位置。
對應的腳本特性為 left。
其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posLeft，pixelLeft，以及對象的 offsetLeft 等特性。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	left: 1in;
}
div {
	position: relative;
	top: -3px;
	left: 6px;
}







尺寸類相關



height 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

height: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值 | 百分比。
		//百分比是基於父對象的高度。不可為負數。請參閱長度單位

說明：

檢索或設置對象的高度。
對於 img 對像來說，僅指定此屬性，其 width 值將根據圖片源尺寸等比例縮放。
對應的腳本特性為 height。
其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posHeight，pixelHeight，以及對象的 offsetHeight 等特性。
請參閱我編寫的其他書目。
按照樣式表的規則，對象的實際高度為其下列屬性值之和：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
而在 IE6 以前的版本，對象的實際高度卻等於：
margin-top + height + margin-bottom
在 IE6 中，已經提供了針對此問題的解決方案。而上述屬性的相互關係，請參看圖例。

示例：

div {
	height: 1in;
}
div {
	position: absolute;
	top: -3px;
	height: 6px;
}





max-height 版本：CSS2　 相容性：NONE　繼承性：無

語法：

max-height: none | length

參數：

none		//無最大高度限制
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//不可為負數。請參閱長度單位

說明：

設置或檢索對象的最大高度。
如果 max-height 屬性的值小於 min-height 屬性的值，將會被自動轉設為 min-height 屬性的值。 
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 maxHeight。請參閱我編寫的其他書目。

示例：

p {
	max-height: 200%;
}




min-height 版本：CSS2　 相容性：IE6+　繼承性：無

語法：

min-height: none | length

參數：

none		//無最小高度限制
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//不可為負數。請參閱長度單位

說明：

設置或檢索對象的最小高度。
如果 min-height 屬性的值大於 max-height 屬性的值，將會被自動轉設為 max-height 屬性的值。 
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 minHeight。請參閱我編寫的其他書目。

示例：

p {
	min-height: 200px;
}





width 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

width: auto | length

參數：

auto		//無特殊定位，根據 HTML 定位規則載文檔流中分配
length		//由浮點數字和單位標識符號組成的長度值，或者百分比。
		//百分比是基於父對象的寬度。不可為負數。請參閱長度單位

說明：

檢索或設置對象的寬度。
對於 img 對像來說，僅指定此屬性，其 height 值將根據圖片源大小等比例縮放。
對應的腳本特性為 width。其值為一字串，所以不可用於腳本 (Scripts) 中的計算。
請使用 style 對象的 posWidth，pixelWidth，以及對象的 offsetWidth 等特性。請參閱我編寫的其他書目。
按照樣式表的規則，對象的實際寬度為其下列屬性值之和：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
而在 IE6 以前的版本，對象的實際寬度卻等於：
margin-left + width + margin-right
在 IE6 中，已經提供了針對此問題的解決方案。而上述屬性的相互關係，請參看圖例。

示例：

div {
	width: 1in;
}
div {
	position: absolute;
	top: -3px;
	width: 6px;
}



max-width 版本：CSS2　 相容性：NONE　繼承性：無

語法：

max-width: none | length

參數：

none		//無最大寬度限制
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//不可為負數。請參閱長度單位

說明：

設置或檢索對象的最大寬度。
如果 max-width 屬性的值小於 min-width 屬性的值，將會被自動轉設為 min-width 屬性的值。 
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 maxWidth。請參閱我編寫的其他書目。

示例：

p {
	max-width: 200%;
}




min-width 版本：CSS2　 相容性：NONE　繼承性：無

語法：

min-width: none | length

參數：

none		//無最小寬度限制
length		//由浮點數字和單位標識符號組成的長度值，或者百分比。
		//不可為負數。請參閱長度單位

說明：

設置或檢索對象的最小寬度。
如果 min-width 屬性的值大於 max-width 屬性的值，將會被自動轉設為 max-width 屬性的值。 
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 minWidth。請參閱我編寫的其他書目。

示例：

p {
	min-width: 200px;
}




區塊布局類相關


clear 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

clear: none | left |right | both

參數：

none		//允許兩邊都可以有浮動對像
both		//不允許有浮動對像
left		//不允許左邊有浮動對像
right		//不允許右邊有浮動對像

說明：

該屬性的值指出了不允許有浮動對象的邊。請參閱 float 屬性。
對應的腳本特性為 clear。請參閱我編寫的其他書目。

示例：

div {
	clear: left
}
img {
	float: right
}





float 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

float: none | left |right

參數：

none		//對像不浮動
left		//對像浮在左邊
right		//對像浮在右邊

說明：

設定浮動元件的接續位置。
該屬性的值指出了對象是否及如何浮動。請參閱 clear 屬性。
當該屬性不等於 none 引起對像浮動時，對像將被視作塊對像 (block-level)
即 display 屬性等於 block。也就是說，浮動對象的 display 特性將被忽略。
對應的腳本特性為 styleFloat。請參閱我編寫的其他書目。

示例：

div {
	clear: left
}
img {
	float: right
}




clip 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

clip: auto | rect ( number number number number )

參數：

auto					//對像無剪切
rect ( number number number number )	//依據上-右-下-左的順序提供自對像左上角為 (0,0)
					//坐標計算的四個偏移數值
					//其中任一數值都可用 auto 替換，即此邊不剪切

說明：

檢索或設置對象的可視區域。區域外的部分是透明的。
必須將 position 的值設為 absolute，此屬性方可使用。
自 IE5 開始，此屬性在 MAC 平台上可用。
對應的腳本特性為 clip。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	width: 60px;
	height: 60px;
	clip: rect(0 20 50 10);
}
div {
	position: absolute;
	width: 60px;
	height: 60px;
	clip: rect(1cm auto 50px 10cm);
}




overflow 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

overflow: visible | auto | hidden | scroll

參數：

visible		//全部顯示，無視區塊大小。
		//假如顯式聲明此預設值，對像將被剪切為包含對象的 window 或 frame 的大小。
		//並且 clip 屬性設置將失效
auto		//此為 body 對像和 textarea 的預設值。
			//自動設定，當需要時出現卷軸
hidden		//超出區塊的部分不顯示
scroll		//強迫顯示卷軸，即使內部元件並無超出區塊邊界

說明：

設定區塊元件顯示方式。
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
設置 textarea 對像為 hidden 值將隱藏其卷軸。
對於 table 來說，假如 table-layout 屬性設置為 fixed
則 td 對像支援帶有預設值為 hidden 的 overflow 屬性。
如果設為 hidden，scroll 或者 auto，那麼超出 td 尺寸的內容將被剪切。
如果設為 visible，將導致額外的文字溢出到右邊或左邊（視 direction 屬性設置而定）的單元格。
自 IE5 開始，此屬性在 MAC 平台上可用。
對應的腳本特性為 overflow。請參閱我編寫的其他書目。

示例：

body {
	overflow: hidden;
}
div {
	overflow: scroll;
	height: 100px;
	width: 100px;
}





overflow-x 版本：IE4+專有屬性　繼承性：無

語法：

overflow-x: visible | auto | hidden | scroll

參數：

visible		//不剪切內容也不添加卷軸。
		//假如顯式聲明此預設值，對像將被剪切為包含對象的 window 或 frame 的寬度。
		//並且 clip 屬性設置將失效
auto		//此為 body 對像和 textarea 的預設值。在需要時剪切內容並添加卷軸
hidden		//不顯示超過對像寬度的內容
scroll		//總是顯示橫向卷軸

說明：

檢索或設置當對象的內容超過其指定寬度時如何管理內容。
參閱 overflow 屬性。
對應的腳本特性為 overflowX。請參閱我編寫的其他書目。

示例：

body {
	overflow-x: hidden;
}
div {
	overflow-x: scroll;
	height: 100px;
	width: 100px;
}



overflow-y 版本：IE4+專有屬性　繼承性：無

語法：

overflow-y: visible | auto | hidden | scroll

參數：

visible		//不剪切內容也不添加卷軸。
		//假如顯式聲明此預設值，對像將被剪切為包含對象的 window 或 frame 的高度。
		//並且 clip 屬性設置將失效
auto		//此為 body 對像和 textarea 的預設值。在需要時剪切內容並添加卷軸
hidden		//不顯示超過對像高度的內容
scroll		//總是顯示縱向卷軸

說明：

檢索或設置當對象的內容超過其指定高度時如何管理內容。
參閱 overflow 屬性。
對應的腳本特性為 overflowY。請參閱我編寫的其他書目。

示例：

body {
	overflow-y: hidden;
}
div {
	overflow-y: scroll;
	height: 100px;
	width: 100px;
}





display 版本：CSS1/CSS2　 相容性：IE4+ NS4+　繼承性：無

語法：

display: block | none | inline | compact | marker | inline-table | list-item
run-in | table |table-caption | table-cell | table-column | table-column-group
table-footer-group | table-header-group | table-row | table-row-group

參數：

block			//CSS1　塊對象的預設值。用該值為對像之後添加新行
none			//CSS1　隱藏對象。與 visibility 屬性的 hidden 值不同
			//其不為被隱藏的對象保留其物理空間
inline			//CSS1　內聯對象的預設值。用該值將從對像中刪除行
compact			//CSS2　分配對像為塊對像或基於內容之上的內聯對像
marker			//CSS2　指定內容在容器對像之前或之後。
			//要使用此參數，對像必須和 : after 及 : before 偽元素一起使用
inline-table		//CSS2　將表格顯示為無前後換行的內聯對像或內聯容器
list-item		//CSS1　將塊對像指定為列表項目。並可以添加可選項目標誌
run-in			//CSS2　分配對像為塊對像或基於內容之上的內聯對像
table			//CSS2　將對像作為塊元素級的表格顯示
table-caption		//CSS2　將對像作為表格標題顯示
table-cell		//CSS2　將對像作為表格單元格顯示
table-column		//CSS2　將對像作為表格列顯示
table-column-group	//CSS2　將對像作為表格列組顯示
table-header-group	//CSS2　將對像作為表格標題組顯示
table-footer-group	//CSS2　將對像作為表格腳注組顯示
table-row		//CSS2　將對像作為表格行顯示
table-row-group		//CSS2　將對像作為表格行組顯示

說明：

設置或檢索對象是否及如何顯示。
目前 IE5.5 僅支援以上 CSS1 的參數。
對應的腳本特性為 display。請參閱我編寫的其他書目。

示例：

img {
	disply: block;
	float: right;
}



visibility 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

visibility: inherit | visible | collapse | hidden

參數：

inherit		//繼承上一個父對象的可見性
visible		//對象可視
hidden		//對像隱藏
collapse	//主要用來隱藏表格的行或列。
		//隱藏的行或列能夠被其他內容使用。
		//對於表格外的其他對象，其作用等同於 hidden。
		//IE5.5 尚不支援此屬性。

說明：

設置或檢索是否顯示對象。
與 display 屬性不同，此屬性為隱藏的對象保留其佔據的物理空間。
如果希望對像為可視，其父對象也必須是可視的。
對應的腳本特性為 visibility。請參閱我編寫的其他書目。像

示例：

img {
	visibility: inherit;
	float: right;
}





外部邊距類相關



margin 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

margin: auto | length

參數：

auto		//值被設置為相對邊的值
length		//由浮點數字和單位標識符號組成的長度值 | 百分比。
		//百分比是基於父對象的高度。
		//對於內聯對像來說，左右外延邊距可以是負數值。
		//請參閱長度單位

說明：

檢索或設置對像四邊的外延邊距。
如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
在 IE4+，margin 屬性不可用於 td 和 tr 對象。
外延邊距始終透明。
對應的腳本特性為 margin。請參閱我編寫的其他書目。
關於對象的尺寸與邊框，內外部邊距等樣式表屬性的關係，請參看圖例以及 height 和 width 屬性。

示例：

body {
	margin: 36pt 24pt 36pt;
}
body {
	margin: 11.5%;
}
body {
	margin: 10% 10% 10% 10%;
}





margin-top 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

margin-top: auto | length

參數：

auto		//值被設置為相對邊的值
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//百分比是基於父對象的高度。請參閱長度單位

說明：

檢索或設置對像頂邊的外延邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
在 IE4+，margin 屬性不可用於 td 和 tr 對象。
外延邊距始終透明。
對應的腳本特性為 marginTop。請參閱我編寫的其他書目。

示例：

body {
	margin-top: 11.5%;
}




margin-right 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

margin-right: auto | length

參數：

auto		//值被設置為相對邊的值
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//百分比是基於父對象的高度。請參閱長度單位

說明：

檢索或設置對像右邊的外延邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
在 IE4+，margin 屬性不可用於 td 和 tr 對象。
外延邊距始終透明。
對應的腳本特性為 marginRight。請參閱我編寫的其他書目。

示例：

body {
	margin-right: 11.5%;
}





margin-bottom 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

margin-bottom: auto | length

參數：

auto		//值被設置為相對邊的值
length		//由浮點數字和單位標識符號組成的長度值 | 百分比。
		//百分比是基於父對象的高度。請參閱長度單位

說明：

檢索或設置對像底邊的外延邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
在 IE4+，margin 屬性不可用於 td 和 tr 對象。
外延邊距始終透明。
對應的腳本特性為 marginBottom。請參閱我編寫的其他書目。

示例：

body {
	margin-bottom: 11.5%;
}





margin-left 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

margin-left: auto | length

參數：

auto		//值被設置為相對邊的值
length		//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
		//百分比是基於父對象的高度。請參閱長度單位

說明：

檢索或設置對像左邊的外延邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
在 IE4+，margin 屬性不可用於 td 和 tr 對象。
外延邊距始終透明。
對應的腳本特性為 marginLeft。請參閱我編寫的其他書目。

示例：

body {
	margin-left: 11.5%;
}






輪廓類相關


outline 版本：CSS2　 相容性：NONE　繼承性：無

語法：

outline: outline-color ||outline-style || outline-width

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

設置或檢索對像外的線條輪廓。
outline 畫在 border 外面，並且不一定是矩形。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 outline。請參閱我編寫的其他書目。

示例：

img {
	outline: red
}
p {
	outline: double 5px
}
button {
	outline: #E9E9E9 double thin
}




outline-color 版本：CSS2　 相容性：NONE　繼承性：無

語法：

outline-color: color |invert

參數：

color		//指定顏色。請參閱顏色單位和附錄：色碼表
invert		//使用背景色的反色

說明：

設置或檢索對像外的線條輪廓的顏色。參見 outline 屬性。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 outlineColor。請參閱我編寫的其他書目。

示例：

img {
	outline-color: red
}
p {
	outline-color: #E9E9E9
}





outline-style 版本：CSS2　 相容性：NONE　繼承性：無

語法：

outline-style: none |dotted |dashed |solid |double |groove |ridge |inset |outset

參數：

none		//無邊框。與任何指定的 outline-width 值無關
dotted		//點線邊框
dashed		//虛線邊框
solid		//實線邊框
double		//雙線邊框。兩條單線與其間隔的和等於指定的 oueline-width 值
groove		//根據 outline-color 的值畫 3D 凹槽
ridge		//根據 outline-color 的值畫菱形邊框
inset		//根據 outline-color 的值畫 3D 凹邊
outset		//根據 outline-color 的值畫 3D 凸邊

說明：

設置或檢索對像外的線條輪廓的樣式。參見 outline 屬性。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 outlineStyle。請參閱我編寫的其他書目。

示例：

img {
	outline-color: orange;
	outline-style: solid;
	outline-width: medium;
}





outline-width 版本：CSS2　 相容性：NONE　繼承性：無

語法：

outline-width: medium | thin | thick | length

參數：

medium		//預設寬度
thin		//小於預設寬度
thick		//大於預設寬度
length		//由浮點數字和單位標識符號組成的長度值。
		//不可為負值。請參閱長度單位

說明：

設置或檢索對像外的線條輪廓的寬度。參見 outline 屬性。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 outlineWidth。請參閱我編寫的其他書目。

示例：

img {
	outline-color: orange;
	outline-style: solid;
	outline-width: medium;
}





邊框類相關



border 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：
 
border: border-width || border-style || border-color

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

如使用該複合屬性定義其單個參數，則其他參數的預設值將無條件覆蓋各自對應的單個屬性設置。
預設值為：medium none。border-color 的預設值將採用文字顏色。
要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
對應的腳本特性為 border。請參閱我編寫的其他書目。像
關於對象的尺寸與邊框，內外部邊距等樣式表屬性的關係，請參看圖例以及 height 和 width 屬性。

示例：

p {
	border: thick double yellow;
}
blockquote {
	border: dotted gray;
}
p {
	border: 25px;
}



border-color 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

border-color: color

參數：

color		//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 等於 0 或 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderColor。請參閱我編寫的其他書目。

示例：

body {
	border-color: silver;red;
} 
body {
	border-color: silver red RGB(223, 94, 77);
}
body {
	border-color: silver red RGB(223, 94, 77) black;
}









border-style 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

參數：

none			//無邊框。與任何指定的 border-width 值無關
hidden			//隱藏邊框。IE 不支援
dotted			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為點線。否則為實線
dashed			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為虛線。否則為實線
solid			//實線邊框
double			//雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值
groove			//根據 border-color 的值畫 3D 凹槽
ridge			//根據 border-color  的值畫菱形邊框
inset			//根據 border-color 的值畫 3D 凹邊
outset			//根據 border-color 的值畫 3D 凸邊

說明：

如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 不大於 0，本屬性將失去作用。
對應的腳本特性為 borderStyle。請參閱我編寫的其他書目。

示例：
 
body {
	border-style: double groove;
}
body {
	border-style: double groove dashed;
}







border-width 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-width: medium | thin | thick | length

參數：

medium			//預設寬度
thin			//小於預設寬度
thick			//大於預設寬度
length			//由浮點數字和單位標識符號組成的長度值。
			//不可為負值。請參閱長度單位

說明：

如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderWidth。請參閱我編寫的其他書目。

示例：

span {
	border-style: solid;
	border-width: thin;
} 
span {
	border-style: solid;
	border-width: 1px thin;
}







border-top 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

border-top: border-width || border-style || border-color

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

請參閱 border 屬性。
對應的腳本特性為 borderTop。請參閱我編寫的其他書目。

示例：

div {
	border-bottom: 25px solid red;
	border-left: 25px solid yellow;
	border-right: 25px solid blue;
	border-top: 25px solid green;
}







border-top-color 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

border-top-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 等於 0 或 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderTopColor。請參閱我編寫的其他書目。

示例：

div {
	border-top-color: red;
	border-bottom-color: RGB(223, 94, 77);
	border-right-color: red;
	border-left-color: black;
}






border-top-style 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

參數：

none			//無邊框。與任何指定的 border-width 值無關
hidden			//隱藏邊框。IE 不支援
dotted			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為點線。否則為實線
dashed			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為虛線。否則為實線
solid			//實線邊框
double			//雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值
groove			//根據 border-color 的值畫 3D 凹槽
ridge			//根據 border-color 的值畫菱形邊框
inset			//根據 border-color 的值畫 3D 凹邊
outset			//根據 border-color 的值畫 3D 凸邊

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 不大於 0，本屬性將失去作用。
對應的腳本特性為 borderTopStyle。請參閱我編寫的其他書目。

示例：

body {
	border-top-style: double;
	border-bottom-style: groove;
	border-left-style: dashed;
	border-right-style: dotted;
}





border-top-width 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-top-width: medium | thin | thick | length

參數：

medium			//預設寬度
thin			//小於預設寬度
thick			//大於預設寬度
length			//由浮點數字和單位標識符號組成的長度值。
			//不可為負值。請參閱長度單位

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderTopWidth。請參閱我編寫的其他書目。

示例：

span {
	border-top-width: thin;
	border-top-style: solid;
}
span {
	border-bottom-width: thin;
	border-bottom-style: solid;
}
span {
	border-left-width: thin;
	border-left-style: solid;
}
span {
	border-right-width: thin;
	border-right-style: solid;
}






border-right 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

border-right: border-width || border-style || border-color

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

請參閱 border 屬性。
對應的腳本特性為 borderRight。請參閱我編寫的其他書目。

示例：

div {
	border-bottom: 25px solid red;
	border-left: 25px solid yellow;
	border-right: 25px solid blue;
	border-top: 25px solid green;
}






border-right-color 版本：CSS2　 相容性：IE4+ NS6　繼承性：無

語法：

border-right-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 等於 0 或 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderRightColor。請參閱我編寫的其他書目。

示例：

div {
	border-top-color: red;
	border-bottom-color: RGB(223, 94, 77);
	border-right-color: red;
	border-left-color: black;
}





border-right-style 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

參數：

none			//無邊框。與任何指定的 border-width 值無關
hidden			//隱藏邊框。IE 不支援
dotted			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為點線。否則為實線
dashed			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為虛線。否則為實線
solid			//實線邊框
double			//雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值
groove			//根據 border-color 的值畫 3D 凹槽
ridge			//根據 border-color 的值畫菱形邊框
inset			//根據 border-color 的值畫 3D 凹邊
outset			//根據 border-color 的值畫 3D 凸邊
 
說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 不大於 0，本屬性將失去作用。
對應的腳本特性為 borderRightStyle。請參閱我編寫的其他書目。

示例：

body {
	border-top-style: double;
	border-bottom-style: groove;
	border-left-style: dashed;
	border-right-style: dotted;
}





border-right-width 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-right-width: medium | thin | thick | length

參數：

medium			//預設寬度
thin			//小於預設寬度
thick			//大於預設寬度
length			//由浮點數字和單位標識符號組成的長度值。
			//不可為負值。請參閱長度單位

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderRightWidth。請參閱我編寫的其他書目。

示例：

span {
	border-top-width: thin;
	border-top-style: solid;
}
span {
	border-bottom-width: thin;
	border-bottom-style: solid;
} 
span {
	border-left-width: thin;
	border-left-style: solid;
}
span {
	border-right-width: thin;
	border-right-style: solid;
}







border-bottom-color 版本：CSS2　 相容性：IE4+ NS6　繼承性：無

語法：

border-bottom-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 等於 0 或 border-style 設置為 none，本屬性將失去作用。

示例：

div {
	border-top-color: red;
	border-bottom-color: RGB(223, 94, 77);
	border-right-color: red;
	border-left-color: black;
}






border-bottom-style 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

參數：

none			//無邊框。與任何指定的 border-width 值無關
hidden			//隱藏邊框。IE 不支援
dotted			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為點線。否則為實線
dashed			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為虛線。否則為實線
solid			//實線邊框
double			//雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值
groove			//根據 border-color 的值畫 3D 凹槽
ridge			//根據 border-color 的值畫菱形邊框
inset			//根據 border-color 的值畫 3D 凹邊
outset			//根據 border-color 的值畫 3D 凸邊

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 不大於 0，本屬性將失去作用。
對應的腳本特性為 borderBottomStyle。請參閱我編寫的其他書目。

示例：

body {
	border-top-style: double;
	border-bottom-style: groove;
	border-left-style: dashed;
	border-right-style: dotted;
}





border-bottom-width 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-bottom-width: medium | thin | thick | length

參數：

medium			//預設寬度
thin			//小於預設寬度
thick			//大於預設寬度
length			//由浮點數字和單位標識符號組成的長度值。
			//不可為負值。請參閱長度單位

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderBottomWidth。請參閱我編寫的其他書目。

示例：

span {
	border-top-width: thin;
	border-top-style: solid;
}
span {
	border-bottom-width: thin;
	border-bottom-style: solid;
}
span {
	border-left-width: thin;
	border-left-style: solid;
}
span {
	border-right-width: thin;
	border-right-style: solid;
}






border-left 版本：CSS1　 相容性：IE4+ NS6+　繼承性：無

語法：

border-left: border-width || border-style || border-color

參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

請參閱 border 屬性。
對應的腳本特性為 borderLeft。請參閱我編寫的其他書目。

示例：

div {
	border-bottom: 25px solid red;
	border-left: 25px solid yellow;
	border-right: 25px solid blue;
	border-top: 25px solid green;
}






border-left-color 版本：CSS2　 相容性：IE4+ NS6　繼承性：無

語法：

border-left-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 等於 0 或 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderLeftColor。請參閱我編寫的其他書目。
 
示例：
 
div {
	border-top-color: red;
	border-bottom-color: RGB(223, 94, 77);
	border-right-color: red;
	border-left-color: black;
}






border-left-style 版本：CSS2　 相容性：IE4+ NS6+　繼承性：無

語法：

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

參數：

none			//無邊框。與任何指定的 border-width 值無關
hidden			//隱藏邊框。IE 不支援
dotted			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為點線。否則為實線
dashed			//在 MAC 平台上 IE4+ 與 WINDOWS 和 UNIX 平台上 IE5.5+ 為虛線。否則為實線
solid			//實線邊框
double			//雙線邊框。兩條單線與其間隔的和等於指定的 border-width 值
groove			//根據 border-color 的值畫 3D 凹槽
ridge			//根據 border-color 的值畫菱形邊框
inset			//根據 border-color 的值畫 3D 凹邊
outset			//根據 border-color 的值畫 3D 凸邊

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-width 不大於 0，本屬性將失去作用。
對應的腳本特性為 borderLeftStyle。請參閱我編寫的其他書目。

示例：

body {
	border-top-style: double;
	border-bottom-style: groove;
	border-left-style: dashed;
	border-right-style: dotted;
}





border-left-width 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

border-left-width: medium | thin | thick | length

參數：

medium			//預設寬度
thin			//小於預設寬度
thick			//大於預設寬度
length			//由浮點數字和單位標識符號組成的長度值。
			//不可為負值。請參閱長度單位

說明：

要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
如果 border-style 設置為 none，本屬性將失去作用。
對應的腳本特性為 borderLeftWidth。請參閱我編寫的其他書目。

示例：

span {
	border-top-width: thin;
	border-top-style: solid;
}
span {
	border-bottom-width: thin;
	border-bottom-style: solid;
}
span {
	border-left-width: thin;
	border-left-style: solid;
}
span {
	border-right-width: thin;
	border-right-style: solid;
}









內容類相關


include-source 版本：CSS2　 相容性：NONE　繼承性：無

語法：

include-source: url (url)

參數：
url			//使用絕對或相對位址指定插入文檔。假如該文檔不存在，當前對象的內容將被顯示

說明：

這個屬性插入另一個文檔到當前文檔，取代當前對象的內容。插入文檔的樣式屬性從當前對像繼承。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 includeSource。請參閱我編寫的其他書目。

示例：

div {
	position: absolute;
	top: 100px;
	left: 300px;
	width: 200px;
	height: 200px;
	border: thin solid black;
	include-source: url("http://www.example.com/testpage.htm");
}




quotes 版本：CSS2　 相容性：NONE　繼承性：無

語法：

quotes: none | string

參數：

none			//content 屬性的 open-quote 和 close-quote 值將不會生成任何嵌套標記
string			//用引號括起的嵌套標記定義。兩個為一組。
			//第一個 string 定義前標記（例："<"），
			//第二個 string 定義後標記（例：">"）。
			//組之間用空格格開。嵌套標記的應用深度按定義順序內推

說明：

設置或檢索對像內使用的嵌套標記。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 quotes。請參閱我編寫的其他書目。

示例：

blockquote[lang-=fr] {
	quotes: "\201C" "\201D"
}
blockquote[lang-=en] {
	quotes: "\00AB" "\00BB"
}
blockquote:before {
	content: open-quote
}
blockquote:after {
	content: close-quote
}
q {
	quotes: """ """ "'" "'";
}

This is an emedded quote.
 
顯示結果如下：
 
"This is an 'embedded' quote."







content 版本：CSS2　 相容性：NONE　繼承性：無

語法：

content: attr(alt) | counter(name) | counter(name, list-style-type) | counters(name, string)
counters(name, string, list-style-type) | no-close-quote | no-open-quote | close-quote
open-quote | string | url (url)

參數：

attr(alt)					//使用 alt 特性的文字
counter(name)					//使用已命名的計數器
counter(name, list-style-type)			//使用已命名的計數器並遵從指定的 list-style-type 屬性
counters(name, string)				//使用所有已命名的計數器
counters(name, string, list-style-type)		//使用所有已命名的計數器並遵從指定的 list-style-type 屬性
no-close-quote					//並不插入 quotes 屬性的後標記。但增加其嵌套級別
no-open-quote					//並不插入 quotes 屬性的前標記。但減少其嵌套級別
close-quote					//插入 quotes 屬性的後標記
open-quote					//插入 quotes 屬性的前標記
string						//使用用引號括起的字串
url						//使用指定的絕對或相對位址

說明：

用來和 : after 及 : before 偽元素一起使用，在對像前或後顯示內容。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 content。請參閱我編寫的其他書目。

示例：

p:after {
	content: url("http:www.devguru.com");
	text-decoration: none;
}
p:before {
	content: url("beep.wav")
}





counter-increment 版本：CSS2　 相容性：NONE　繼承性：無

語法：

counter-increment: none | identifier number

參數：

none			//阻止計數器增加
identifier number	//identifier 定義一個將被增加 selector，id，或者 class。
			//number 定義增加的數值。可以為負值。預設值是 1

說明：

設定當一個 selector 發生時計數器增加的值。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 counterIncrement。請參閱我編寫的其他書目。

示例：

p:before {
	content: "paragraph" counter(paragraph);
	counter-increment: paragraph;
}





counter-reset 版本：CSS2　 相容性：NONE　繼承性：無

語法：

counter-reset: none | identifier number

參數：

none			//阻止計數器
identifier number	//指定一個或多個復位的計數器

說明：

將指定 selector 的計數器復位。預設值是 0。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 counterReset。請參閱我編寫的其他書目。

示例：

h1:before {
	counter-increment: main-heading;
	counter-reset: sub-heading;
	content: "Section " counter(main-heading) ":"
}







內部邊距類相關


padding 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

padding: length

參數：

length			//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
			//百分比是基於父對象的寬度。請參閱長度單位

說明：

檢索或設置對像四邊的內部邊距。
如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
不允許負值。
對應的腳本特性為 padding。請參閱我編寫的其他書目。
關於對象的尺寸與邊框，內外部邊距等樣式表屬性的關係，請參看圖例以及 height 和 width 屬性。

示例：

body {
	padding: 36pt 24pt 36pt;
}
body {
	padding: 11.5%;
}
body {
	padding: 10% 10% 10% 10%;
}





padding-top 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

padding-top: length

參數：

length			//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
			//百分比是基於父對象的寬度。請參閱長度單位

說明：

檢索或設置對像頂邊的內部邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
不允許負值。
對應的腳本特性為 paddingTop。請參閱我編寫的其他書目。

示例：

body {
	padding-top: 36pt;
}







padding-right 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

padding-right: length

參數：

length			//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
			//百分比是基於父對象的寬度。請參閱長度單位

說明：

檢索或設置對像右邊的內部邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
不允許負值。
對應的腳本特性為 paddingRight。請參閱我編寫的其他書目。

示例：

body {
	padding-right: 36pt;
}





padding-bottom 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

padding-bottom: length

參數：

length			//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
			//百分比是基於父對象的寬度。請參閱長度單位

說明：

檢索或設置對像底邊的內部邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
不允許負值。
對應的腳本特性為 paddingBottom。請參閱我編寫的其他書目。

示例：

body {
	padding-bottom: 36pt;
}






padding-left 版本：CSS1　 相容性：IE4+ NS4+　繼承性：無

語法：

padding-left: length

參數：

length			//由浮點數字和單位標識符號組成的長度值 | 或者百分比。
			//百分比是基於父對象的寬度。請參閱長度單位

說明：

檢索或設置對像左邊的內部邊距。
內聯對像要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute。
不允許負值。
對應的腳本特性為 paddingLeft。請參閱我編寫的其他書目。

示例：

body {
	padding-left: 36pt;
}










列表項目類相關


list-style 版本：CSS1　 相容性：IE4+ NS4+　繼承性：有

語法：

list-style: list-style-image || list-style-position || list-style-type
 
參數：

該屬性是複合屬性。請參閱各參數對應的屬性。

說明：

設置列表項目相關內容。
對應的腳本特性為 listStyle。請參閱我編寫的其他書目。

示例：

li {
	list-style: url("http://www.dhtmlet.com/devgurupix.gif"), inside, circle;
}
ul {
	list-style: outside, upper-roman;
}
ol {
	list-style: square;
}






list-style-image 版本：CSS1　 相容性：IE4+ NS6+　繼承性：有

語法：

list-style-image: none | url (url)

參數：

none			//不指定圖像
url			//使用絕對或相對位址指定背景圖像

說明：

設置或檢索作為對象的列表項標記的圖像。
若 list-style-image 屬性為 none 或指定圖像不可用時，list-style-type 屬性將發生作用。
對應的腳本特性為 listStyleImage。請參閱我編寫的其他書目。

示例：

ul.out {
	list-style-position: outside;
	list-style-image: url("images/ie.gif");
}







list-style-position 版本：CSS1　 相容性：IE4+ NS6+　繼承性：有

語法：

list-style-position: outside | inside

參數：

outside			//列表項目標記放置在文字以外，且環繞文字不根據標記對齊
inside			//列表項目標記放置在文字以內，且環繞文字根據標記對齊

說明：

設置或檢索作為對象的列表項標記如何根據文字排列。
僅作用於具有 display 值等於 list-item 的對象（如 li 對像）。
注意：ol 對像和 ul 對象的 type 特性為其後的所有列表項目（如 li 對像）指明列表屬性。
請參閱我的其他著作。
對應的腳本特性為 listStylePosition。請參閱我編寫的其他書目。

示例：

ul.in {
	display: list-item;
	list-style-position: inside;
}







list-style-type 版本：CSS1/CSS2　 相容性：IE4+ NS4+　繼承性：有

語法：

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha
upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana
hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

參數：

disc				//CSS1　實心圓
circle				//CSS1　空心圓
square				//CSS1　實心方塊
decimal				//CSS1　阿拉伯數字
lower-roman			//CSS1　小寫羅馬數字
upper-roman			//CSS1　大寫羅馬數字
lower-alpha			//CSS1　小寫英文字母
upper-alpha			//CSS1　大寫英文字母
none				//CSS1　不使用項目符號
armenian			//CSS2　傳統的亞美尼亞數字
cjk-ideographic			//CSS2　淺白的表意數字
georgian			//CSS2　傳統的喬治數字
lower-greek			//CSS2　基本的希臘小寫字母
hebrew				//CSS2　傳統的希伯萊數字
hiragana			//CSS2　日文平假名字元
hiragana-iroha			//CSS2　日文平假名序號
katakana			//CSS2　日文片假名字元
katakana-iroha			//CSS2　日文片假名序號
lower-latin			//CSS2　小寫拉丁字母
upper-latin			//CSS2　大寫拉丁字母

說明：

設置或檢索對象的列表項所使用的預設標記。
若 list-style-image 屬性為 none 或指定圖像不可用時，list-style-type 屬性將發生作用。
僅作用於具有 display 值等於 list-item 的對象（如 li 對像）。
注意：ol 對像和 ul 對象的 type 特性為其後的所有列表項目（如 li 對像）指明列表屬性。
請參閱我的其他著作。
IE5.5 尚不支援所有 CSS2 的值。
對應的腳本特性為 listStyleType。請參閱我編寫的其他書目。

示例：

li {
	list-style-type: square
}





marker-offset 版本：CSS2　 相容性：NONE　繼承性：無

語法：

marker-offset: auto | length

參數：

auto			//瀏覽器自動設置間距
length			//由浮點數字和單位標識符號組成的長度值。
			//可為負值。請參閱長度單位

說明：

設置或檢索標記容器和主容器之間水平補白。即兩個容器靠近的一邊的間距。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 markerOffset。請參閱我編寫的其他書目。

示例：

li:before {
	display: marker;
	marker-offset: 5px;
}





表格類相關

border-collapse 版本：CSS2　 相容性：IE5+　繼承性：有

語法：

border-collapse: separate | collapse

參數：

separate		//邊框獨立（標準 HTML）
rtl			//相鄰邊被合併

說明：

設置或檢索表格的行和單元格的邊是合併在一起還是按照標準的 HTML 樣式分開。
對應的腳本特性為 borderCollapse。請參閱我編寫的其他書目。

示例：

table {
	border-collapse: separate;
}




border-spacing 版本：CSS2　 相容性：NONE　繼承性：有

語法：

border-spacing: length || length

參數：

length			//由浮點數字和單位標識符號組成的長度值。
			//可為負值。請參閱長度單位

說明：

設置或檢索當表格邊框獨立（例如當 border-collapse 屬性等於 separate 時）
行和單元格的邊框在橫向和縱向上的間距。
當只指定一個 length 值時，這個值將作用於橫向和縱向上的間距。
當指定了全部兩個 length 值時，第一個作用於橫向間距，第二個作用於縱向間距。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 borderSpacing。請參閱我編寫的其他書目。

示例：

table {
	border-collapse: separate;
	border-spacing: 10px;
}




caption-side 版本：CSS2　 相容性：NONE　繼承性：有

語法：

caption-side: bottom | left |right | top

參數：
 
bottom			//下面
left			//左邊
right			//右邊
top			//下面

說明：

設置或檢索表格的 caption 對象是在表格的那一邊。
它是和 caption 對像一起使用的屬性。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 captionSide。請參閱我編寫的其他書目。

示例：

table caption {
	caption-side: top;
	width: auto;
	text-align: left;
}




empty-cells 版本：CSS2　 相容性：NONE　繼承性：有

語法：

empty-cells: hide | show

參數：

hide			//隱藏
show			//顯示

說明：

設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框。
只有當表格邊框獨立（例如當 border-collapse 屬性等於 separate 時）此屬性才起作用。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 emptyCells。請參閱我編寫的其他書目。

示例：

table {
	caption-side: top;
	width: auto;
	border-collapse: separate;
	empty-cells: hide;
}






table-layout 版本：CSS2　 相容性：IE5+　繼承性：有

語法：

table-layout: auto | fixed

參數：

auto		//預設的自動算法。佈局將基於各單元格的內容。
		//表格在每一單元格讀取計算之後才會顯示出來。速度很慢
fixed		//固定佈局的算法。
		//在這算法中，水平佈局是僅僅基於表格的寬度，表格邊框的寬度，單元格間距，列的寬度，
		//而和表格內容無關

說明：

設置或檢索表格的佈局算法。
對應的腳本特性為 tableLayout。請參閱我編寫的其他書目。

示例：

table {
	table-layout: auto;
}




speak-header 版本：CSS2　 相容性：NONE　繼承性：有

語法：

speak-header: once | always

參數：

once			//所有的單元格只有一個表格頭
fixed			//每一組單元格對應一個表頭

說明：

設置或檢索表格頭與其後的一系列單元格發生多少次關係。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 speakHeader。請參閱我編寫的其他書目。

示例：

table {
	speak-header: once
}






卷軸類相關

scrollbar-3d-light-color 捲軸左角框陰影顏色
scrollbar-arrow-color 捲軸箭頭顏色
scrollbar-base-color 捲軸背景色
scrollbar-darkshadow-color 捲軸右角框陰影顏色
scrollbar-face-color 捲軸顏色
scrollbar-highlight-color 捲軸右角框顏色
scrollbar-shadow-color 捲軸左角框顏色
scrollbar-track-color 捲軸軸軌顏色




scrollbar-3d-light-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-3d-light-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸亮邊框顏色。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbar3dLightColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-3d-light-color: threedhighlight;
}




scrollbar-highlight-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-highlight-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸 3D 介面的亮邊（ThreedHighlight）顏色。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbarHighlightColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-highlight-color: threedhighlight;
}





scrollbar-arrow-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-arrow-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸方向箭頭的顏色。當卷軸出現但不可用時，此屬性失效。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbarArrowColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-arrow-color: buttontext;
}






scrollbar-shadow-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-shadow-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸 3D 介面的暗邊（ThreedShadow）顏色。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbarShadowColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-shadow-color: ThreedDarkShadow;
}



scrollbar-dark-shadow-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-dark-shadow-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸暗邊框（ThreedDarkShadow）顏色。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbarDarkShadowColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-dark-shadow-color: threeddarkshadow;
}




scrollbar-base-color 版本：IE5.5+專有屬性　繼承性：有

語法：

scrollbar-base-color: color

參數：

color			//指定顏色。請參閱顏色單位和附錄：色碼表

說明：

設置或檢索卷軸基準顏色。其它介面顏色將據此自動調整。
請參閱 overflow 屬性 。
對應的腳本特性為 scrollbarBaseColor。請參閱我編寫的其他書目。

示例：

div {
	scrollbar-base-color: buttonface;
}









列印類相關



page 版本：CSS2　 相容性：IE5.5+　繼承性：有

語法：

page : auto | pagetype

參數：

auto			//參照當前的預設頁面
pagetype		//指定 @page 規則裡的一個頁面類型（pagetype）定義

說明：

檢索或指定顯示對像容器時使用的頁面類型（pagetype）。參閱 @page 規則。
對應的腳本特性為 page。請參閱我編寫的其他書目。

示例：

@page doublepage {
	size: 8.5in 11in;
	page-break-after: left
}
body {
	page: doublepage;
	page-break-after: right
}





page-break-after 版本：CSS2　 相容性：IE4+　繼承性：無

語法：

page-break-after: auto | always | avoid | left | right | null

參數：

auto			//假如需要在對像之後插入頁分割符號
always			//始終在對像之後插入頁分割符號
avoid			//避免在對像後面插入頁分割符號
left			//在對像後面插入頁分割符號直到它到達一個空白的左頁邊
right			//在對像後面插入頁分割符號直到它到達一個空白的右頁邊
null			//空值。IE5 用來取消頁分割符號設置

說明：

檢索或設置對像後出現的頁分割符號。
IE5 僅支援 always 值和空白值（null）。
在 IE4 中此屬性不作用於 br 對象，但是 IE5 作用。
對應的腳本特性為 pageBreakAfter。請參閱我編寫的其他書目。

示例：

p {
	page-break-after: always;
}





page-break-before 版本：CSS2　 相容性：IE4+　繼承性：無

語法：

page-break-before: auto | always | avoid | left | right | null

參數：
 
auto			//假如需要在對像之前插入頁分割符號
always			//始終在對像之前插入頁分割符號
avoid			//避免在對像前面插入頁分割符號
left			//在對像前面插入頁分割符號直到它到達一個空白的左頁邊
right			//在對像前面插入頁分割符號直到它到達一個空白的右頁邊
null			//空值。IE5 用來取消頁分割符號設置

說明：

檢索或設置對像前出現的頁分割符號。
IE5 僅支援 always 值和空白值（null）。
在 IE4 中此屬性不作用於 br 對象，但是 IE5 作用。
對應的腳本特性為 pageBreakBefore。請參閱我編寫的其他書目。

示例：

p {
	page-break-after: always;
}





page-break-inside 版本：CSS2　 相容性：NONE　繼承性：有

語法：

page-break-inside: auto | avoid

參數：
 
auto			//假如需要在對像容器中插入頁分割符號
avoid			//使當前對像容器中禁止插入頁分割符號

說明：

檢索或設置對像容器中出現的頁分割符號。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 pageBreakInside。請參閱我編寫的其他書目。

示例：

p {
	page-break-inside: auto
}





marks 版本：CSS2　 相容性：NONE　繼承性：無

語法：

marks: none | crop || cross

參數：

none			//無頁標記出現
crop			//在頁面將會被裁切處指定切割標記
cross			//指定交叉線標記用來供頁面對齊

說明：

印刷業的印刷文檔通常在頁面內容區域外帶有一些標記，用來校正和調整所有的頁面。
此屬性用來設置或檢索什麼樣的標誌是應該在頁容器外邊被給予。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 marks。請參閱我編寫的其他書目。

示例：

body {
	marks: crop cross
}





orphans 版本：CSS2　 相容性：NONE　繼承性：有

語法：

orphans: number

參數：

number			//整數

說明：

設置或檢索對像內容內一定要留在一頁範圍底端以內的行的最少數量。 
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 orphans。請參閱我編寫的其他書目。

示例：

p {
	orphans: 4;
}





widows 版本：CSS2　 相容性：NONE　繼承性：有

語法：

widows: number

參數：

number			//無單位整數。不可為負值

說明：

檢索或指定一定要留在頁面頂端的行數。
目前 IE5.5 尚不支援此屬性。
對應的腳本特性為 widows。請參閱我編寫的其他書目。

示例：

p {
	widows: 1
}







其他屬性類相關


behavior 版本：IE5+專有屬性　繼承性：無

語法：

behavior: url (url) | url (#objID ) | url (#default#behaviorName)

參數：

url (url)			//使用絕對或相對位址指定 DHTML 行為元件（.htc）
url (#objID )			//用二進制實現 DHTML 行為，#objID 為 object 對像指定的 id 特性
url (#default#behaviorName)	//IE 的預設行為。由 behaviorName 指定

說明：

設置或檢索對象的 DHTML 行為。
多個行為之間用空格隔開。
關於 DHTML 行為，請參閱我所編寫的其他教程。
對應的腳本特性為 behavior。請參閱我編寫的其他書目。

示例：

div {
	behavior: url(fly.htc) url(shy.htc);
}





zoom 版本：IE5.5+專有屬性　繼承性：無

語法：

zoom: normal | number

參數：

normal			//使用對象的實際大小
number			//百分比|無符號浮點實數。
			//浮點實數值為 1.0 或百分比為 100% 時相當於此屬性的 normal 值

說明：

設置或檢索對象的縮放比例。
對應的腳本特性為 zoom。請參閱我編寫的其他書目。

示例：

div {
	zoom: 0.75;
}




filter 版本：IE4+專有屬性　繼承性：無

語法：

filter: filter 

參數：

filter			//要使用的濾鏡效果。多個濾鏡之間用空格隔開。具體請參閱我的相關著作

說明：

設置或檢索對像所應用的濾鏡效果。
要使用該屬性，對像必須具有 height，width，position 三個屬性中的一個。
濾鏡的機制是可擴展的。可以開發和使用第三方濾鏡。
該屬性在 MAC 平台上不可用。
對應的腳本特性為 filter。請參閱我編寫的其他書目。

示例：

div {
	width: 200px;
	filter: blur(strength=50) flipv();
}
img {
	filter: invert();
}


還不動手寫看看!!


 free counters