### 文本排版与样式的玩法

```h

    <style>

     /* 文本样式综合设计  */

        .highlight {

        color: chocolate;

        background-color: black;

        text-transform: uppercase; /* 文本大写 */

        text-indent: 20px;

        }

        .highlight:hover {

        color: white;

        background-color: dimgray;

        }

        /* 文本排版设计  */

        .article p {

            background-color: dimgray;

            font-size: 16px;

            line-height: 1.5;

            text-indent: 1em;

       }

        .article p:first-letter {

            font-weight: bold;

            font-size: 24px;

        }

        /* 文本对齐和装饰  */

        .poem {

            text-align: justify;  /*  文本对齐方式为两端对齐 */

            color: blue;

            text-transform: capitalize;  /*  每个单词的首字母大写 */

        }

        .poem::first-line {

            color: brown;

        }

        /* 文本样式响应式设计  */

        @media screen and(max-width:600px){

            .news {

            font-size: 14px;

            line-height: 1.2;

        }

        }

        @media screen and(min-width: 600px) and (max-width: 900px) {

            .news {

            font-size: 16px;

            line-height: 1.4;

        }

        }

        @media screen and (min-width: 900px) {

            .news {

            font-size: 18px; /* 文本大小为 18px */

            line-height: 1.6; /* 行高为 1.6 */

        }

        }

        /* 文本样式与伪类结合  */

        .quote {

            color: slategrey;

            font-style: italic;  /* 字体样式设置为斜体 */

            text-indent: 20px; /* 文本向右缩进 */

        }

        .quote::before {

            content: " “ ";

        }

        .quote::after {

            content: " ” ";

        }

        /* 文本样式与动画 */

        @keyframes flash {

        0%, 100% {

            color: red;  /* 开始和结束颜色为红色 */

        }

        50% {

            color: yellow;  /* 中间颜色为黄色 */

        }

        }

        .flashing {

        animation: flash 2s infinite;   /* 动画名称，持续时间，循环方式 */

        }

    </style>

```

1.

```h

vertical-align:middle;   //指定行级元素的垂直对齐方式

```

2.

```h

    //  格式：font: 加粗 字号/行高/ 字体

    font: 400 14px/24px "宋体";

    text-transform: capitalize;  /*  每个单词的首字母大写 */

```

3.

```h

    text-indent:20px  // 段落首字缩进

/*

        1.text-indent所在的元素是行内元素(span,a)而非块级元素(<div>)。  

        解决方案:   在行内元素加上display:block; [color=red]

        2.text-indent所在的元素未使用overflow属性;    

        解决方案:   在元素加上 overflow:hidden;

        3.text-indent设置的值超出浏览器默认的最大或最小值

 */

```

- letter-spacing:中文 字间距

- word-spacing:英文 字间距

3.

```h

@font-face{

    font-family:"myFont"

    src:url("myFont.ttf")   // myFont.ttf 是电脑自带的字体，在电脑 (用户 --> Fonts)

}

```

4. rem 和 em ：定义字体大小的单位。

- rem 表示字体大小的分子（即每个字符的大小）。单位是rem，也称为“百分比”

- em 表示字体大小的分母（即整个字体的大小）。

    - rem它是通过将字体大小除以一个基准值（如 72px）来计算得出的。 em相对于父元素，rem相对于根元素

5. CSS样式中，常见的文本属性：

- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线

- `text-transform: lowercase;` 单词的字体大小写。属性值：`uppercase`将所有文本转为大写。`lowercase`: 将所有文本转为小写。`capitalize`: 让其首字母大写。

6. 文字阴影：text-shadow 属性。

```h

text-shadow: 4px 4px 5px red;

/*   4 个属性如下：

        阴影与原始文本的水平偏移

        阴影与原始文本的垂直偏移;(效果基本上就像水平偏移)

        模糊半径 - 阴影分散。可为 0，

        阴影的基础颜色  默认为 black.

*/

  -1px -1px 1px #aaa,

  0px 4px 1px rgba(0, 0, 0, 0.5),

  4px 4px 5px rgba(0, 0, 0, 0.7),

  0px 0px 7px rgba(0, 0, 0, 0.4);

```

7.

- text-orientation: 定义行内文本的方向。

- word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。

- writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。