字 體 屬 性
|
字體屬性 |
描 述 |
|
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;
}
| 描 述
|
| absolute（絕對定位）relative（相對定位）
|
|
層距離頂點縱座標的距離 |
|
|
層距離頂點橫座標的距離 |
|
|
層的寬度 |
|
|
層的高度 |
|
|
決定層的先後順序和覆蓋關係，值高的元素會覆蓋值比較低的元素 |
|
|
限定只顯示裁切出來的區域。裁切出來的區域為矩形。只要設定兩個點即可。一個是矩形左上角的頂點，由top和right兩項的設定完成。另一個是右下腳的頂點，由bottom和right兩項的設定完成 |
|
|
當層內的內容超出層所能容納的範圍時，Visible：無論層的大小，內容都會顯示出來；Hidden：會隱藏超出層的大小的內容；scrol：不管內容是否超出層的範圍，選此項都會為圖層新增捲軸；auto：只有在內容超出圖層的範圍時才顯示捲軸 |
|
|
這項是針對嵌套層的設置，嵌套層插入在其他層中的層，分為嵌套的層（子層）和被嵌套的層（父層）。 Inherit：子層繼承父層的可見性，父層可見，子層也可見；父層不可見，子層也不可見。 Visible：無論父層可見與否，子層都可見。 Hidden：無論父層可見與否，子層都隱密。 css |
