css个使用技巧【DOC精选】.docVIP

Css26个使用技巧 　　1. 文字的水平居中 　　将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center; 　　2. 容器的水平居中 　　先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 　　div#container { 　　width:760px; 　　margin:0 auto; } 　　3. 文字的垂直居中 　　单行文字的垂直居中，只要将行高与容器高设为相等即可。 　　比如，容器中有一行数字。 　　 div id=container1234567890/div 　　然后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产生作用的语句： 　　lt; ![endif]--gt; 　　还可以区分各种不同的IE版本： !--[if lte IE 6] - targets IE6 and below -- 　　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{ } 11. IE专用语句：方法二 除了IE6以外，所有浏览器都不能识别属性前的下划线。而除了IE7之外，所有浏览器都不能识别属性前的*号，因此可以写出只有这两个浏览器才能读到的语句： 　　.elem