二.颜色
承接上一篇文章,关于颜色方面还有一些补充,现整理如下:
- 透明度alpha
alpha=1时是完全不透明的
alpha的值越低图片越透明
相当于同时有颜色和图片的时候,alpha=1则完全显示颜色,alpha=0则完全显示图片
透明度放在最后来表示,如rgba(a,b,c,0.47),hsla(a,b,c,0.47),十六进制则#ff000078
三.字体font-family
制定多个字体的时候用逗号隔开,因为浏览器不一定有指定字体的样式,所以会从逗号前的第一个字体样式开始检索,浏览器会选择设备上有的字体进行展示
serif衬线体/sans-serif无衬线体:并不是特定的字体而是通用字体组
衬线体存在笔锋(如宋体),无衬线体是圆润的字体(如微软雅黑)
在字体组里最后一定要加上一个字体组,这样电脑最后会选择字体组中的一种去现实,可以避免结果出现的字体超出自己的预期的情况
[注意]在中英文混排的情况下,最好是将英文字体写在中文字体前。
原因是,如果把中文字体写在英文字体前,页面的所有英文字体都会应用中文改字体的形式,相反如果英文在前,相当于规定了英文的字体,而中文字体则会根据写在英文字体后的这一个字体形式表现出来
如果想使用自己指定的系统内可能没有的字体,可以通过带链接的方法使用这种字体(使用web-font)
此外,因为中文字体包较大,在使用时需要进行裁切,仅仅在字体包内放页面需要用到的文字即可。
- 字体大小font-size
字体的大小有三种指定方法
①关键词 small,medium,large
②长度 px,em
③百分数 (相对父级元素字体的大小,父级×百分数)
- 文字效果
斜体,font-style:italic
字的粗细,font-weight(100-900)
其中normal是400,bold是700可以直接书写
必须要使用的字体支持有多种字重的情况下,使用不同的字重才会达到不同粗细的效果,否则就只有normal和bold的常规和加粗的区别
- 行高line-hight
两行线文案的距离,行高是字身,字体大小的倍数。
推荐使用行高1.6
- 文字间距letter spacing
word spacing
- 文本装饰
下划线/删除线/上划线
- HTML里对空白符的处理
多个连续的换行会被合并成一个,通过CSS里的white-space去控制空白符和换行
normal会合并空格
nowrap强制不换行
pre保留所有的空格和换行
pre-wrap保留空格的情况下,每行显示不下时自动换行
pre-line合并空格担保留换行,空格处多个会合并成一个
三.调试CSS
右键页面,选择检查,就可以得到调试框,可以看到用到的所有选择器和相关值。
在别的网站看到比较中意的样式的时候,也可以通过调试的页面直接去寻找他人网页的一些字体样式排版等等