【CSS】CSS文本样式【CSS基础知识详解】

最新推荐文章于 2024-07-09 14:41:45 发布

「已注销」

最新推荐文章于 2024-07-09 14:41:45 发布

阅读量4.8k

点赞数 50

分类专栏： # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/huawuque404/article/details/127877011

版权

CSS基础知识详解

👨‍💻个人主页：@花无缺
欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

本文章收录于专栏【CSS】

【CSS专栏】已发布文章

📁【CSS基础认知】
📁【CSS选择器全解指南】
📁【CSS字体样式】

🌙文本颜色

属性名：color

作用：设置文本的颜色

属性值：

颜色表示方式	表示含义	属性值
颜色名称	预定义的颜色名	red、green、blue…
RGB表示法	红绿蓝三原色，每项取值范围:0~255	rgb(0，0，0)、rgb(255，255，255)
RGBa表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255，255，255，0.5)、rgba（255，0，0，0.3）
十六进制表示法	以#开头，将数转换成十六进制表示	#000000、#ff0000、#e92322，简写：#000、#f00

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
     
            color: blue;
        }

        span {
     
            color: pink;
        }
    </style>
</head>

<body>
    <p>这是一句话，被设置成了蓝色</p>

    <span>这是另一句话，被设置成了粉色</span>
</body>

</html>

🌙文本缩进

属性名：text-indent

取值：

数字+px
数字+em

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        p {
     
            text-indent: 32px;
        }
    </style>
</head>

<body>
    <p>这是一句话，设置文本缩进32px，相当于两个汉字的距离</p>

    <span>这是另一句话，没有设置文本缩进</span>
</body>

</html>

🌙文本对齐

🌏水平对齐

🌸一般水平对齐

属性名：text-align

作用：用于设置文本的水平对齐方式

取值：

属性值	效果
left	文本左对齐
center	文本居中对齐
right	文本右对齐
justify	文本两端对齐

注意：属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<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>花无缺</title>
    <style>
        .a1 {
     
            text-align: center;
        }

        .a2 {
     
            text-align: left;
        }

        .a3 {
     
            text-align: right;
        }

        .a4 {
     
            width: 100px;
            height: 90px;
            float: left;
            background-color: pink;
            text-align: justify;