CSS文字控制属性

# 文字控制属性

| 属性            | 值   | 描述         |
| --------------- | ---- | ------------ |
| font-size       |      | 调整字体大小 |
| font-weight     |      | 调整字体粗细 |
| font-style      |      | 字体倾斜     |
| line-height     |      | 行高         |
| font-family     |      | 字体类型     |
| font            |      | 复合属性     |
| text-indent     |      | 文本缩进     |
| text-align      |      | 文本对齐方式 |
| text-decoration |      | 修饰线       |
| color           |      | 文字颜色     |

## 字体大小

属性名称：font-size

属性值：文字尺寸，PC端常见单位为像素px

```html
<style>
        p {
            font-size: 30px;
        }
</style>
```

## 字体粗细

属性名：font-weight

属性值：数字400(正常)，700(加粗)，关键字normal(正常)，bold(加粗)

```html
p {
            font-size: 25px;
            font-weight: bold;
            font-weight: 700;
        }
```

## 字体倾斜

属性名：font-style

属性值：normal(正常)，italic(倾斜)

可以用于清除字体默认的倾斜效果。

```html
    <style>
        h3 {
            font-weight: 400;
        }
        div {
            font-weight: 700;
        }
        em {
            font-style: normal;
        }
    </style>
```

## 行高

用于设置多行文本之间的间距。

属性名：line-height

属性值：数字+px或者数字(当前font-size属性值的倍数)

```html
    <style>
        p {
            line-height: 1.5;
            line-height: 20px;
        }
    </style>
```

设置行高垂直居中。设置line-height等于盒子的height，只适用于单行文字。

```html
    <style>
        div {
            height: 100px;
            background-color:skyblue;
            line-height: 100px;
            text-align: center;
        }
    </style>
```

## 字体族

属性名：font-family

属性值：字体名

```html
    <style>
        div {
            height: 100px;
            background-color:skyblue;
            line-height: 100px;
            text-align: center;
            font-family: 宋体;
        }
    </style>
```

## font复合属性

属性的简写方式，一个属性对应多个值，空格隔开。

font:是否倾斜 是否加粗 字号/行高 字体;（必须按顺序书写）

字号和字体必须填写否则不生效。

```html
    <style>
        div {
            font: italic 400 20px/1.5 宋体;
        }
    </style>
```

## 文本修饰属性

文本缩进：

text-indent

属性值：数字+px或者数字+em(1em=当前标签的字号大小)推荐使用。

```html
    <style>
        div {
            text-indent: 2em;
        }
    </style>
```

文本对齐：

text-align

属性值：left(左对齐默认)center(居中对齐)right(右对齐)

```html
    <style>
        div {
            text-align: center;
        }
    </style>
```

文本修饰线：

text-decoration

属性值：

| 属性值       | 效果   |
| ------------ | ------ |
| none         | 无     |
| underline    | 下划线 |
| line-through | 删除线 |
| overline     | 上划线 |

```html
    <style>
        div {
            text-decoration:underline;
        }
    </style>
```

## 文字颜色

属性名：color

值：

| 颜色表示     | 属性值           | 说明                              |
| ------------ | ---------------- | --------------------------------- |
| 颜色关键字   | 英文单词，测试用 | red,green,blue                    |
| rgb          | rgb(r,g,b)       | 取三原色，0-255                   |
| rgba         | rgba(r,g,b,a)    | a表示透明，取值0-1，实现透明色    |
| 十六进制表示 | #RRGGAA          | #0000000,开发使用，设计稿复制使用 |

RGB颜色对照：

[RGB颜色对照表](https://tool.oschina.net/commons?type=3)

## 浏览器调试工具

F12或者右键检查打开调试工具。

如果出现黄色感叹号代码代码有错误。