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


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

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




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

CSS实用教程(三)

十二.控制BOX的样式 ;DZj.| Sj+  
'NjeF&#6  
样式表规定了一个容器BOX,它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 E3S0u7 Es  
p%bMfi*T  
&*O'qOO<2  
P;gd!Yl<-  
为了大家更好地理解这些属性的意义,以及互相之间的关系,请看下面这个图示: {y@8E >y5$  
kl1Q:  
1.边框空白(MARGIN) jYAm}_?No  
INk|NEX  
如图所示,位于BOX模型的最外层,包括四项属性。 # 7d vT=  
d ?YSVmG  
格式分别如下: tNZZCdB  
QjpJIw  
·margin-top:顶部空白距离 vYLspZ;S  
&dw=jHt  
·margin-right:右边空白距离 @*6_Rp"@  
}NV<k  
·margin-bottom:底部空白距离 x=W s)&H_Y  
3ErV" R4"$  
·margin-left:左边空白距离 3_ E}XQd  
jL 3 *m  
空白的距离可以用带长度单位的数字表示。 zh?B-"O=5  
qOyS8tA.H  
如果使用上述属性的简化方式margin,可以在其后连续加上四个带长度单位的数字,来分别表示margin-top、margin-right、margin-bottom、margin-left,每个数字中间要用空格分隔。 X9" T(`  
 =/ !A  
2.对象边框(BORDER) Ut1s~b1  
 ]5ibg"{S  
如图所示,位于边框空白和对象空隙之间,包括了七项属性。 F$:mGyl5_  
;U tEHvE*  
格式分别如下: ` -W4/7  
*z~J ]  
·border-top:顶边框宽度 f R2,NKM@  
s1%2({wP  
·border-right:右边框宽度 R iLqMSq  
~7\`qH  
·border-bottom:底边框宽度 %$_?%X0=t  
[c=![ *}/  
·border-left:左边框宽度 ZiH4s|  
|NjyO>@Pa  
·border-width:所有边框宽度 $'a]l R  
%uP/v\l  
·border-color:边框颜色 ]@}@G[e#[  
= j l( Q  
·border-style:边框样式参数 "(+aWvb  
O=1 #KNS  
其中border-width可以一次性设置所有的边框宽度,border-color同时设置四面边框的颜色时,可以连续写上四种颜色,并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序。 @$!"}xDR'  
y dzvjp=  
Border-style相对别的属性而言稍稍复杂些,因为它还包括了多个边框样式的参数: qNkX:| j  
TjctK [db@  
·none:无边框。 SQw"mO  
1<M~ #  
·dotted:边框为点线。 z 7*mT}Q  
JQ\o[t  
·dashed:边框为长短线。 \5) ZI'q  
mj2sbRiSR=  
·solid:边框为实线。 Yd~Tzh  
%U97{y  
·double:边框为双线。 YdAC<,e&A  
-]MZP:s  
·groove:根据color属性显示不同效果的3D边框 4-xg+*()  
.-p?skm=a  
·ridge:根据color属性显示不同效果的3D边框 ! AL?bW  
(Z>vbi%  
·inset:根据color属性显示不同效果的3D边框 e(-Vp7vXG  
}e,*'mCC*  
·outset:根据color属性显示不同效果的3D边框 }/.b@`Dh;  
u O~MT7~[X  
3.对象间隙(PADDING) ]<E\J+5K  
9KZLlEk5O  
如图所示,位于对象边框和对象之间,包括了四项属性。 e&="5.ik  
6q^.Pg-Y  
基本格式如下: :WN*wd  
@1 )][r-7  
·padding-top:顶部间隙 N%QVkuCbM  
80O[pf*?  
·padding-right:右边间隙 H52] Zm  
s$OnQc2/  
·padding-bottom:底部间隙 c ]&|.~2&  
B976{;QvXV  
·padding-left:左边间隙 Ps7Bt(/  
]1n =O"vE  
和MARGIN类似,PADDING也可以用padding一次性设置所有的对象间隙,格式也和MARGIN相似,不再一一列举了。

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




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



十三.显示控制样式 Oi=c 6n  
S-\;f jh  
基本格式如下: !Z*2X ^  
uIkB&  
display: 参数 &v\  
{ ke}W  
参数取值范围: }x^q?;7xW  
ivKhzU+  
·block(默认):在对象前后都换行 Rs<li\GS  
8MH ZWi  
·inline:在对象前后都不换行 kCO`JAH#  
k<098F  
·list-item:在对象前后都换行,增加了项目符号 al9L+ruR  
 *TEgV  
·none:无显示 %B&y^mZv*\  
o+o'!)  
十四.空白控制样式 kDAPT_Gid  
tp-PE?  
基本格式如下: [f9U9.fR  
zoUM<6q  
空白属性决定如何处理元素内的空格。 FaOfe]F  
 0(2r"Hi  
white-space: 参数 p,hDZea  
9U[ A   
参数取值范围: \zA G#{  
qHT_,\l2  
normal:把多个空格替换为一个来显示 H B}!Lf#*P  
2m]C mdV^  
pre:忠实地按输入显示空格 ev}lb+pr)_  
.d) X.cO  
nowrap:禁止换行 8[zux4<m  
owz6j:  
但要注意的是,write-space也是一个块级属性。 @+OX1-dd/w  
V&i/3g  
.全文完.

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

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



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