CSS实用技巧精选推荐

本页技巧目录：

1、CSS字体属性简写规则
2、FireFox移除超链接的虚线
3、让固定宽度的页面居中
4、隐藏水平滚动条
5、针对浏览器的选择器
6、同时使用两个类

1、CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

注意：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2、FireFox移除超链接的虚线

FireFox下，当你点击一个超链接时会在外围出现一个虚线轮廓。这很容易解决， 只需要在标签样式中加入 outline:none。

a{
outline: none;
}

3、让固定宽度的页面居中

为了让页面在浏览器居中显示， 需要相对定位外层div，然后把margin设置为auto。

#wrapper {

margin: auto;

position: relative;

}

4、隐藏水平滚动条

为了避免出现水平滚动条，在body里加入 overflow-x:hidden 。

body { overflow-x: hidden; }

当你决定使用一个比浏览器窗口大的图片或者flash时，这个技巧将非常有用。

   5、针对浏览器的选择器 

这些选择器在你需要针对某款浏览器进行css设计时将非常有用。

IE6及其更低版本

* html {}

IE7及其更低版本

*:first-child+html {} * html {}

仅针对IE7 

*:first-child+html {}

IE7和当代浏览器 

html>body{}

仅当代浏览器(IE7不适用)

html>/**/body{}

Opera9及其更低版本

html:first-child {}

Safari 

html[xmlns*=""] body:last-child {} 

要使用这些选择器，请将它们放在样式之前。 例如：

#content-box {

width: 300px;

height: 150px;

}

* html

#content-box {

width: 250px;

} /* overrides the above style and changes the width to 250px in IE 6 and below */

6、同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
<p class="text side">...</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写<p id="text side">...</p>也不能这样写