当前位置：首页 > article >正文

4.CSS文本属性

article 2025/1/5 14:01:03

4.1文本颜色

div {

color:red;

}

	属性值
预定义的颜色值	red、green、blue、pink
十六进制	#FF0000,#FF6600,#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2对齐文本

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

div{

text-align:center;

}

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

<!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>
        h1 {  
            /* 本质是让h1盒子里面的文字水平居中对齐 */
          /*text-align: center;*/
          /* text-align:right; */
          text-align:left;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

4.3 装饰文本

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

div{

text-decration:underline;

}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线（不常用）

pay attention：

重点记住如何添加和删除下划线。

4.4缩进

text-indent:2m;

4.5 行高

line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本缩进</title>
    <style>
         p {
        font-size:24px;
        text-indent:2em;
        line-height: 25px;
    }
    div {
        line-height: 26px;
    }

    </style>
</head>
<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p>可即使这样，在北上广胜过的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
    <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
   
</body>
</html>

测量行高的工具是