二十个最常用的CSS经典技巧

1、CSS字体属性简写规则

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

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

太好了！只有一点需要注意：这种简写方法只有在同时指定了字体大小和字体系列属性时才有效。此外，如果你不设置字体粗细、字体样式和字体变化，它们将使用默认值，所以请记住这一点。

2、同时使用两个类

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

同时，P元素被赋予两个类，中间用一个空格隔开，这样文本和边类的所有属性都将被添加到P元素中。如果两个类的属性有冲突，那么后一个有效，即CSS文件中放在后面的类的属性有效。

3、CSS border的缺省值

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

该位将边框显示为3像素宽、黑色和实心。但实际上你只需要在这里指定风格。

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

很多网站都有用于打印的版本，但实际上并不需要，因为可以用CSS来设置打印样式。

也就是说，您可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

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

但是打印出来的CSS应该写什么呢？可以像设计普通CSS一样设置。在设计的同时，你可以设置这个CSS来显示CSS来检查它的效果。也许你会用display: none这个命令关闭一些装饰图片，关闭一些导航按钮。要了解更多信息，您可以阅读“印刷差异”一文。

5、图片替换技巧

一般建议用标准的HTML来显示文字而不是图片，这样不仅速度快，可读性也更强。但是如果要用一些特殊的字体，就只能用图片了。

例如，如果您想出售整个图标，您可以使用此图像：

当然可以，但是对于搜索引擎来说，相对于正常字符，他们对alt中的备选字符兴趣不大。这是因为很多设计师把很多关键词放在这里欺骗搜索引擎。所以方法应该是这样的：

但是后来就没有特别的字体了。为了达到同样的效果，可以这样设计CSS:

注意形象的高度从形象高度变成了现实高度。在这里，图片将作为背景显示，而真实的文字将出现在屏幕左侧的2000个点上，并且由于缩进了-2000个像素而不可见。但对于合上图的人来说，可能看不到全部。这一点要注意。

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

这个盒子模型的调整主要是针对IE6之前的IE浏览器，这些浏览器是以边框宽度和空白为元素宽度来计算的。例如：

像这样称呼它：

此时方框的全宽应该是150点，除了IE6之前的ie浏览器，其他浏览器都是正确的。但是在IE5这样的浏览器上，它的全幅还是100点。可以用前人发明的盒子平差法来处理这种差异。

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

#方框

{