CSS——文本效果
我们这次，就来看一下文本效果。文本效果就是对文本的修饰啦。
text-indent
首行缩进的利器。我们可以通过设置text-indent来实现段落的首行缩进。
示例代码如下：
CSS
p {
text-indent:10px;
}
HTML
<p>这是一段文字</p>
效果就不演示了。这一段文字被从左到右缩进了10px。
当然，这还能负缩进。
在这里展现一个奇妙的隐藏文本的方法。我们通过在文本的CSS里面加入一个背景图片，然后将文字负缩进，就可以实现只出现图片而没有文字的方法。
示例代码如下，这里就给完全代码了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
width:360px;
height:360px;
background-image: url(https://s3.ax1x.com/2020/11/21/D1imFA.jpg);
text-indent:-9999px; /*将文字偏移到完全看不见，建议设置-9999及更大，否则会因为负缩进过小看到文字*/
}
</style>
</head>
<body>
<h1>这段文字被隐藏了</h1>
</body>
</html>
这里是代码演示。如果复制这段源码，将text-indent:-9999px;这一段删除，保存刷新之后会看到h1的文字。
但是我们还有一种效果，等同于上面这种做法，看一眼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
width:360px;
height:360px;
background-image: url(https://s3.ax1x.com/2020/11/21/D1imFA.jpg);
}
h1 span {
display:none; /*通过不显示来隐藏文本*/
}
</style>
</head>
<body>
<h1><span>这段文字被隐藏了</span></h1>
</body>
</html>
span的原理是当作一个h1的“替死鬼”，因为不可能把h1隐藏掉，这样的话图片也没了。所以需要再内置一个没有任何效果的span来消除掉。
虽然这也可以，但是h1是有权重的。权重就是在搜索引擎眼里的重要性。消除显示之后，权重也会丢失，以后通过搜索引擎搜索的时候就会排得很后面，h1就没用了。
text-align
可以设置该属性决定对齐方式。
对齐方式有left(左对齐)、right(右对齐)和center(居中)。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
text-align:center;
}
</style>
</head>
<body>
<h1>文字</h1>
</body>
</html>
就不演示了，复制过去尝试一下就知道了。当然最神奇的，就是当图片在元素中时，也可以被居中。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="https://s3.ax1x.com/2020/11/21/D1imFA.jpg" />
</div>
</body>
</html>
这里是演示。
在这里，图片放在div中，div干什么，图片就干什么。所以div一居中，图片也跟着居中了。
text-decoration
我最爱的效果之一，它能在什么地方用呢？当我们让链接变得好看的时候，就可以用它。
在这里，我们使用:hover来模拟悬停的效果。做到当鼠标没放在链接上时，就是普通链接，颜色为红色。鼠标悬停在文字上时，就有下划线出现，颜色变成蓝色。
第一步示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
text-align: center;
font-size:30px;
}
</style>
</head>
<body>
<div><a href="####">示例范本</a></div>
</body>
</html>
大家自行将代码复制一下运行，就会看到这个被添加超链接的文字底下有一个下划线，字体是蓝色的，点击之后变成了紫色。
我们现在通过text-decoration来取消它的下划线，并添加悬停显示下划线并更改颜色的效果。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
text-align: center;
font-size:30px;
}
a {
text-decoration: none;
color:red;
}
a:hover {
text-decoration:underline;
color:skyblue;
}
</style>
</head>
<body>
<div><a href="####">示例范本</a></div>
</body>
</html>
这里是代码演示。这里一般在一些普通的地方会有这样的效果，但是为了美观，尽量少用这个吧。
