字体、文本属性

    <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>

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

	//  格式：font: 加粗 字号/行高/ 字体 
	font: 400 14px/24px "宋体";

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

    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:英文 字间距

@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 属性。

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);

• text-orientation: 定义行内文本的方向。
• word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
• writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。