CSS 字体属性和文本属性

1.CSS字体属性

CSS 字体属性（font）用于定义字体系列、大小、粗细、和文字样式（如斜体）。

1.1 字体系列

所谓字体系列简单的说就是使用哪种字体，比如宋体、微软雅黑等。

CSS 使用 font-family 属性来定义文本的字体系列。

p { font-family: 微软雅黑;} 

div {font-family: Arial,"Microsoft Yahei", "楷体";}

注意点：

①字体可以使用引号包裹，也可以不加引号，但一般情况下,如果有空格隔开的多个单词组成的字体，加引号，比如"Microsoft Yahei"；

②各种字体之间必须使用英文状态下的逗号隔开 . 

③尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示 

④包含多个字体时，浏览器会从前往后解析，遇到认识的就停下使用该字体，如果解析完都没有认识的，那么就使用浏览器默认字体。

1.2 字体大小

CSS 使用 font-size 属性定义字体大小。 

p { font-size: 20px; }

注意点：

①px（像素）大小是我们网页的最常用的单位 

②em是根据父元素的大小来显示的  1em表示的是父元素1个字符的大小，比如父元素大小是20px，那么1em=20px

③rem是根据根元素 html 的大小来显示的  1rem表示的是根元素1个字符的大小，比如根元素是16px，那么1rem=16px

④谷歌浏览器默认的文字大小为16px 

⑤不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

1.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。 

p { font-weight: bold; } 
或
p { font-weight: 700; } 

注意点：

①font-weight: bold;或者font-weight: 700;都表示把字体加粗； 

② bold 和 bolder 设置的字体的粗细都是一样的。因为bold的粗体已经是最大值了，所以就算设置bolder，其效果也没明显区别

③bolder存在的意义就是 告诉浏览器我是更粗的字体，在语义化上面，比bold更加强烈

④font-weight: normal;或者font-weight: 400;都表示把粗体变细

⑤font-weight: lighter;或者font-weight: 300;设置更细的字体

⑥字体设置到300就已经是浏览器显示最细的字体了，所以设置再小的数字的字体，也不会有什么效果了。

⑦实际开发时，我们更喜欢用数字表示粗细，其中，常用的就是400（normal）和700（bold）了

1.4 文字样式 

CSS 使用 font-style 属性设置文本的风格。 

 p { font-style: italic; }

注意点：

①<i></i>和<em></em>标签以及font-style: italic;或者font-style: oblique;都表示斜体的意思

②font-style: normal;可以把斜体变成正常，这个非常常用

1.5 字体复合属性 

字体属性可以把以上文字样式综合来写, 这样可以更节约代码：

p { font: font-style font-weight font-size/line-height font-family; }

注意点：

①使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 
② 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用 

1.6 字体属性总结

2.文本属性 

CSS 文本属性（text）可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

2.1 文本颜色

color 属性用于定义文本的颜色。 

div { color: green; }

注意点：

颜色表示有三种方式： 

 ①使用red这种英文单词表示； ②使用十六进制方法表示：比如#1ECA5F；③使用rgb(r,g,b)表示：正整数取值为0~255

②小技巧：利用QQ截图，快捷键为：ctrl+Alt+A，然后用鼠标移动到需要取色的位置，按ctrl+C 可以取到十六进制的颜色；按C键 可以取到rgb的颜色

③开发中最常用的是十六进制. 

2.2 对齐文本

 text-align 属性用于设置元素内文本内容的水平对齐方式。 

p { text-align: center; }

注意点：

①文本默认为左对齐，即text-align:left;

②把文本表示成右对齐，即text-align: right;

③ 把文本表示成居中对齐，即text-align: center;

④实现两端对齐效果 ，即text-align: justify，只针对文本有效

⑤text-align中的left、right、center对img同样有效

2.3 文本缩进 

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。 

div { text-indent: 10px; } 
或
div { text-indent: 2em; } 

注意点：

①通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

②缩进一般为2个字的大小，所以直接使用单位em来表示，能够精确而方便的缩进2个字。 

2.4 行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

p { line-height: 30px; }

注意点：

①line-height中的值越大，行间距越大 ；

②行高一般设置的比字体大小要大一点，不然就会挤在一起 

③还有一个作用是可以让文本垂直居中

2.5 装饰文本 

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div { text-decoration：underline； }

注意点：

①默认是没有装饰线的，即属性值为none，这是最常用的，比如<a>标签默认有下划线，但是网页中的链接基本没有下划线，那么这就需要使用这个属性将其去掉；

②text-decoration:undeline 表示下划线，也是比较常用的；

③text-decoration:overline 表示上划线，几乎不用；

④text-decoration:line-through 表示删除线，不常用。

2.6 文本属性总结