奇宝库 > 二十个最常用的css经典技巧是什么(使用css有哪些小技巧)

二十个最常用的css经典技巧是什么(使用css有哪些小技巧)

1、CSS字体属性速记规则

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

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

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

2.同时使用两个类。

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

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

3.CSS边框的默认值

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

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

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

4.CSS用于文档打印。

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

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

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

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

5.图片替换技巧

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

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

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

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

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

6.CSS盒子模型的另一个调整技巧

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

像这样称呼它:

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

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

#方框

{

本文来自网络,不代表本站立场,转载请注明出处: