[原創]CSS屬性收集

CSS屬性

1.字型屬性

這是最基本的屬性，你經常會用到。它主要包括以下屬性：

屬性	屬性含義	屬性值
font-family	使用什麼字型	所有的字型
font-style	是否使用斜體	Normal,Italic,oblique
font-variant	是否小體大寫	normal,small-caps
font-weight	字型粗細	Normal,bold,bolder,lithter等
font-size	字型大小	Absolute-size,relative-size,length,percentage等

樣本：

<p style="font-style:oblique; font-weight:bold;font-size:24pt;font-variant:small-caps">ABC</p>

2.顏色和背景屬性

屬性	屬性含義	屬性書寫格式	屬性值
color	定義前景色彩	{color:red}	顏色
background-color	定義背景色	{background-color:yellow}	顏色
background-image	定義背景圖案	{background-image:url(*.jpg)}	圖片路徑
background-repeat	背景圖案重複方式	{background-repeat:repeat-y}	repeat-x,repeat-y,no-repeat
background-attachment	設定滾動	{background-attachment:scroll}	scroll,fixed
background-position	背景圖案的初始位置	{background-position:top center}	percentage,length,top,left,right,bottom

3.文字屬性

屬性	屬性含義	屬性值
word-spacing	定義了各個單詞之間的間距	Normal <length>(必須以長度為單位)
letter-spacing	定義了各個字母之間的間距	同上
text-decoration	定義文字的裝飾樣式	none|overline|underline|line-through|blink
vertical-align	定義元素在垂直方向上的位置	baseline|sub|super|top|text-top|middle|bottom|text-bottom <percentage>
text-transform	使文本轉換成其他形式	capitalize|uppercase|lowercase|none
text-align	定義文字的對齊	left|right|center|justify
text-indent	定義文本的首行縮排方式	<length>|<percentage>
line-height	定義文本的行高	normal|<number>|<length>|<percentage>

樣本：

<p style=“letter-spacing：1em；text-align：justify；text-indent：4em；line-height：17pt”>……</p>

<style>
　　　<!--
　　　//*定義偽類元素（ａ：），大括弧內定義了前景色彩屬性和文本裝飾屬性，
　　　hover加上‘font-size’屬性目的是讓滑鼠啟用連結時改變字型*//
　　　a：link{color：green;text-decoration：none}
　　　//*未訪問時的狀態，顏色為綠色(green)，文本裝飾屬性(text-decoration)值
　　　為沒有(none)*//
　　　a：visited{color：red;text-decoration：none}
　　　//*訪問過的狀態，顏色為紅色(red)，文本裝飾屬性值為沒有*//
　　　a：hover{color：blue;text-decoration：overline;font-size：20pt}
　　　//*滑鼠啟用的狀態，顏色為藍色(blue)， 文本裝飾屬性值為上劃(overline)，
　　　字型大小為20pt*//
　　　-->
　　 </style>
4.容器屬性

4.1　邊距屬性

屬性	屬性含義	屬性值
margin-top	設定頂端邊距	length|percentage|Auto
margin-bottom	設定底端邊距	同上
margin-left	設定左端邊距	同上
margin-right	設定右端邊距	同上

4.2　填充距屬性

屬性	屬性含義	屬性值
padding-top	設定頂端填充距	length|percentage
padding-bottom	設定底端填充距	同上
padding-left	設定左端填充距	同上
padding-right	設定右端填充距	同上

註：填充距指的是文本邊框與文本之間的距離

4.3　邊框屬性

屬性	屬性含義	屬性值
border-top-width	設定頂端邊框寬度	thin|medium|thick|length
border-bottom-width	設定底端邊框寬度	同上
border-left-width	設定左端邊框寬度	同上
border-right-width	設定右端邊框寬度	同上
border-width	一次定義邊框寬度	同上
border-color	設定邊框顏色	color
border-style	設定邊框樣式	none|dotted|dash|solid|double|groove|ridge|inset|outset
border-top	一次定義頂端的各種屬性	border-top-width|boder-style|color
border-bottom	一次定義底端的各種屬性	同上
border-left	一次定義左端的各種屬性	同上
border-right	一次定義右端的各種屬性	同上

4.4　圖文混排

屬性	屬性含義	屬性值
width	定義寬度屬性	length|percentage|auto
height	定義高度屬性	length|auto
float	使文字環繞在一個元素的四周	left|right|none
clear	定義某一邊是否有環繞文字	left|right|none|both

樣本：

<!--
　　　 img{margin-right：2em；float：left}
　　　 //*定義圖片的右邊距為2em，圖片浮動在文字的左邊*//
　　　 -->
　　　</style>

5.　分級屬性

屬性	屬性含義	屬性值
Display	定義是否顯示	Block|inline|list-item|none
White-space	決定怎樣處理空白部分	normal|pre|nowrap
List-style-type	在清單項目前加項目編號	disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image	在清單項目前加圖案	<url>|none
List-style-position	決定清單項目中第二項的起始位置	inside|outside
List-style	一次定義前面的列表屬性	<keyword>|<position>|<url>

樣本：

<style type=“text/css”>//*定義CSS*//
　　<!--
　　p{display：block；white-space：normal}
　　//*定義顯示內容為“block”，意思是在新的地區裡顯示； white-space的屬性
　　　normal使多重空白合成為一個*//
　　em{display：inline}
　　//*定義EM的顯示內容為“inline” 目的是為了其控制下的文本顯示中不折行*//
　　li{display：list-item；list-style：square}
　　//*定義li的顯示內容為“list-item”，顯示在清單項目中加入一個符號標記， 而
　　list-style屬性值定義為square使清單項目前的標記為方塊*//
　　img{display：block} //*定義圖片屬性為block使圖片在新的位置開啟*//
　　 -->
　　</style>

6.　滑鼠屬性

6.　滑鼠屬性

　　用CSS改變滑鼠屬性，就是當滑鼠移動到不同的元素對象上面時，讓滑鼠以不同的形狀、圖案顯示。主要是用"cursor"屬性來實現的，其屬性值如下表所示：

屬性值	含義
Auto	按預設狀態自行改變
Crosshair	精確定位十字
Default	預設指標
Hand	手形
Move	移動
E-resize	箭頭朝右方
NE-resize	箭頭朝右上方
NW-resize	箭頭朝左上方
N-resize	箭頭朝上方
SE-resize	箭頭朝右下方
SW-resize	箭頭朝左下方
S-resize	箭頭朝下方
W-resize	箭頭朝左方
Text	文本“I”型
Wait	等待
Help	協助