css文本样式

最新推荐文章于 2024-10-04 22:03:04 发布

Citrus_73

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量192

点赞数 3

分类专栏：前端知识文章标签： css 前端

本文链接：https://blog.csdn.net/m0_71190099/article/details/142503079

版权

前端知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文本颜色

作用：通过使用color属性来设置文本颜色，为用户展现不同的效果。
示例：

<!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>
        .p1{ color: red; } /* 常用的表颜色的英文单词表示 红色 */
        .p2{ color: #0000ff; } /* 使用十六进制颜色码表示 蓝色 */
        .p3{ color: rgb(0, 0, 0); } /* 使用rgb()函数表示 黑色 */
        .p4{ color: rgba(0, 0, 0, .5); } /* 使用rgba()函数表示 透明度为0.5的黑色 */
    </style>
</head>
<body>
    <span class="p1">文本1</span>
    <span class="p2">文本2</span>
    <span class="p3">文本3</span>
    <span class="p4">文本4</span>
</body>
</html>

图例：

作用：通过使用font-size属性，为用户展示不同字体大小的效果。
示例：

<!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>
        .p1{ font-size: 16px; } /* 文本字号为16px大小 */
        .p2{ font-size: 20px; } /* 文本字号为20px大小 */
        .p3{ font-size: 24px; } /* 文本字号为24px大小 */
    </style>
</head>
<body>
    <span class="p1">16px文本</span>
    <span class="p2">20px文本</span>
    <span class="p3">24px文本</span>
</body>
</html>

图例：