前面我们介绍了好多关于文字的属性,因为都是描述文字是什么样式的,所以我们也可以把它们写在一起做一条属性,就是 font
,这种把许多调属性综合成为一条去写的方法,被称为复合属性或者快捷属性。
先来看一个例子:
p {font: italic 2em "Open Sans", sans-serif;}
那么看内容,我们大概也可以猜到,它等效于下面的写法:
p {font-style: italic;font-size: 2em;font-family: "Open Sans", sans-serif;}
这样写占的篇幅会比较小,文件体积相应的也能小一些,也算是比较方便阅读吧。当然,如果你想要查找某个特定属性的时候,并不如下面的写法方便。在新手期,我建议大家采用下面的写法,但是要能够读懂上面的写法。
那么这种复合属性,是不是我们只要把涉及到的属性的值写进去就行了呢?那么首先注意,它是使用空格进行分隔。然后这些属性的顺序还是要遵循一定规则的:
- 除了某些特殊情况,在复合属性
font
中必须同时设置font-size
和font-family
; font-style
和font-weight
必须在font-size
前面;line-height
必须紧跟在font-size
后面,并且在line-height
加上/
;font-family
必不可少,而且要放在最后;color
不能放在里面。
如果你能认真遵守以上规则,那么你就可以成功的少写几个字符,我们来演示一下:
p {font: italic bold 24px/1.2 serif;}
那么就是这个样子。然后要说的是,关于文字,还有一些其他属性,但是我们在中文中极少用到,所以在这里并没有讲。如果以后看到这个复合属性被写得非常长,里面有些内容自己不认识,也不要太过惊讶。
关于复合属性,文字的复合属性,因为规则略显复杂,所以很多时候我们更愿意选择分开去写。但是后面我们会遇到很多规则比较简单,十分好用的复合属性,甚至于我们都快以为那才是它的本体。
关于文字的基本样式,我们就聊出来了这么多东西,CSS 复杂么?其实不算是复杂,只是细致。想一想,我们在 Word 里面写文档,也都要对这些内容进行设置。现在只不过是换成了用代码去描述。既然是手写代码,就要求你知道,我们应该如何去描述。虽然现在的编辑器可以很智能地进行提示,可你也要知道每一个属性的值代表什么意思。
不过当我们翻山越岭走到现在,回头看一看发现也不过如此。所以呢,我们要读阅读教程,自己动手写一写,用一段时间,再回来看一看教程。某一天就忽然拨云见日,一下子理解了,通透了。
那么关于文字本身的样式,我们就学得差不多了,下一章开始,我们研究一些和文字有关的样式。
暂无评论内容