字 體 屬 性
|
字體屬性
|
描 述
|
|
font-family
|
用一個指定的字型名稱或一個種類的字型族科
|
|
font-size
|
字體顯示的大小
|
|
font-style
|
以3個方法其中的一個來定義顯示的字體：normal（普通），italic（斜體）或oblique（傾斜）
|
|
font-weight
|
以bold為值可以使字體加粗
|
|
font-variant
|
設定英文大小寫轉換
|
|
|
font{font-family: "宋體"; font-size: 12px; font-style: normal; line-height: 20px;font-weight: bold; font-variant: normal; text-transform: capitalize; color: # 666666; text-decoration: underline;}
|
文 本 屬 性
|
文字屬性
|
描 述
|
|
letter-spacing
|
定義一個附加在字元之間的間隔數量
|
|
word-spacing
|
定義一個附加在單字之間的間隔數量
|
|
text-decoration
|
文字修飾屬性允許透過5個屬性中的一個來修飾文字
|
|
text-align
|
設定文字的水平對齊方式，包括左對齊、右對齊、居中、兩端對齊
|
|
text-indent
|
文字的首行縮排
|
|
line-height
|
行高屬性接受一個控製文字基準之間的間隔的值
|
|
text-transform
|
控制英文文字大小寫
|
|
|
font{letter-spacing: 2em; text-align: left; text-indent: 10px; vertical-align: middle; word-spacing: 5em; white-space: normal;}
|
邊 框 屬 性
|
邊 框 屬 性
|
描 述
|
|
border
|
邊框
|
|
border-top
|
上方邊框
|
|
border-left
|
左邊框
|
|
border-right
|
右框
|
|
border-bottom
|
下邊框
|
|
border-color
|
邊框顏色
|
|
border-style
|
邊框樣式
|
|
border-width
|
邊框寬度
|
|
border-top-color
|
上方邊框顏色
|
|
border-left-color
|
左邊框顏色
|
|
border-right-color
|
右邊框顏色
|
|
border-bottom-color
|
下邊框顏色
|
|
border-top-style
|
上方邊框樣式
|
|
border-left-style
|
下邊框樣式
|
|
border-right--style
|
右邊框樣式
|
|
border-bottom-style
|
下邊框樣式
|
|
border-top-width
|
上邊框寬度
|
|
border-left-width
|
下邊框寬度
|
|
border-right-width
|
右邊框寬度
|
|
border-bottom-width
|
下邊框寬度
|
|
|
border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}
|
邊框屬性設定值
|
邊框樣式屬性值
|
描 述
|
|
none
|
無邊框
|
|
dotted
|
邊框由點組成
|
|
dash
|
邊框由短線組成
|
|
solid
|
邊框是實線
|
|
double
|
邊框是雙實線
|
|
groove
|
邊框有立體感的溝槽
|
|
ridge
|
邊框成脊槽
|
|
inset
|
邊框內嵌一個立體邊框
|
|
outset
|
邊框外嵌一個立體邊框
|
定 位 屬 性
|
定位屬性
|
描 述
|
|
position
|
absolute（絕對定位）relative（相對定位）
|
|
top
|
層距離頂點縱座標的距離
|
|
left
|
層距離頂點橫座標的距離
|
|
width
|
層的寬度
|
|
height
|
層的高度
|
|
z-index
|
決定層的先後順序和覆蓋關係，值高的元素會覆蓋值比較低的元素
|
|
clip
|
限定只顯示裁切出來的區域。裁切出來的區域為矩形。只要設定兩個點即可。一個是矩形左上角的頂點，由top和right兩項的設定完成。另一個是右下腳的頂點，由bottom和right兩項的設定完成
|
|
overflow
|
當層內的內容超出層所能容納的範圍時，Visible：無論層的大小，內容都會顯示出來；Hidden：會隱藏超出層的大小的內容；scrol：不管內容是否超出層的範圍，選此項都會為圖層新增捲軸；auto：只有在內容超出圖層的範圍時才顯示捲軸
|
|
visibility
|
這項是針對嵌套層的設置，嵌套層插入在其他層中的層，分為嵌套的層（子層）和被嵌套的層（父層）。 Inherit：子層繼承父層的可見性，父層可見，子層也可見；父層不可見，子層也不可見。 Visible：無論父層可見與否，子層都可見。 Hidden：無論父層可見與否，子層都隱密。
|
區 塊 屬 性
|
區塊屬性
|
描 述
|
|
width
|
設定物件的寬度
|
|
height
|
設定物件的高度
|
|
float
|
讓文字環繞在一個元素的四周
|
|
clear
|
指定某一個元素的某一邊是否允許有環繞的文字或物件
|
|
padding
|
決定了在邊框與內容之間究竟應該插入多少空間距離。它有四個屬性，分別是：top（上）、right（右） 、bottom（下）、left（左）分別用來設定上下左右的填充距。
|
|
margin
|
決定了內容區塊距離外邊元素有多少空間距離。 分別是：top（上）、right（右） 、bottom（下）、left（左）分別用來設定上下左右的填充距。
|
|
|
#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both}
|
欄 表 屬 性
|
列表屬性
|
描 述
|
|
list-style-type
|
設定引導清單項目的符號類型
|
|
list-style-image
|
選擇圖像作為項目的引導符號
li{ list-style-image:url(14-25.gif)}
|
|
list-stle-position
|
決定清單項目所縮排的程度
|
列表符號類型屬性值
|
列表符號類型屬性值
|
描 述
|
|
disc
|
在文字行前面加上「●」實心圓
|
|
circle
|
在文字行前方加上「○」空心圓
|
|
spuare
|
在文字行前面加上「■」實心方塊
|
|
decimal
|
在文字行前面加上普通的阿拉伯數字
|
|
lower-roman
|
在文字行前面加上小寫羅馬數字
|
|
upper-roman
|
在文字行前面加上大寫羅馬數字
|
|
lower-alpha
|
在文字行前面加上小寫英文字母
|
|
upper-alpha
|
在文字行前面加上大寫英文字母
|
|
none
|
不顯示任何項目符號或編號
|
|
|
#alignLeft li { list-style-image: url(images/arrow1.gif);
list-style-type: none;list-style-position: outside;}
|
列表位置屬性值
|
列表位置屬性值
|
描 述
|
|
outside
|
清單貼近左側邊框
|
|
inside
|
清單縮排
|
/*這是註解的寫法*/
body {
/*文字屬性*/
font-size:12px;/*文字大小*/ color:#CCCCCC;/*文字顏色*/
font-family:Arial, Helvetica, sans-serif;/*設定字體*/
font-weight:bold;/*文字加粗*/
text-align:center;/*DIV標籤內部水平方向居中center或居左left右right*/
text-decoration:underline;/*底線 無底線為none*/
line-height:150%;/*行高也可以是像素px*/
/*背景屬性*/
/*背景顏色*/
background-image:url(images/test.gif);/*背景圖片*/
background-repeat:no-repeat;/*背景圖片不平鋪*/
background-position:5px 10px;/*背景圖片的位置，第一個為橫座標，第二個為縱座標*/
/*填充及邊界屬性*/
height: 100px; width: 100px;
margin:10px 0 5px 0;/*容器外邊距 順序為上 右 下
margin-top:10px; /*單獨一項的寫法 */
padding:10px 0 5px 0;/*容器內部邊距，順序為
上
右 下 左,為0時可以不用單位**
float:left; /*1.在做列的結構才用 left right 和*/
/*列表屬性*/
list-style-type:none;/*消除ul無序列表li前面的小黑點*/
display:block;/*以區塊形式顯示，通常用於連結中實現滑鼠劃過的效果*/
display:inline;/*當用了float時做靠邊的DIV外邊距出現翻倍情況時才使用，針對的是IE6的一個bug*/
/*邊框屬性*/
border:1px solid #ccc;/*表格、DIV、LI、A等容器的邊框屬性，虛線是dashed*/
overflow:hidden;/*溢出部分隱藏*/ overflow:auto;/*自動判斷容器高度，從而選擇自動出現/隱藏垂直滾動條*/
/*特殊屬性，
不需要強行掌握
*/
/*文字豎排：*/writing-mode: tb-rl;
/*預定格式*/
/*字符間距*/ letter-spacing:5px;
/*單字間距*/ word-spacing:5px;
}
定位屬性
| 描 述
|
position
| absolute（絕對定位）relative（相對定位）
|
top
|
層距離頂點縱座標的距離 |
|
left
|
層距離頂點橫座標的距離 |
|
width
|
層的寬度 |
|
height
|
層的高度 |
|
z-index
|
決定層的先後順序和覆蓋關係，值高的元素會覆蓋值比較低的元素 |
|
clip
|
限定只顯示裁切出來的區域。裁切出來的區域為矩形。只要設定兩個點即可。一個是矩形左上角的頂點，由top和right兩項的設定完成。另一個是右下腳的頂點，由bottom和right兩項的設定完成 |
|
overflow
|
當層內的內容超出層所能容納的範圍時，Visible：無論層的大小，內容都會顯示出來；Hidden：會隱藏超出層的大小的內容；scrol：不管內容是否超出層的範圍，選此項都會為圖層新增捲軸；auto：只有在內容超出圖層的範圍時才顯示捲軸 |
|
visibility
|
這項是針對嵌套層的設置，嵌套層插入在其他層中的層，分為嵌套的層（子層）和被嵌套的層（父層）。 Inherit：子層繼承父層的可見性，父層可見，子層也可見；父層不可見，子層也不可見。 Visible：無論父層可見與否，子層都可見。 Hidden：無論父層可見與否，子層都隱密。 css
|
