常用CSS属性说明
2009-08-20 16:14
232 查看
很早就听人说了，现在做网页都用DIV+CSS，但自己以为都差不多呢，今天试了试，才感觉到PHPChina 开源社区门户|'n!o�k&q#Ff
它们的强大，呵呵。布局好掌握，但关键的CSS
属性太多，在此就摘部分常用以备不防之用。PHPChina 开源社区门户m;Z-F+{ x4zx
@p fS5L[0
PHPChina 开源社区门户 }x a{gx[
font:12px Tahoma
；PHPChina 开源社区门户1E:wwc0m
这里使用了缩写，完整的代码
应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
jF2V)X$Z0
n)Y$b"?7{�B"{o.O0
margin:0px
；PHPChina 开源社区门户T7w�F4I S bN3C!a
也使用了缩写，完整的应该是：
PL%rj Q&} Y&Q0
PHPChina 开源社区门户U'a1Cw9f8y
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0pxPHPChina 开源社区门户%FY2OZU+c`*o
或PHPChina 开源社区门户 v'G4c@$b3W4sU ^
margin:0px 0px 0px 0px
4CS2E+o-f%Q;z:A0
PHPChina 开源社区门户6hZ9L'^A|4k:x V r
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
@O6Ic)n R0@*d0
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，PHPChina 开源社区门户�Y[�j+r u y&qHp^y
5ZB3rh7]/7yV8B0
另外还有以下几种写法：
(L pqH qK9}0
margin:0px auto；
jU8b2T1cgHLo0
说明上下边距为0px，左右为自动调整；
1oGv,u8a`5N4c P0
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，PHPChina 开源社区门户
nsQ,l(bb;N
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。PHPChina 开源社区门户1c�A%Q&E/r
E^"Z`%H|_e0
text-align:centerPHPChina 开源社区门户t�H6v0s$i(wp
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。PHPChina 开源社区门户I&GR$k2~E2/$r } @
PHPChina 开源社区门户a]-[ e./c _
background:#FFFPHPChina 开源社区门户 lqCB+J)C�A
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
n%i
W8| IEH0
background可以用来给指定的层填充背景色、背景图片
，以后我们将用到如下格式：
oo"m q i.I0
background:#ccc url('bg.gif') top left no-repeat；PHPChina 开源社区门户 ]s,m ~+G]D/jA}b
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
B-qV�e!Va"Y [2ae0
top left
PHPChina 开源社区门户(|Cb*Y$N _`
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
pY Q+Fy#qN0
top/right/left/bottom/center
7CyOc ]D/L!o(I0
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
?&o
z T}"gKw0
background:url('bg.gif') 20px 100px;
+w N g"I1mY4|W0
表示X座标为20像素，Y座标为100像素的精确定位；
Q4z)P4YI0
repeat/no-repeat/repeat-x/repeat-y
nBva b-Z0
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
IBZT
s0c*h0
k-V0fP)X`4mq0
height / width / colorPHPChina 开源社区门户.u#} ~4T/|K*l,^
分别表示高度(px)、宽度(px)、字体颜色(HTML
色系表)。PHPChina 开源社区门户,|?�npQ v"J
$l5W)q u,y4@0
4、如何使页面居中？PHPChina 开源社区门户$fc$d VD0a(MU-h
PHPChina 开源社区门户9D9s~4B C ~1x$EY
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
j,q5w*j5w#hWw2Bk3M4LV0
是因为我们在#container中使用了以下属性：
+YI"H I/ p7f0
margin:0 auto;
8Z Yqqy
t#BE._0
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
1c#};}J%lD D:U}0
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
DyjO5_�]0
通过margin:auto我们就可以轻易地使层自动居中了。
RGd9R3f+S0
"ou{A``
_0
3qe"b3I CocF+@
G]R0
还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID
"时，在CSS对应的设置语法则是#divID{}
，如果在HTML中定义为class="divID"
时，则在CSS中对应的设置语法是.divID。
&N?
?F ^,q0
PHPChina 开源社区门户+SXQZ!Z k8N F
如果id="divID"
这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}
，同样，如果是包含在class="divID"
这个层中时，则设置语法应该是.divID img {}
，这一点希望大家要分清楚了。PHPChina 开源社区门户 q
Hzp2uA
9y:wW/[B*n0
另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}
就可以了。所有的CSS代码都应该写在大括号{}
中。PHPChina 开源社区门户X(jG
OTS x#w%c8x
j
g |&dWW0
PHPChina 开源社区门户)Au b`+{ S+B
这一节里面，主要就是想告诉大家如何使用好border
和clear
这两个属性。PHPChina 开源社区门户0b'tB,]4s!u
PHPChina 开源社区门户F6jGS#~�u/e0z
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：
b ?*cw0A8`r9` HC0
<div style="border-bottom:1px dashed #ccc"></div>
PHPChina 开源社区门户
s7p`"Yuj-i+O&^4M
PHPChina 开源社区门户d`
U/Jh-yO:[
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
m$Ys1fI(KQ} y b0
k0@M xe-C!q;Fo0
<div id="banner"></div>
PHPChina 开源社区门户qv%~'K
aE
-_[K;D/j5Om0E0
以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：
0UPkTYwHA0
PHPChina 开源社区门户 O }JE F{:Z
#banner {
O L}9a8gXW0
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
E J A
h1?{8M6vo(p/z0
width:730px; /*设定层的宽度*/PHPChina 开源社区门户Z~eg)F8]6bl)pk
margin:auto; /*层居中*/
L7Wm2W*I0
height:240px; /*设定高度*/
&v/| ~4V S0
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
:j�bd*[a/eE,YnO0
clear:both /*清除浮动*/
1i@had] y+R0
}
PHPChina 开源社区门户1@7}
p _F
M]G7v^ g6_}0
通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。
@ J&u*Y l:m0
3W{)U6[ Qk2U{2q5q0
另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。PHPChina 开源社区门户 H!W`~F:a
6K$s*E#z-R-F~o0
W9O.`l"Vl{'Z0
CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。
它们的强大，呵呵。布局好掌握，但关键的CSS
属性太多，在此就摘部分常用以备不防之用。PHPChina 开源社区门户m;Z-F+{ x4zx
@p fS5L[0
PHPChina 开源社区门户 }x a{gx[
font:12px Tahoma
；PHPChina 开源社区门户1E:wwc0m
这里使用了缩写，完整的代码
应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
jF2V)X$Z0
n)Y$b"?7{�B"{o.O0
margin:0px
；PHPChina 开源社区门户T7w�F4I S bN3C!a
也使用了缩写，完整的应该是：
PL%rj Q&} Y&Q0
PHPChina 开源社区门户U'a1Cw9f8y
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0pxPHPChina 开源社区门户%FY2OZU+c`*o
或PHPChina 开源社区门户 v'G4c@$b3W4sU ^
margin:0px 0px 0px 0px
4CS2E+o-f%Q;z:A0
PHPChina 开源社区门户6hZ9L'^A|4k:x V r
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
@O6Ic)n R0@*d0
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，PHPChina 开源社区门户�Y[�j+r u y&qHp^y
5ZB3rh7]/7yV8B0
另外还有以下几种写法：
(L pqH qK9}0
margin:0px auto；
jU8b2T1cgHLo0
说明上下边距为0px，左右为自动调整；
1oGv,u8a`5N4c P0
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，PHPChina 开源社区门户
nsQ,l(bb;N
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。PHPChina 开源社区门户1c�A%Q&E/r
E^"Z`%H|_e0
text-align:centerPHPChina 开源社区门户t�H6v0s$i(wp
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。PHPChina 开源社区门户I&GR$k2~E2/$r } @
PHPChina 开源社区门户a]-[ e./c _
background:#FFFPHPChina 开源社区门户 lqCB+J)C�A
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
n%i
W8| IEH0
background可以用来给指定的层填充背景色、背景图片
，以后我们将用到如下格式：
oo"m q i.I0
background:#ccc url('bg.gif') top left no-repeat；PHPChina 开源社区门户 ]s,m ~+G]D/jA}b
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
B-qV�e!Va"Y [2ae0
top left
PHPChina 开源社区门户(|Cb*Y$N _`
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
pY Q+Fy#qN0
top/right/left/bottom/center
7CyOc ]D/L!o(I0
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
?&o
z T}"gKw0
background:url('bg.gif') 20px 100px;
+w N g"I1mY4|W0
表示X座标为20像素，Y座标为100像素的精确定位；
Q4z)P4YI0
repeat/no-repeat/repeat-x/repeat-y
nBva b-Z0
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
IBZT
s0c*h0
k-V0fP)X`4mq0
height / width / colorPHPChina 开源社区门户.u#} ~4T/|K*l,^
分别表示高度(px)、宽度(px)、字体颜色(HTML
色系表)。PHPChina 开源社区门户,|?�npQ v"J
$l5W)q u,y4@0
4、如何使页面居中？PHPChina 开源社区门户$fc$d VD0a(MU-h
PHPChina 开源社区门户9D9s~4B C ~1x$EY
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
j,q5w*j5w#hWw2Bk3M4LV0
是因为我们在#container中使用了以下属性：
+YI"H I/ p7f0
margin:0 auto;
8Z Yqqy
t#BE._0
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
1c#};}J%lD D:U}0
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
DyjO5_�]0
通过margin:auto我们就可以轻易地使层自动居中了。
RGd9R3f+S0
"ou{A``
_0
3qe"b3I CocF+@
G]R0
还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID
"时，在CSS对应的设置语法则是#divID{}
，如果在HTML中定义为class="divID"
时，则在CSS中对应的设置语法是.divID。
&N?
?F ^,q0
PHPChina 开源社区门户+SXQZ!Z k8N F
如果id="divID"
这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}
，同样，如果是包含在class="divID"
这个层中时，则设置语法应该是.divID img {}
，这一点希望大家要分清楚了。PHPChina 开源社区门户 q
Hzp2uA
9y:wW/[B*n0
另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}
就可以了。所有的CSS代码都应该写在大括号{}
中。PHPChina 开源社区门户X(jG
OTS x#w%c8x
j
g |&dWW0
PHPChina 开源社区门户)Au b`+{ S+B
这一节里面，主要就是想告诉大家如何使用好border
和clear
这两个属性。PHPChina 开源社区门户0b'tB,]4s!u
PHPChina 开源社区门户F6jGS#~�u/e0z
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：
b ?*cw0A8`r9` HC0
<div style="border-bottom:1px dashed #ccc"></div>
PHPChina 开源社区门户
s7p`"Yuj-i+O&^4M
PHPChina 开源社区门户d`
U/Jh-yO:[
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
m$Ys1fI(KQ} y b0
k0@M xe-C!q;Fo0
<div id="banner"></div>
PHPChina 开源社区门户qv%~'K
aE
-_[K;D/j5Om0E0
以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：
0UPkTYwHA0
PHPChina 开源社区门户 O }JE F{:Z
#banner {
O L}9a8gXW0
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
E J A
h1?{8M6vo(p/z0
width:730px; /*设定层的宽度*/PHPChina 开源社区门户Z~eg)F8]6bl)pk
margin:auto; /*层居中*/
L7Wm2W*I0
height:240px; /*设定高度*/
&v/| ~4V S0
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
:j�bd*[a/eE,YnO0
clear:both /*清除浮动*/
1i@had] y+R0
}
PHPChina 开源社区门户1@7}
p _F
M]G7v^ g6_}0
通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。
@ J&u*Y l:m0
3W{)U6[ Qk2U{2q5q0
另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。PHPChina 开源社区门户 H!W`~F:a
6K$s*E#z-R-F~o0
W9O.`l"Vl{'Z0
CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (转)DIV+CSS布局中常用到的属性、参数及说明
- css中position属性的static,relative,absolute,fixed简要说明
- Flex Datagrid常用属性说明
- Shape的简单使用（常用属性说明）
- css常用属性
- CSS的常用滤镜(filter)属性及语句大全
- Css的filter常用滤波器属性及语句大全
- css 常用属性
- iOS中常用属性的关键字的使用说明
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
- css常用属性整理
- CSS常用属性
- CSS: CSS常用的文本样式属性
- Css的filter常用滤波器属性及语句大全
- css常用属性之文本属性
- 常用css属性
- css常用样式属性详细介绍
- css常用属性以及动画效果代码
- DELPHI常用组件常见属性说明
- 推荐个Css的filter常用滤波器属性及语句大全