07-CSS文本属性

最新推荐文章于 2024-07-30 17:23:09 发布

「已注销」

最新推荐文章于 2024-07-30 17:23:09 发布

阅读量69

点赞数

文章标签： css html python css3 html5

本文链接：https://blog.csdn.net/weixin_45029643/article/details/119711584

版权

CSS文本属性

CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等等。

文本颜色

color 属性用于定义文本的颜色，可以使用预定义的颜色值或者十六进制或者RGB代码。

h1 {
    color: red;
}
h2 {
    color: #ff0000;
}
h3 {
    color: rgb(255,0,0);
}

示例：

<!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>CSS文本属性-文本颜色</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: #0000ff;
        }

        .green {
            color: rgb(0, 255, 0);
        }
    </style>
</head>

<body>
    <h1 class="red">红色</h1>
    <h1 class="blue">蓝色</h1>
    <h1 class="green">绿色</h1>

</body>

</html>

文本颜色

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

h1 {
    /* 居中对齐 */
    text-align: center;
}
h2 {
    /* 右对齐 */
    text-align: center;
}
h3 {
    /* 左对齐 默认值*/
    text-align: center;
}

示例：

<!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>
        .box {
            width: 200px;
            height: 100px;
        }

        .left {
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .center {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="box left">左对齐</div>
<div class="box right">右对齐</div>
<div class="box center">居中对齐</div>

</body>

</html>

对齐文本

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

h1 {
    /* 默认，没有装饰线 */
    text-decoration: none
}
h2 {
    /* 下划线 */
    text-decoration: underline
}
h3 {
    /* 上划线 */
    text-decoration: overline
}
h4 {
    /* 删除线 */
    text-decoration: line-through
}

示例：

<!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>
        .none {
            text-decoration: none;
        }

        .under {
            text-decoration: underline;
        }

        .over {
            text-decoration: overline;
        }

        .del {
            text-decoration: line-through;
        }
    </style>
</head>

<body>

    <h1 class="none">默认值</h1>
    <h1 class="under">下划线</h1>
    <h1 class="over">上划线</h1>
    <h1 class="del">删除线</h1>

</body>

</html>

装饰文本

文本缩进

text-indent 属性用来指定文本的第一行的缩进距离，通常是将段落的首行缩进。em 是一个相对单位，就是相对于当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

p {
    text-indent: 2em;
}

行间距

line-height 属性用于设置行与行之间的距离，即行高。

p {
    line-height: 20px;
}

总结

属性	表示	注意点
color	文本颜色	通常用16进制
text-align	文本对齐	可以设置文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进2个字的距离，即 `text-indent: 2em`
text-decoration	文本修饰	添加下划线 underline ，取消下划线 none
line-height	行高	控制行与行之间的距离

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07-CSS文本属性

CSS文本属性CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等等。文本颜色color 属性用于定义文本的颜色，可以使用预定义的颜色值或者十六进制或者RGB代码。h1 { color: red;}h2 { color: #ff0000;}h3 { color: rgb(255,0,0);}示例：<!DOCTY...
复制链接

扫一扫