CSS字体属性、文本属性 ｜ 青训营笔记

一、CSS字体属性

 CSS字体属性用于定义字体系列、大小、粗细和文字样式

1.1 字体系列
 font-family属性定义文本的字体系列。示例如下:

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

1.1 字体大小
 font-size属性定义字体大小。示例如下：

    p { font-size: 20px;}

1.3 字体粗细
 font-weight属性设置文本字体的粗细。示例如下：

    p { font-weight: bold;}

 实际开发时更喜欢用数字表示粗细。

1.4 文字样式
 font-style属性设置文本的风格。示例如下：

    p { font-style: normal;}

 很少给文字加斜体；有时要给斜体标签改为不倾斜字体。

1.5 字体复合属性
 字体属性可以把以上文字样式综合来写。语法格式如下：

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

 必须按照上面的顺序书写。不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用。

二、CSS文本属性

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

2.1 文本颜色
 color属性用于定义文本的颜色。示例如下：

    div { color: blue;}

 最常用到的是十六进制。

2.2 对其文本
 text-align属性用于设置元素内文本内容的水平对其方式。示例如下：

    div { text-align: center;}

2.3 装饰文本
 text-decoration属性规定添加到文本的修饰，可以添加下划线、删除线这些。示例如下：

    div { text-decoration: overline;}

2.4 文本缩进
 text-indent属性用来指定文本第一行的缩进。示例如下：

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

 通过设置该属性，所有元素的第一行都可以缩进一个规定的长度。
 px指的是像素。em则是一个相对单位，是当前元素1个文字的大小。
 

2.5 行间距
 line-height属性设置行间距。示例如下：

    p { line-height: 26px;}