» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程(三)
 XML   RSS 2.0   WAP 

--> 本页主题: CSS实用教程(三) 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

CSS实用教程(三)

十二.控制BOX的样式 5e~ j  
z_)OWWdN  
样式表规定了一个容器BOX,它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 _#y(w%  
/ynKKJx<Y  
{+9^PC_hm;  
kHz+ ZY<?  
为了大家更好地理解这些属性的意义,以及互相之间的关系,请看下面这个图示: YFC0KU  
F|h ,a;2  
1.边框空白(MARGIN) >qh>Qm8w  
[E..VesrM  
如图所示,位于BOX模型的最外层,包括四项属性。 CguU+8 ]  
=F!",a~  
格式分别如下:  ?fqkM  
H *z0xxa  
·margin-top:顶部空白距离 gpO_0U4lQ]  
5Qm.ECXV  
·margin-right:右边空白距离 sEgeS9a{  
jmA{rD W  
·margin-bottom:底部空白距离 z wniS6R1  
EnsNO_"e|  
·margin-left:左边空白距离 ?@,f[U-  
GmEJ,%A  
空白的距离可以用带长度单位的数字表示。 ys"mP* wD  
.k!k-QO5La  
如果使用上述属性的简化方式margin,可以在其后连续加上四个带长度单位的数字,来分别表示margin-top、margin-right、margin-bottom、margin-left,每个数字中间要用空格分隔。 >R'VY "\  
VgC9'"|  
2.对象边框(BORDER) 07G*M ]  
QVZ6;/  
如图所示,位于边框空白和对象空隙之间,包括了七项属性。 Zia|`}peW  
?#{2?%_  
格式分别如下: Al-%j- j@-  
' zD;:wT  
·border-top:顶边框宽度 3<.j`JB@&  
r+W 8m?oi  
·border-right:右边框宽度 KohQ6q  
l4BO@   
·border-bottom:底边框宽度 }s)&/~6  
j/`qd(=B  
·border-left:左边框宽度 uD*s^  
C,e$g  
·border-width:所有边框宽度 G v2./<{#  
G<WDyoN=O  
·border-color:边框颜色 )V =K#MCK  
~9ls~$+*  
·border-style:边框样式参数 ,knI26Jh  
(R|FQdH  
其中border-width可以一次性设置所有的边框宽度,border-color同时设置四面边框的颜色时,可以连续写上四种颜色,并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序。 =K< I)2   
lIc9, |FL  
Border-style相对别的属性而言稍稍复杂些,因为它还包括了多个边框样式的参数: s!RA_%8/>  
M$hw(fC|m1  
·none:无边框。 DP'Dg /D  
XTXo xZ#w  
·dotted:边框为点线。 O.8m%ZjD  
u|*| RuY  
·dashed:边框为长短线。 O0*L9C/Q  
v+_Y72h*a  
·solid:边框为实线。 3V!&y/c<  
yt# ;3  
·double:边框为双线。 N#!1@!2BN  
FveK|-  
·groove:根据color属性显示不同效果的3D边框 5i-;bLm  
eeTaF!W  
·ridge:根据color属性显示不同效果的3D边框 r@ *A   
ITY!=>S-  
·inset:根据color属性显示不同效果的3D边框 ~W2&z]xD  
yacGJz^f=  
·outset:根据color属性显示不同效果的3D边框 g<tTZD\g  
i1\ /\^  
3.对象间隙(PADDING) Wk#-LkI  
G 9":z|  
如图所示,位于对象边框和对象之间,包括了四项属性。 /;m!>{({)  
.vF< 3p|  
基本格式如下: @[Qg}'i  
1gK3= Ys  
·padding-top:顶部间隙 /1 %0A  
}ucg!i3C  
·padding-right:右边间隙 84\o7@$#  
Nmq5Tv  
·padding-bottom:底部间隙 =zGz|YI*?  
WG r\R  
·padding-left:左边间隙 ? NK} q\$  
)F2tV ]k\  
和MARGIN类似,PADDING也可以用padding一次性设置所有的对象间隙,格式也和MARGIN相似,不再一一列举了。

[楼 主] | Posted: 2006-04-04 13:45 顶端
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子



十三.显示控制样式 A/aQpEb%  
LOzKpvGl  
基本格式如下: j=4>In?x  
"(GeW286k  
display: 参数 wl9icrR>  
y0]O 6.{  
参数取值范围: G= e[TR)i  
1uMdgrJRR  
·block(默认):在对象前后都换行 } d6^  
eH6cBX#P.  
·inline:在对象前后都不换行 dZ Z/(oE>  
[E1I?hfJ  
·list-item:在对象前后都换行,增加了项目符号 u)-l+U.  
3E-&8x7uYR  
·none:无显示 J .d<5`7   
9"TPDU7"  
十四.空白控制样式 Sb.;$Be5g  
t[Q\T0E  
基本格式如下: ~7g6o^A>  
`'`XB0vb  
空白属性决定如何处理元素内的空格。 &/p 9+gd  
%VCHM GP=  
white-space: 参数 GU`2I/R  
6*tGf`Pfdw  
参数取值范围: cqDnZ`|6  
wB@A?&UY  
normal:把多个空格替换为一个来显示 Yhfk{CI  
xp = ]J UQ  
pre:忠实地按输入显示空格 V! p;ME  
r.[kD"l  
nowrap:禁止换行 Zr3KzY9  
TD<.:ul]  
但要注意的是,write-space也是一个块级属性。 :B im`mHl  
J c*A\-qC.  
.全文完.

[1 楼] | Posted: 2006-04-04 13:45 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.015080(s) query 5, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息
51La