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版本：

　　10. IE6专用语句：方法一

　　由于IE6不把html视为文档的根元素，所以利用这一点，可以写出只有IE6才能读到的语句：

　　/* the following rules apply only to IE6 */

　　* html{

　　}

　　* html body{

　　}

　　* html .foo{

　　}

　　IE7专用语句则要写成

　　/* the following rules apply only to IE7 */

　　*+html .foo{

　　}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!