CSS使用技巧

想要精通CSS我们只能从最基础学起，下面我们来讲一些在CSS中的使用技巧

1. 文字的水平居中：将一段文字置于容器的水平中点，只要设置了text-align属性即可。eg：text-align:center。

2. 容器的水平居中：先为容器设置一个明确宽度，然后将margin的水平值设置为auto。

3. 文字的垂直居中：单行文字的垂直居中要将行高与容器高设为相等。

4. 容器的垂直居中：和文字的垂直居中一样，使用同样的思路，也可以做出水平居中的效果。

5. 图片宽度的自适应：使得较大的图片，能够自动适应小容器的宽度。

注意：IE6不支持max-width，所以遇到IE6时，要使用IE条件注释

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

7. font属性的快捷写法示例如下：

font快捷写法的格式为：

body 
{
font: font-variant font-weight font-size line-height font-style font-family;
}

8. link状态的设置顺序

link的四种状态分别为：

• a:hover
• a:active
• a:link
• a:visited

9. IE条件注释

我们可以利用条件注释，设置只对IE产生作用的语句，如：< ![endif]-->

10. 透明在CSS中，如果想要将一个容器设为透明，我们可以使用下面的代码：

#element 
{
-khtml-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}

11. CSS三角形：想要用CSS生成一个三角形我们首先需要先编写一个空元素，然后将它四个边框中的三个边框设为透明，剩下一个设为可见：

#triangle 
{
height: 0px;
width: 0px
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
}

12. 禁止自动换行：想要文字在一行中显示完成，而不要自动换行：

h2
{
white-space:nowrap;
}

13. 用图片替换文字

h5
{
background:url("h5-image.jpg") no-repeat;
width:600px;
height:60px;
text-indent:-89px;
}

14. CSS提示框：

a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}

15. 固定位置的页首：当页面滚动时，有时我们需要页首在位置固定不变，就可以使用以下代码：

body{ margin:0;padding:100px 0 0 0;}
div#header
{
left:0;
width:100%;
height:;
position:absolute;
top:0;
@media screen{
body>div#header{position: fixed;}
}
* html div#content{height:100%;overflow:auto;}
* html body{overflow:hidden;}

16. 在IE6中设置PNG图片的透明效果

#classname
{
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image.png', sizingMethod='crop');
background: url(image.png);