草根站长论坛 » 站长设计素材 » 设计教程 » 使用Dreamweaver来详细了解CSS的多样性

阿祥 发表于 2007-7-15 18:49

使用Dreamweaver来详细了解CSS的多样性

说明：[color=red]√[/color]属性继承　×不继承　
1qi*_3]5v'N(w*],? 　　　[　]为适应元素类型　无[　]标出为所有元素
\;V#hCE*w:Y
'u@7v,~qZ$dZIz-D [color=red]字体[/color]9c2g2R e`} y`'Zp-^(@o
[color=red]√[/color][b]Font-family[/b]7C#zD!C2`s2to
[color=red]√[/color][b]Font-size[/b] 9 10 12 14 16 18 24 36 xx-small x-small small medium large x-large xx-large smaller larger
;p,Ae/ngfUiL [color=red]√[/color][b]Color[/b]
7Qe;c#]?G,X [color=red]√[/color][b]Font-style[/b] normal italic oblique|(j c6s`
MC7J
[color=red]√[/color][b]Line-height[/b] nomal&h6PkkKcy
[color=red]√[/color][b]Font-weight[/b] normal bold bolder lighter 100 200 300 400 500 600 700 800 900*ao5A(ht}
[color=red]√[/color][b]Text-transform[/b] capitalize uppercase lowercase none4m E*ni6k_$P
[color=red]√[/color][b]Font-variant[/b] normal small-caps$pw^U&v6Epi
×[b]Text-decoration[/b] none underline overline line-through blink4N9VNP(_){
U
c
[color=red]√[/color][b]Font[/b]2G s I.RQ5}xf%F%N
y n\\ _]+b*p"k
[color=red]背景[/color]2d1v8Iivb
u
×[b]Background-color[/b] M0L2Yv;e#T^
×[b]Background[/b]
;k!{}*V%dW'\1T
J ×[b]Background-image[/b]
o @*Z7g6Z ×[b]Background-attachment[/b] fixed scrolls7QaNb"v
W/F
×[b]Background-repeat[/b] no-repeat repeat repeat-x repeat-yr,Zws$l%N2`\#F9C
×[b]Background-position[/b][color=brown][块、替换][/color]h+V!W3FAsY
3gX$gYF1b?/B
[color=red]区块[/color]
Kq.cP^Js.[2]3A [color=red]√[/color][b]Word-spacing[/b] normal[color=brown][块][/color]
(`2I-YjN#SNTFn [color=red]√[/color][b]Letter-spacing[/b] normalLj%v.J:Lc g
×[b]Vertical-align[/b] baseline sub super top text-top middle bottom text-bottom[color=brown][内][/color]
+{5~H
K2O+j_#f u6K [color=red]√[/color][b]Text-align[/b] left right center justify[color=brown][块][/color]*[])g*V [@a:a
×[b]Text-indent[/b][color=brown][块][/color]
\I1x.\ epFV1P ×[b]White-space[/b] normal pre nowrap[color=brown][块][/color]
s^6~p.Q ×[b]Display[/b] inline block list-item run-in compact marker table inline-table table-row-group table-header-ground table-footer-ground table-row table-column-ground table-column table-cell table-caption noneP0TI:H6dL1Hz
Wo)gj'X%gE&|T
[color=red]边框[/color]
(SEf!tyy;eB.| ×[b]Border[/b]
#v^'YQ` ×[b]Border-top-color[/b]
1S{_!iB8j!^I ×[b]Border-top-style[/b] none solid dashed dotted double groove ridge inset outset
I&q9HU.w I'p ×[b]Border-top-width[/b] thin medium thick
r}6QG~Cr ×[b]Border-top-Right[/b]
]Ko"pn6D(x1q ×[b]Border-top-Bottom[/b])i,x-Do"L4O%\
×[b]Border-top-Left[/b]

