1
、字體屬性
(type)
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
2
、顏色和背景屬性
(backgroud)
color(
定義前景色,例如:
p{color:red})
background-color(
定義背景色
)
background-image(
定義背景圖片
)
background-repeat(
背景圖案重復方式
)
:
repeat-x/repeat-y/no-repeat
background-attachment(
設置滾動
)
:
scroll(
滾動
)/fixe(
固定的
)
background-position(
背景圖案的初始位置
)
:
percentage/length/top/left/right/bottom
3
、文本屬性:
(block)
定義間距:
word-spacing(
單詞之間的距離
)
letter-spacing(
字母之間的距離
)
text-decoration(
定義文字的裝飾
)
:
nore/underline/overline/line-through/blink
vertical-align(
元素在垂直方向的位置
)
:
baseline(
基線
)/sub/super/top/text-top/middle/bottom/text-bottom
text-transform(
使文本轉換為其它方式
)
:
capitalize(
大寫
)/uppercase(
首字母大寫
)/lowercase(
小寫
)/none
text-align(
文字的對齊
)
:
left/right/center/justify
text-indent(
文本的首行縮進
)length/percentage
line-height(
文本的行高
):normal/numbet/lenggth/percentage(
百分比
)
定義超鏈接:
a
:
link {color:green;text-decoration:nore}(
未訪問過的狀態
)
a
:
visited {color:ren;text-decoration:underline;16pt}(
訪問過的狀態
)
a:hover {color:blue;text-decoration:underline;16pt}(
鼠標激活的狀態
)
4
、塊屬性
(block)
邊距屬性:
margin-top(
設置頂邊距
)
margin-right(
設置右邊距
)
margin-bottom(
設置底邊距
)
margin-left(
設置左邊距
)
填充距屬性:
padding-top:(
設置頂端真充距
)
padding-right:(
設置頂端真充距
)
padding-bottom:(
設置頂端真充距
)
padding-left:(
設置頂端真充距
)
5
、邊框屬性
(border)
border-top-width(
頂端邊框寬度
)
border-right-width(
右端邊框寬度
)
border-bottom-width(
底端邊框寬度
)
border-left-width(d
左邊框寬度
)
border-width(
一次定義邊框寬度
)
border-color(
設置邊框顏色
)
border-style(
設置邊框樣式
)
border-top(
一次定義頂端各種屬性
)
border-right(
一次定義右端各種屬性
)
border-bottom(
一次定義底端各種屬性
)
border-left(
一次定義左端各種屬性
)
圖文混排:
width(
定義寬度屬性
)
height(
定義高度屬性
)
float(
文字環繞在一個元素的四周
)
clear(
定義某一邊是否有環繞
)
6
、項目符號和編號
(list)
display(
定義是否顯示
)
white-space(
怎樣處理空白部分
)
:
normal/pre/nowrap
list-style-type(
在列表前加項目符號
)disc(
圓點
)/circle(
圈
)/square
(方形)
/decimal
(阿拉伯數字)
/lower-roman(
小寫羅馬數字
)/upper-roman(
大寫羅馬數字
)/lower-alpha(
小寫英文字母
)/upper-alpha(
大寫英文字母
)/nore
list-style-tyle(
在列表前加圖案
):<url>/none
list-style-position(
決定列表項中第二行的起邕位置
)
list-style(
一次性定義所有屬性
)
7
、定位(
positioning
)
即層屬性
Type
:設定對象的定位方式。
有三種方式:
Absolute
(絕對定位)、
Relative
(相對定位)、
Static
(無特殊定位)。相對應的
CSS
屬性是
?”position?”
。
Visibility
:設定對象定位層的最初顯示狀態。有三種狀態:
Inherit
(繼承父層的顯示屬性)、
Visible
(對象可視)、
Hidden
隱藏對象。相對應的
CSS
屬性是
?”visibility?”
。
Z-Index
:設置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊。變量值可以是正值也可以是負值。相對應的
CSS
屬性是
?”z-index?”
。
Overflow
:設置如果層的內容超出了層的大小時如何處理。有四種處理方式:
visible
,增加層的大小,從而將層的所有內容顯示出來;
hidden
,保持層的大小不變,將超出層的內容剪裁掉;
Scroll
,總是顯示滾動條;
Auto
,只有在內容超出層的邊界時才顯示滾動條。相對應的
CSS
屬性是
?”overflow?”
。
Placement
:設置對象定位層的位置和大小。可以分別設置
left
(左邊定位)、
top
(頂部定位)、
width
(寬)、
height
(高)。相對應的
CSS
屬性分別是
?”left; top; width; height?”
。
Clip
:定義定位層的可視區域。區域外的部分為不可視區,為透明的。可以理解為在定位層上放一個矩形遮罩的效果。相對應的
CSS
屬性是
?”clip?”
。
8
、擴展(
Extensions
)
Pagebreak
:在打印的時候強迫在樣式控制的對象前后換頁。
Before
:設置對象前出現的頁分割符。設置為
always
時,始終在對象之前插入頁分割符。相對應的
CSS
屬性是
?”page-break-before?”
。
After
:設置對象后出現的頁分割符。設置為
always
時,始終在對象之后插入頁分割符。相對應的
CSS
屬性是
?”'>
。
注意:以上
IE5
僅支持
always
值和空白值(
null
)。
Cursor
:當鼠標滑過樣式控制的對象時改變鼠標形狀。可以設置為
hand
(手型)、
crosshair
(
?”
十
?”
型)、
text
(
?”I?”
型)、
wait
(等待)、
default
(默認)、
help
(幫助)、
e-resize
(東箭頭)、
ne-resize
(東北箭頭)、
n-resize
(北箭頭)、
nw-resize
(西北箭頭)、
w-resize
(西箭頭)、
sw-resize
(西南箭頭)、
s-resize
(南箭頭)、
se-resize
(東南箭頭)和
auto
(自動)。
Filter
:在樣式中加上濾鏡特效。由于此屬性內容比較多,我們將到下一章單獨對濾鏡介紹。
1. Alpha
:設置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity
:透明度級別,范圍是
0-100
,
0
代表完全透明,
100
代表完全不透明。
FinishOpacity
:設置漸變的透明效果時,用來指定結束時的透明度,范圍也是
0
到
100
。
Style
:設置漸變透明的樣式,值為
0
代表統一形狀、
1
代表線形、
2
代表放射狀、
3
代表長方形。
StartX
和
StartY
:代表漸變透明效果的開始
X
和
Y
坐標。
FinishX
和
FinishY
:代表漸變透明效果結束
X
和
Y
的坐標。
?
2. BlendTrans
:圖像之間的淡入和淡出的效果
BlendTrans(Duration=?)
Duration
:淡入或淡出的時間。
注意:這個濾鏡必須配合
JS
建立圖片序列,才能做出圖片間效果。
3. Blru
:建立模糊效果
Blur(Add=?, Direction=?, Strength=?)
Add
:是否單方向模糊,此參數是一個布爾值,
true
(非
0
)或
false
(
0
)。
Direction
:設置模糊的方向,其中
0
度代表垂直向上,然后每
45
度為一個單位。
Strength
:代表模糊的象素值。
4. Chroma
:把指定的顏色設置為透明
Chroma(Color=?)
Color
:是指要設置為透明的顏色。
5. DropShadow
:建立陰影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color
:指定陰影的顏色。
OffX
:指定陰影相對于元素在水平方向偏移量,整數。
OffY
:指定陰影相對于元素在垂直方向偏移量,整數。
Positive
:是一個布爾值,值為
true
(非
0
)時,表示為建立外陰影;為
false(0)
,表示為建立內陰影。
6. FlipH
:將元素水平反轉
7. FlipV
:將元素垂直反轉
8.
Glow
:建立外發光效效果
Glow(Color=?, Strength=?)
Color
:是指定發光的顏色。
Strength
:光的強度,可以是
1
到
255
之間的任何整數,數字越大,發光的范圍就越大。
9. Gray
:去掉圖像的色彩,顯示為黑白圖象
10. Invert
:反轉圖象的顏色,產生類似底片的效果
11. Light
:放置光源的效果,可以用來模擬光源在物體上的投影效果
注意:此效果需要用
JS
設置光的位置和強度。
12. Mask
:建立透明遮罩
Mask(Color=?)
Color
:設置底色,讓對象遮住底色的部分透明。
13. RevealTrans
:建立切換效果
RevealTrans(Duration=?, Transition=?)
Duration
:是切換時間,以秒為單位。
Transtition
:是切換方式,可設置為從
0
到
23
。
注意:如果做頁面間的切換效果,可以在
<head>
區加上一行代碼:
<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >
。如果用在頁面里的元素必須配合
JS
使用。
14. Shadow
:建立另一種陰影效果
Shadow(Color=?, Direction=?)
Color
:是指陰影的顏色。
Direction
:是設置投影的方向,
0
度代表垂直向上,然后每
45
度為一個單位。
15. Wave
:波紋效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
Add
:表示是否顯示原對象,
0
表示不顯示,非
0
表示要顯示原對象。
Freq
:設置波動的個數。
LightStrength
:設置波浪效果的光照強度,從
0
到
100
。
0
表示最弱,
100
表示最強。
Phase
:波浪的起始相角。從
0
到
100
的百分數值。(例如:
25
相當于
90
度,而
50
相當于
180
度。)
Strength
:設置波浪搖擺的幅度。
16.
Xray
:顯現圖片的輪廓,
X
光片效果
注意:在使用
CSS
濾鏡時,必須使用在有區域的元素,比如表格,圖片等。而文本,段落這樣沒有區域的元素不能使用
CSS
濾鏡,對這樣的元素我們可以設置元素的
Height
和
Width
樣式或坐標來實現。
posted on 2006-04-06 18:03
SIMONE 閱讀(400)
評論(0) 編輯 收藏