CSS基础教程3——字体和文字样式(上)

CSS基础教程3——字体和文字样式(上)

本节开始前先说一下CSS推荐的书写顺序：

1.浮动/display

2.盒子模型(margin padding border)以及宽度高度背景色

3.文字样式

字体大小

font-size:值;

值需要有单位例如：px等等。

字体粗细

font-weight:值;

取值有英文和数字normal(正常),bold(加粗)对应数字为400，700，数字型有100~900(取整百)九种，部分字体不显示部分取值(意思是除了两种特殊的取值以外，有可能部分数字增加不会改变字体粗细)。

字体斜体

font-style:值;

取值比较常用的有normal(正常);italic(倾斜)。

字体系列

font-family:值;

常见字体:无衬线字体(sans-serif).衬线字体(serif),等宽字体(monosapace),值可以写多个从左往右查找是否安装(值可以写多个，根据用户电脑中安装的字体从左到右查找直到配对为止)。

样式层叠问题

一个标签设置了相同的属性后面的会覆盖掉前面的，实际效果如下图：

可以看到<span>的样式先设置了颜色为红色，后又设置了一次为蓝色，由于样式层叠，前面的样式被后面的样式覆盖，因此展示出来的效果为后设置的效果。

字体font相关属性的连写

如果我们需要对字体的四种属性或者两种(只能是大小和字体系列)时，需要书写多个属性过于麻烦，因此可以采用属性连写，可以省略前两个值，取默认值(normal)。

font:style weight size family;

必须严格按照书写顺序书写！！！！

文本缩进

text-indent:值;

值可以为数字+px或者数字+em，推荐使用em，1em=当前font-size的大小。

使用px效果

使用em效果

想要文段开头固定缩进xx的距离就用px，想要文段开头缩进xx个字就用em。