[WEB]DIV的CSS語法

本文引用自http://yadozo.javaeye.com/blog/144986

網頁有三個部分組成
結構(Structure)、表現(Presentation)、行為(Behavior)

結構化標準語言： XHTML、 XML
表現標準語言： CSS
行為標準 對象模型 W3C DOM、ECMAScript 等

結構 Structure
XML： Extensible Maskup Language 可擴展標記語言
XHTML：The Extensible HyperText Markup Language

表現 Presentation
CSS：Cascading Style Sheets 層疊樣式表單

行為 Behavior
DOM：Document Object Model 文檔對象模型

h1 {color:blue;} /*簡單選擇符的特殊性=1*/
.warning{color:red;} /*類選擇符的特殊性=10*/
#main{color:black;} /*ID選擇符特殊性=100*/
p em{color:yellow;} /*特殊性=2*/
p.note em.dark{color:gray;} /*特殊性=22*/

CSS常用分類
1.塊級元素 （display:block） 如 body、table 等
2.內嵌元素 （display:inline） 如 a、span 等
3.列表元素 （display:list-item） 僅有li
4.隱藏元素 （display:none） 不被顯示

div {
font-family: "宋體"; /*字體類型*/
font-size: 12px; /*字體大小*/
line-height: 140%; /*行高*/
color: #0000ff; /*顏色*/
font-style: normal; /*字體樣式*/
font-weight: normal; /*粗細*/
text-decoration: underline; /*修飾*/
background-color: #CCCCCC; /*背景顏色*/
background-image: url(img/l_bg.gif); /*背景圖片*/
background-repeat: repeat-x; /*橫向重復*/
background-position: center top; /*位置*/
text-align: center; /*文本對齊，可為負數*/
text-indent: 24px; /*縮進*/
display: block; /*塊級元素*/
margin: 5px; /*邊界*/
clear: left; /*清除*/
float: left; /*浮動*/
height: 400px; /*方框高度*/
width: 600px; /*方框寬度*/
padding-top: 1px; /*填充*/
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
border-left-width: 1px; /*邊框大小*/
border-left-style: solid; /*邊框樣式*/
border-left-color: #0000FF; /*邊框顏色*/
list-style-position: inside; /*列表類型*/
list-style-image: url(img/b_01.gif);/*項目符號圖像*/
list-style-type: disc; /*位置：內*/

overflow: scroll; /*溢位*/
position: absolute; /*位置類型*/
visibility: visible; /*顯示 可見*/
z-index: 5; /*Z軸*/
left: 5px; /*置入*/
top: 5px;
right: 5px;
bottom: 5px;
clip: rect(1px,2px,3px,4px); /*裁剪*/

}
一旦使用絕對定位，元素將脫離原來的文檔流，瀏覽器依據【置入】的數值將元素顯示在一定的位置。
【顯示】(visibility) 若設置隱藏，則元素將不顯示，但是元素所佔的位置將被留出來。
【Z軸】(z-index) 定義元素在頁面內互相重疊時，數值較大的元素將顯示在數據較小的元素上面。
【溢位】(overflow) 設置當元素的內容大于元素的高和寬的時候，是否出現滾動條。
【裁剪】(clip) 檢索設置對象的可視區域。可是區域外事透明的。定義了絕對（absolute）定位元素的可視區域的尺寸，必須將position屬性值設置為absolute, 此屬性才可使用。

盒模型(box model)
填充(padding)、邊框(border)、邊界(margin)都分為“上右下左”4個方向
Java代碼
div {
margin: 1px 2px 3px 4px; /*按照順時針方向縮寫*/
padding: 1px 2px 3px 4px; /*按照順時針方向縮寫*/
border: 1px solid #333;
}

CSS內定義的寬和高，指的是填充以內的內容範圍。
元素的實際寬度 = 左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界

盒模型總結
1.邊界值可為負值
2.邊界默認的樣式(border-style)為不顯示(none)
3.填充不可為負
4.對于塊級元素，未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮。例如：有上下兩個元素，上元素的下邊界為10px, 下面元素的上邊界為5px, 則實際兩個元素的間距為10px(兩個邊界值較大的值)。
5.浮動元素（無論是左或者右浮動）邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內容能承受的最小寬度。
6.內聯元素，例如a，定義上下邊界不影響到行高。
7.如果盒中沒有內容，則即使定義了高度和寬度都為100%，實際上只有0%，因此不會被顯示。