bN+OO${/aJ ×[b]Border-top[/b]{8E.k#]+}i
×[b]Border-right[/b] F+r |*JB
v1f
×[b]Border-bottom[/b]?"L)lEp"R
×[b]Border-left[/b]
D^4O
h+T,?*CC ×[b]Border-color[/b]/s C |/Q
D0s_
×[b]Border-style[/b]~BzN8Q \+H
×[b]Border-width[/b]
2U7a*jMl{r
Y`#G0fD:VtAb [color=red]方框[/color]
q+Kr_Vij ×[b]Width[/b] auto px pt in cm mm pc em ex %[color=brown][块、替][/color]
ht9gR-|n Rk8Y ×[b]Height[/b] auto[color=brown][块、替][/color]v{ mn7|8}:II)m
×[b]Float[/b] left right none
|\Q!df o;L)X ×[b]Clear[/b] left right both none
-OXRAhcp ×[b]Margin[/b]l"Q6BC$lZ+N0W#p
×[b]Margin-top[/b]
|5sm?7g7V b ×[b]Margin-right[/b]
2\]Jg9b/iia&f H ×[b]Margin-bottom[/b]ork+IEDF G
×[b]Margin-left[/b]&H_A,S Y7?\.Rs/U
×[b]Padding[/b] _AI ~&R;Dt
×[b]Padding-top[/b]
gH l&M$y$v5m s:]g ×[b]Padding-right[/b]
| g!~o#h's4Ni ×[b]Padding-bottom[/b]
2i&Rh)\n } ×[b]Padding-left[/b]X-|!CAOf
M*i#F N-^;gk
[color=red]列表[/color]
(y6f+Xc:~:V~(t ×[b]List-style-type[/b] disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha onne[color=brown][显示值为list-item的元素][/color]
%g~1bvqV ×[b]List-style-Image[/b][color=brown][显示值为list-item的元素][/color](?P~1NWp
×[b]List-style-position[/b] inside outside[color=brown][显示值为list-item的元素][/color]
'w4L&[tp%L F']eFsu9KcZ
[color=red]定位[/color]
2ky\?*ZEsp(W ×[b]Position[/b] absolute relative staticc~#me)V
×[b]Visiblility[/b] visible hidden inherit
(~ n%H#F;Ks ×[b]Height[/b] auto-z3fno K m,xD0\
j[
×[b]Left[/b] auto
-L6pzw6I(US1F ×[b]Top[/b] auto;W izG4I
×[b]Right[/b] auto"EA] xr(T(a
×[b]Bottom[/b] auto
3Z9xf_1[T,O$b5Uj LW ×[b]z-index[/b] auto[color=brown][定位元素][/color]4[ss5Q'XwW8zjS$z
×[b]overflow[/b] visible hidden scroll auto[color=brown][块、替][/color]B+n'T&m`;MkA
×[b]clip[/b] auto
k*z3Xq7O#Sbu ~4hHJuXh
说明：
[
@.}A~Wd e X
_ color 设置文字颜色
6Tw;A6^ ^6@+z #rgb
O,r,D&~N'Jl U #rrggbb
b;WX#U-Xt rgb(255,255,255)
+@E2a?"@'?r rgb(100%,100%,100%) H1{color:red}
-y5I]9w$jE H1{color:#f00}Q1r9G9YZom6b
H1{color:#ff0000}
0jk{6Hs2q[ H1{color:rgb(255,0,0)}F[!XWhv{V D&K
H1{color:rgb(100%,0%,0%)}#sgI(lZ
.Ty'h{x.l
background-color 设置背景颜色，格式同上。 BODY{background-color:red}p-GcbOA!h1}9H6E9Z
BODY{background-color:#f00}"V*@%T!q#f,[*`v2KAUQ
BODY{background-color:#ff0000}
Y*q'U-Hl$^ BODY{background-color:rgb(255,0,0)}~[Lr*|8I(hyZg
BODY{background-color:rgb(100%,0%,0%)} dd*@w1}#R
background-image 设置背景图片，:U,u1VPnQjX4eH*h
url(/imageURL) body{backround-image:url(/back.jpg);}
F^ th9k"yCI background-repeat 设置背景图片是否重复排列: HkkN Qkp6_$n6{
repeat-x(X轴重复排列);
lI*T5n:R repeat-y(Y轴重复排列);
'f{q:ZJ0Ix
~ No-repeat(不重复排列) BODY{background-repeat:repeat-x;}
*~3@N2S
~)r,rB0d3X BODY{background-repeat:No-repeat;}
jIx c$nF,u+D$LF:~ background-attachment 设定背景图片是否卷动，默认为卷动。:b{3w9^:r(M
scroll(卷动)t"O5Ax`+_6C!`u
fixed(不卷动) BODY{background-attachment:fixed;} /gu%YQ[T9lCn;\
background-position 设定背景图片或背景颜色开始显示的位置，取值格式：e$y@STm&_C)m
top,buttom,left,right,center(用关键字)
#q3BV)YS-?*b 70px 10px(用长度值)
uR*lT&T-G+t 50% 30%(用百分比) BODY{background-position:right top;}
1tD/q3t8y!R5_ q BODY{background-position:50px 10px;}c5Q2A+D"M
BODY{background-position:20% 50%;} ,}Bc2k]
background 定义背景综合属性，不要求顺序，各属性值以空格分开。 BODY{background:#ffcc00 url(/bg.jpg) fixed center}
*^x/yQl4t&v&M 字型类
-mZt\PJ font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。 P{font-family:宋体,楷体,黑体,"Time New Rom";} |!DQPd7x1K
font-style 设定字型样式：Normal(正常),italic、objlique(斜体) P{font-style:italic;}
"X8X/h/aQsZT font-variant 取值：Normal(默认)，small-caps(如果是中文字型则将字型缩小显示，如果是英文则全部改为较小的大写) H3{font-variant:small-caps;} sl XnfMJ
font-weight 设定字体粗细，取值有：+O!q*r(mr~&b/h)P/J.r
Normal(默认),bold,lighter,border,100,200...900z;k@a)LAOR#jn$ju
由于浏览器支持程度不同，一般只用normal和bold两种属性。 P{font-weight:bold;} 1D}\Q(Y p#Z,MA
font-size 设定字体的大小；/J2i6P.QM
绝对大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;6Mz B u:A|d J)F F
相对大小：larger,smaller;7kd{i4OF
数字表示可用单位：磅(pt),像素(px),英寸(in),厘米(cm);{8][.R7_K;xo
亦可用百分比表示。 H2{font-size:36pt;}N"_"I:e6r9I{3|R3R._
P{font-size:200%;}
(G&fj8uV font 设定字型的综合属性，其顺序如下：
_0P.Xe4`(u {font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
|/b6o"M/e#_3O|o v5H 文字类 e7J cRLC{2O
letter-spacing 设定文字间距。 P{letter-spacing:5pt;}
V s Uvo"~U*sG text-decoration 设定文字加上下划线、删除线等效果：
4tRX\}/H none(无)c*Z&PR c1j
underline(下划线)
V\D(K7v2KO&v/[,@ overline(上划线)w ^;u)l(xE\+s8rX L
line-through(删除线) IPQ GU8?co
vertical-align 设定文字或图片垂直方向的对齐方式：
+en n4I'hPX baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。 bp S _Jt^@VF
text-transform 转换英文字母大小写：JI j*~'B[l|
y/P8F
none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。
xV
Xnk|m[ text-align 设置文字的水平对齐方式：8|'Y ^l4r)G(C
left:左对齐 right:右对齐 center:水平居中 justify:左右对齐。 hj;O
sL I1k[u
text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排。 #u5af2ZbR2Y-F1n
line-height 设定行高，声明方式有标准行高、固定值表示法、百分比行高、字型大小比例行高等。

]pAsS[#i 列表类
`/\'T~1g list-style-type 有序列表的编号方式（供<OL>标记使用）：
?o0O |-H none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母。 z0is1H$V\6`k
list-style-type 无序列表的符号样式（供<UL>使用）：?+v9PN9uIg
none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号。 0KF[`F| NVe6~;vH
list-style-image 无序列表的自定义符号样式：6lDX*F`T1m3G
格式：url(图片名称) UL{list-style-imag:url(/dd.gif);} 3Zz:AaW)TAn
list-style-position 设置列表清单符号缩排属性：
w~s%t#r~ outside:凸排 inside:缩排 UL{list-style-imag:url(/dd.gif); list-style-position:outside;}
3kw"E(JV5lo5s^ list-style 列表清单项目的综合设定，属性之间用空格隔开。 UL{list-style-imag:url(/dd.gif) inside;} !vH$Y*B"Ql)J]
边界及其相关类 MT)z6U {Z5~pTNJ'L
margin 标记元素边界值的综合设定。（其规则见右边范例）
1eA/p m _'p.]` 亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值，其顺序为上、右、下、左边界，如：DIV{margin:12pt 15pt 20pt 16pt;} Uo%V}-j
声明3个值，其顺序为上、右、下，缺少的左边界取其对边（右），如：DIV{margin:12pt 15pt 16pt;}T)?te:e8eG8X
声明2个值，其顺序为上、右，缺少的下、左边界取其对边，如：DIV{margin:12pt 15pt;}(y+{y/w},ET6_
声明1个值，则4个边界同一个值，如：DIV{margin:15pt;} M u#l+Rz
padding 设定标记内容与标记边框之间的留白的综合设定（规则见margin属性的范例）。 也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。 B D
xBq-m @F}
border-width 标记元素边框宽度的综合设定（规则类似于margin属性）。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值。
5X't+PiK border-color 标记元素边框颜色的综合设定（规则类似于margin属性）。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值。 4F wMZ,B#t$](Pv
border-style 标记元素边框样式的综合设定（规则类似于margin属性）。边框样式有solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值。
c#u
f3Bg'a{W,U border 标记元素4个边框的综合设定，可以分别声明边框宽度、边框样式、和边框颜色。 DIV{border:5pt solid #ff0000;}
/xE!v@
b%uh width 设定标记元素的宽度。
7km8t9]7R-d GM#x7b`JC height 设定标记元素的高度。 %@:R["j;K
float 设定标记元素与文字间的相对位置（文字绕排方式）。取值： r6~yYk,PH8D
none:以默认方式显示；0@]`8Ow6x
left:标记元素靠左，文字在右边绕排；
[`dG"eT
right:标记元素靠右，文字在左边绕排；
|}(lLW3z ^ clear 设定标记元素与文字间的相对位置（与float不同的是标记元素两边都不绕排）。取值：oAZ*Ce8@H{/E
none:以默认方式显示；
%GW&gU3_\*A!jo&Y left:标记元素靠左，右边无文字绕排；r8c,mq-?e
right:标记元素靠右，左边无文字绕排；
.d"S2iKj'q 其他类
zn i)Uf!L'BFl@ z-index 设定标记元素的堆叠层次，取值为整数，也可以是负数，数值大的在上层。 Og.J[ bYZP
visibility 设定标记元素是否可见，取值有：xs7ax |w t
inherit:取默认值 visible:可见 hidden:不可见（隐藏）

查看完整版本: 使用Dreamweaver来详细了解CSS的多样性