css屬性

字 體 屬 性

字體屬性	描      述
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   overflow   visibility

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