css_14_常用文本属性

一.文本颜色

• 属性名：

color

• 1颜色名
  2.rgb或rgba
  3.HEX或HEXA（十六进制）
  4.HSL或HSLA
• 举例：

.texts {
            color: hsl(0, 100%, 50%);
        }

二.文本间距

• 字母间距： letter-spacing
• .单词间距：word-spacing（通过空格识别词）
• 属性值：像素（px)，正值让间距增大，负值让间距缩小。
• 举例：

    <style>
        div {
            font-size: 30px;
        }
        .texts1 {
            /* 字母间距 */
            letter-spacing: 20px;
        }
        .texts2 {
            /* 单词间距 */
            word-spacing: 20px;
        }
    </style>

三.文本修饰

• 属性名：

text-decoration

• 1.none：无装饰线（常用）
  2.underline：下划线（常用）
  3.overline：上划线
  4.line-through：删除线
• 举例：

       .texts {
            /* 删除线 */
            text-decoration: line-through;
        }

四.文本缩进

• 属性名：

text-indent

• 属性值：
  css 中的长度单位，例如：px
• 举例：

    <style>
        div {
            font-size: 60px;
            text-indent: 120px;
        }
    </style>

五.文本水平对齐

• 属性名：

text-align

• 常用值：
  left：左对齐（默认值）
  right：右对齐
  center：居中对齐
• 举例：

    <style>
        div {
            font-size: 40px;
            text-align: right;
        }
    </style>

六.行高

• 属性名：

line-height

• 可选值：
  1.normal：由浏览器根据文字大小决定的一个默认值。
  2．像素（px)。
  3．数字：参考自身font-size 的倍数（很常用）。
  4．百分比：参考自身font-size的百分比。
• 举例：

        #d1 {
            font-size: 40px;
            background-color: skyblue;

            /* 第一种写法，值为像素 */
            /* line-height: 40px; */

            /* 第二种写法，值为normal */
            /* line-height: normal; */

            /* 第三种写法，值为数值 —— 用的比较多 */
            /* line-height: 1.5; */

            /* 第四种写法，值为百分比 */
            /* line-height: 150%; */

        }

• 注意：
  1：行高过小，文字会重叠，且最小值是0，不能为负数。
  2：行高是可以继承的
  3：设置了height，高度就是height的值。
  没有设置height，高度就是line-height*行数
  4：让单行文字垂直居中：line-height=height

七.vertical-align

• 属性名：

vertical-align

• 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
• 常用值：
  baseline（默认值）：使元素的基线与父元素的基线对齐。（字母x的中部）
  top：使元素的顶部与其所在行的顶部对齐。
  middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
  bottom：使元素的底部与其所在行的底部对齐。
• 特别注意：vertical-align不能控制块元素。
• 举例：

        .texts {
            vertical-align: bottom;
        }