app教程网 学习教程 css 常用(css技巧总结)

css 常用(css技巧总结)

1、CSS字体属性速记规则

通常,CSS用于设置字体属性,如下所示:

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

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

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

2.同时使用两个类

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

同时给P元素两个类,用空格隔开,这样text和side两个类的所有属性都会加到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也可以达到同样的目的,让它们显示同样的效果。

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