文本样式文本粗细使用font-weight 对字体进行设置 400 相当于nomal 700 相当于weight bo

文本粗细

使用font-weight 对字体进行设置

400 相当于nomal

700 相当于weight

bold最常用

bolder 加粗 | lighter 加细

文本类型

使用font-style 对字体进行设置正常 nomal

斜体 italic

倾斜 oblique

文本颜色

使用color 对文字进行设置

我们通常用，十六进制比如白色简写形式#fff，

rgb(0 ,0 , 0)

rgba(0,0,0,0) a是透明度

文本修饰

使用text-decoration 对文本进行设置记住添加下划线 underline

取消下划线 none

上划线 overline

删除线 line-through

blink

设置元素内容的垂直方式

vertical-align属性

应用于行内标签和单元格元素起作用例span和img

值 baseline|sub|super|top|text-top|middle|bottom|text-bottom	长度|百分比

文本大小写

text-transform属性

属性值capitalize表示将文本中每个单词以大写字母开头

属性值uppercase将文本中的单词的每个字母否转变成大写

属性值lowercase定义文本中单词都是小写字母

font-variant属性

font-variant:normal/small-caps

normal为默认

small-caps为显示英文文本样式为小型的大写字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .para1 {
            color:pink;
        }
        .para2 {
            color:#ff33cc;
        }
        .para3 {
            color:rgb(255,0,0);
        }
        .para4 {
            color:#000;
        }
        /* rgba兼容到IE9 */
        .para5 {
            color:rgba(255,0,0,0.1);
        }
        .para6 {
            /* font-weight:bold; */
            font-weight:700;
        }
        .para7 {
            text-decoration:underline;
        }
        a {
            text-decoration:none;
        }
        .para8 {
            text-decoration:line-through;
        }
        .para9 {
            font-style:italic;
        }
        i {
            font-style:normal;
        }
    </style>
</head>
<body>
    <p class="para1">再不疯狂我们就老了</p>
    <p class="para2">再不疯狂我们就老了</p>
    <p class="para3">再不疯狂我们就老了</p>
    <p class="para4">再不疯狂我们就老了</p>
    <p class="para5">再不疯狂我们就老了</p>
    <p class="para6">再不疯狂我们就老了</p>
    <p class="para7">再不疯狂我们就老了</p>
    <a href="">再不疯狂我们就老了</a>
    <p class="para8">再不疯狂我们就老了</p>
    <p class="para9">再不疯狂我们就老了</p>
    <i>再不疯狂我们就老了</i>
</body>
</html>

文本样式