CSS使用技巧大全

　1. 文字的水平居中

　　将一段文字置于容器的水平中点，只要设置text-align属性即可：

　　text-align:center;

　　2. 容器的水平居中

　　先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。

　　div#container {

　　width:760px;

　　margin:0 auto;

　　}

　　3. 文字的垂直居中

　　单行文字的垂直居中，只要将行高与容器高设为相等即可。

　　比如，容器中有一行数字。

　　然后CSS这样写：

　　div#container {height: 35px; line-height: 35px;}

　　如果有n行文字，那么将行高设为容器高度的n分之一即可。

　　4. 容器的垂直居中

　　比如，有一大一小两个容器，请问如何将小容器垂直居中?

　　首先，将大容器的定位为relative。

　　div#big{

　　position:relative;

　　height:480px;

　　}

　　然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

　　div#small {

　　position: absolute;

　　top: 50%;

　　height: 240px;

　　margin-top: -120px;

　　}

　　使用同样的思路，也可以做出水平居中的效果。

　　5. 图片宽度的自适应

　　如何使得较大的图片，能够自动适应小容器的宽度?CSS可以这样写：

　　img {max-width: 100%}

　　但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为：

　　img {width: 100%}

　　6. 3D按钮

　　要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。

　　div#button {

　　background: #888;

　　border: 1px solid;

　　border-color: #999 #777 #777 #999;

　　}

　　7. font属性的快捷写法

　　font快捷写法的格式为：

　　body {

　　font: font-style font-variant font-weight font-size line-height font-family;

　　}

　　所以，

　　body {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 13px;

　　font-weight: normal;

　　font-variant: small-caps;

　　font-style: italic;

　　line-height: 150%;

　　}

　　可以被写成：

　　body {

　　font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

　　}

　　8. link状态的设置顺序

　　link的四种状态，需要按照下面的前后顺序进行设置：

　　a:link

　　a:visited

　　a:hover

　　a:active

　　9. IE条件注释

　　你可以利用条件注释，设置只对IE产生作用的语句：

　　< ![endif]-->

　　还可以区分各种不同的IE版本：