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


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

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




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

CSS实用教程(三)

十二.控制BOX的样式 a8w/#!^34  
DH IC:6EY  
样式表规定了一个容器BOX,它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 [H4)p ,R  
B!j7vXM2  
;N(9n X}%)  
woyn6Z1JQ  
为了大家更好地理解这些属性的意义,以及互相之间的关系,请看下面这个图示: *xV  
z%lLbKSe  
1.边框空白(MARGIN) (q yT,K8  
Rlwewxmr  
如图所示,位于BOX模型的最外层,包括四项属性。 +3d.JQoKl  
v$d^>+Y#  
格式分别如下: !+o`,KTYp  
p|0ZP6!|  
·margin-top:顶部空白距离 JqTR4[`Z\  
;N?raz2mEi  
·margin-right:右边空白距离 EvGKcu  
Y'U]!c9  
·margin-bottom:底部空白距离 s`dwE*~  
YZ(tjIgQ  
·margin-left:左边空白距离 [}Z!hq  
"lnI@t{o  
空白的距离可以用带长度单位的数字表示。 [~5<['G  
I&Z+FL&@f  
如果使用上述属性的简化方式margin,可以在其后连续加上四个带长度单位的数字,来分别表示margin-top、margin-right、margin-bottom、margin-left,每个数字中间要用空格分隔。 o?`^ UG-   
+Ua.\1"6  
2.对象边框(BORDER) 6}JW- sA  
S%IhpTSe6  
如图所示,位于边框空白和对象空隙之间,包括了七项属性。 h=o%\F4  
.vov ,J!Y  
格式分别如下: L g2z `uv  
<!a%GI  
·border-top:顶边框宽度 f\X7h6k8{  
e3=-7FU  
·border-right:右边框宽度 /#Lm)-%G  
8T"8C  
·border-bottom:底边框宽度 Z_ (P^/  
U}c05GiQw  
·border-left:左边框宽度 58[.]f~0  
d 6=Z =4w  
·border-width:所有边框宽度 Xu%8Q?]  
il~A(`+YO  
·border-color:边框颜色 3Bbd2[<W  
fp2uk3Bm[  
·border-style:边框样式参数 LNOz.2fr>  
I.{%e;Reg  
其中border-width可以一次性设置所有的边框宽度,border-color同时设置四面边框的颜色时,可以连续写上四种颜色,并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序。 4|/=]w  
!CUX13/0  
Border-style相对别的属性而言稍稍复杂些,因为它还包括了多个边框样式的参数: R=<uf:ca  
wvPS0]  
·none:无边框。 6I-Qq?L[H  
d 6zfP1lQ  
·dotted:边框为点线。 !BEl6h  
aB2t/ua  
·dashed:边框为长短线。 -^WW7 g`  
"#=WD  
·solid:边框为实线。 9PWqoz2c  
qU+q Y2S:  
·double:边框为双线。 C~c|};&%  
VL/KC-6  
·groove:根据color属性显示不同效果的3D边框 v 0D@`C  
P*3PDa@  
·ridge:根据color属性显示不同效果的3D边框 j)Y68fKK  
g$^I/OK?  
·inset:根据color属性显示不同效果的3D边框 =m/BH^|&W  
Q =#@g  
·outset:根据color属性显示不同效果的3D边框 :\IZ-  
7qEc9S@  
3.对象间隙(PADDING) k'PNfx\K  
fB`7f $[  
如图所示,位于对象边框和对象之间,包括了四项属性。 Ag_I'   
57`9{.HB  
基本格式如下: -b'a-?  
\>)#cEX5  
·padding-top:顶部间隙 K%(DRkj)  
baz~luM  
·padding-right:右边间隙 }J(o!2.  
x|U[|i,;  
·padding-bottom:底部间隙 # mW#K  
=O'>H](Q  
·padding-left:左边间隙 J:G~9~V^  
<XH,kI(%  
和MARGIN类似,PADDING也可以用padding一次性设置所有的对象间隙,格式也和MARGIN相似,不再一一列举了。

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




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



十三.显示控制样式 iqTGh*k  
y-=YXqj  
基本格式如下: eO?@K$I  
ZD t|g^  
display: 参数 $hE,BeQ  
3Q_L6Wj~  
参数取值范围: 7@l.ZECJ1  
=b[q<p\  
·block(默认):在对象前后都换行 D?6ah=:&R  
iIO_d4Z  
·inline:在对象前后都不换行 )9? ^;HS  
 ~N=$%C  
·list-item:在对象前后都换行,增加了项目符号 mCQn '{)  
U5pg<xI  
·none:无显示 U?sio%`(  
6O# xV:Uc<  
十四.空白控制样式 'D<84|w:1  
"j] r   
基本格式如下: |6y(7Ha  
ITf, )?|]Y  
空白属性决定如何处理元素内的空格。 sUTh}.[5  
"+GKU)  
white-space: 参数 R<FW?z*  
}!n90 9 L  
参数取值范围: >UDb:N[  
_q /UDf1  
normal:把多个空格替换为一个来显示 zy!mP  
_hbTxyj  
pre:忠实地按输入显示空格 6-vQQ-\  
&yt noj1L(  
nowrap:禁止换行 ZclZD{%8J  
yRGv{G[59  
但要注意的是,write-space也是一个块级属性。 7m +d;x2  
%L;;W,l$`)  
.全文完.

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

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



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