CSS 文本样式

最新推荐文章于 2024-03-19 14:47:08 发布

书和咖啡

最新推荐文章于 2024-03-19 14:47:08 发布

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/ivenqin/article/details/108574723

版权

这篇博客介绍了CSS中的文本样式，包括color、text-indent、text-align、line-height和text-decoration属性的使用方法，通过示例展示了如何设置文本颜色、首行缩进、文本对齐、行高和文本装饰，帮助读者理解并掌握这些CSS属性在网页排版中的应用。

摘要由CSDN通过智能技术生成

本节我们讲文本样式，像比如设置文本颜色呀，首行缩进、水平对齐等，可以对网页进行排本设置等。

将要学习的文本属性有如下几个：

属性	描述
color	设置文本颜色
text-index	设置首行文本的缩进
text-align	设置文本水平对齐方式
line-height	设置文本行高
text-decoration	设置文本的装饰

color

首先我们来讲文本颜色设置，前面我们讲过一节关于如何设置颜色，所以想必大家对如何给文本设置颜色不会。

示例：

例如给下面的 <p> 标签中的 <span> 标签中的文本，颜色设置为粉色：

 <p>盛年不重来，<span>一日难再晨</span>。及时宜自勉，岁月不待人。</p>

CSS 样式代码：

span{
   
	color: pink;
}

或者使用十六进制颜色值：

span{
   
	color: #FFC0CB;
}

在浏览器中的演示：

text-index

一般我们在写作文的时候，所有段落的首行都会首行缩进两个字，而我们如果希望在网页中的段落也能实现首行缩进呢，这就可以通过 CSS 中的 text-index 属性来设置首行文本的缩进。

text-index 属性直接将缩进距离以数字表示，单位为 em 或 px。一般我们使用 em 更多，通常将值设置为 2em，表示缩进两个字符。

em 是相对单位，表示的长度相当于文本中字符的倍数，会根据字符的大小，自动适应，空出设置字符的倍数。

text-index 属性允许使用负值，如果使用负值，那么首行会被缩进到左边。

示例：

实现第一个段落和最后一个段落的首行缩进：

<!DOCTYPE>
<html>
    <head>
    	<meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css"

最低0.47元/天解锁文章