CSS文本属性

171 阅读2分钟

「这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战

1.文本颜色color

微信图片_20211105231310.png

文本颜色常用十六进制表示

2.文本对齐text-align

<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
        p {
            text-align: center;
        }
        div {
            text-align: right;
        }
    </style>
</head>
<body>
    <p>文本对齐</p>
    <div>文本对齐</div>
</body>
</html>

其中center表示文本居中对齐,right表示文本居右对齐,left表示文本居左对齐

3.装饰文本text-decoration

<head>
    <meta charset="UTF-8">
    <title>装饰文本</title>
    <style>
        p {
            text-decoration: none;
        }
        div {
            text-decoration: underline;
        }
        span {
            text-decoration: overline;
        }
        h3 {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>文本装饰无</p>
    <div>文本装饰下划线</div>
    <span>文本装饰上划线</span>
    <h3>文本对齐删除线</h3>
</body>

text-decoration 表示装饰文本,当参数为underline时表示文本下划线,为overline时为上划线,line-through表示删除线,none表示无装饰,此参数经常用来处理链接的下划线。

<head>
    <meta charset="UTF-8">
    <title>装饰文本</title>
    <style>
       a {
            text-decoration: none;
        }
    </style>
</head>
<body>
        <a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a><br/>
</body>
</html>

4.文本缩进text-indent

<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        边缘计算并非是一个新鲜词。作为一家内容分发网络CDN和云服务的提供商AKAMAI,早在2003年就与IBM合作“边缘计算”。作为世界上最大的分布式计算服务商之一,
        当时它承担了全球15-30%的网络流量。在其一份内部研究项目中即提出“边缘计算”的目的和解决问题,并通过AKAMAI与IBM在其WebSphere上提供基于边缘Edge的服务。
    </p>
    <p>
        对物联网而言,边缘计算技术取得突破,意味着许多控制将通过本地设备实现而无需交由云端,处理过程将在本地边缘计算层完成。
        这无疑将大大提升处理效率,减轻云端的负荷。由于更加靠近用户,还可为用户提供更快的响应,将需求在边缘端解决。
    </p>

</body>

text-indent表示将段落的首行缩进。2em表示段落文本缩进两个字符,em是一个相对单位,1em相当于当前文字大小的一个字符。

5.行间距line-height

<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style>
        p {
            line-height: 32px;
        }
    </style>
</head>
<body>
    <p>
        边缘计算并非是一个新鲜词。作为一家内容分发网络CDN和云服务的提供商AKAMAI,早在2003年就与IBM合作“边缘计算”。作为世界上最大的分布式计算服务商之一,
        当时它承担了全球15-30%的网络流量。在其一份内部研究项目中即提出“边缘计算”的目的和解决问题,并通过AKAMAI与IBM在其WebSphere上提供基于边缘Edge的服务。
    </p>
</body>