常用CSS属性说明

    很早就听人说了，现在做网页都用DIV+CSS，但自己以为都差不多呢，今天试了试，才感觉到PHPChina 开源社区门户|'n!o�k&q#Ff
它们的强大，呵呵。布局好掌握，但关键的CSS 属性太多，在此就摘部分常用以备不防之用。PHPChina 开源社区门户m;Z-F+{ x4zx

@p fS5L[0 PHPChina 开源社区门户 }xa{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�F4IS bN3C!a
也使用了缩写，完整的应该是：

PL%rjQ&} 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 Vr

顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
@O6Ic)n R0@*d0 以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，PHPChina 开源社区门户�Y[�j+ru y&qHp^y

5ZB3rh7]/7yV8B0 另外还有以下几种写法：
(L pqHqK9}0 margin:0px auto；
jU8b2T1cgHLo0 说明上下边距为0px，左右为自动调整；
1oGv,u8a`5N4cP0 我们以后将使用到的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"mq 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表示仅显示图片大小而不填充满整个层。
pYQ+Fy#qN0 top/right/left/bottom/center
7CyOc]D/L!o(I0 用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
?&o zT}"gKw0 background:url('bg.gif') 20px 100px;
+wNg"I1mY4|W0 表示X座标为20像素，Y座标为100像素的精确定位；
Q4z)P4YI0 repeat/no-repeat/repeat-x/repeat-y
nBvab-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$dVD0a(MU-h

PHPChina 开源社区门户9D9s~4BC~1x$EY

大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
j,q5w*j5w#hWw2Bk3M4LV0 是因为我们在#container中使用了以下属性：
+YI"HI/p7f0 margin:0 auto;
8ZYqqy t#BE._0 按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
1c#};}J%lD D:U}0 如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
DyjO5_�]0 通过margin:auto我们就可以轻易地使层自动居中了。
RGd9R3f+S0

"ou{A`` _0

3qe"b3ICocF+@ G]R0 还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID "时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID" 时，则在CSS中对应的设置语法是.divID。

&N? ?F ^,q0 PHPChina 开源社区门户+SXQZ!Zk8NF

如果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 OTSx#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; /*加入背景图片*/
EJA h1?{8M6vo(p/z0  width:730px; /*设定层的宽度*/PHPChina 开源社区门户Z~eg)F8]6bl)pk
 margin:auto; /*层居中*/
L7Wm2W*I0  height:240px; /*设定高度*/
&v/| ~4VS0  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中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。