1. 主页
  2. 文档
  3. CSS
  4. 文本与字体属性
  5. 常用文本样式属性

常用文本样式属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .para1 {
            color: blue;
        }

        .para2 {
            color: #ff3366;
        }

        .para3 {
            color: #f36;
        }

        .para4 {
            color: #000;
        }

        .para5 {
            background-color: #f36;
            color: #fff;
        }

        .para6 {
            color: rgb(255, 0, 0);
        }

        .para7 {
            color: rgba(255, 0, 0, .6);
        }

        /* 加粗 */
        .para8 {
            font-weight: bold;
        }

        .para9 {
            font-weight: 700;
        }

        h3 {
            font-weight: normal;
        }

        /* 倾斜 */
        .para10 {
            font-style: italic;
        }

        i {
            font-style: normal;
        }

        /* 下划线、删除线 */
        .para11 {
            text-decoration: underline;
        }

        a {
            text-decoration: none;
        }

        .para12 {
            text-decoration: line-through;
        }
    </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>
    <p class="para8">只争朝夕,不负韶华</p>
    <p class="para9">只争朝夕,不负韶华</p>
    <h3>只争朝夕,不负韶华</h3>
    <p class="para10">只争朝夕,不负韶华</p>
    <i>只争朝夕,不负韶华</i>
    <p class="para11">只争朝夕,不负韶华</p>
    <a href="">只争朝夕,不负韶华</a>
    <p class="para12">只争朝夕,不负韶华</p>
</body>

</html>
这篇文章对您有用吗?

我们要如何帮助您?