css100种常用技巧(20 个让你效率更高的css 代码技巧)

1、CSS字体属性简写规则

通常，CSS用于设置字体属性，如下所示：

但是你也可以把它们都写在一行上：

多好啊！只有一点需要注意：这种简写方法只有在同时指定了字体大小和字体系列属性时才有效。另外，

如果你没有设置字体粗细，字体风格和字体变化，它们将使用默认值，所以记住这一点。

2、同时使用两个类

通常，一个元素只能设置一个类，但这并不意味着不能使用两个类。事实上，你可以这样做：

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

3、CSS border的缺省值

您通常可以设置边界的颜色、宽度和样式，例如：

这一个显示边界为3像素宽，黑色和固体。但实际上你只需要在这里指定风格。

如果只指定了样式，其他属性将使用默认值。一般边框宽度默认为中等，一般等于3到4个像素；默认颜色是文本的颜色。如果这个值刚刚好，就不需要设置那么多了。

4、CSS用于文档打印

很多网站都有用于打印的版本，但其实没必要，因为可以用CSS来设置打印样式。

换句话说，您可以为页面指定两个CSS文件，一个用于屏幕显示，另一个用于打印：

第一行是显示，第二行是打印。注意媒体属性。

但是打印CSS应该写什么呢？可以像普通CSS一样设置。在设计的同时，你可以设置这个CSS显示CSS来检查它的效果。也许你会使用命令display: none来关闭一些装饰图片。

关闭一些导航按钮。要了解更多信息，您可以阅读“印刷差异”一文。

5、图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。

但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

这样调用它：

这时盒子的全宽应该是150点，这在除IE6之前的ie浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。