一、文本样式
1.1颜色
rgba(0,255,255,0.1) 0.1是透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色
rgb 0~F
rgba A：0~1
-->
<style>
h1{
color: rgba(0,255,255,0.1);
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p>
熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
“熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。
</p>
<p>
找不回全部的水果不能回家哦！太可怜了。快来帮帮他们吧！熊大喜欢苹果，熊二喜欢鸭梨，
收集全部的水果回家，即可成功过关。吃了神奇药水，熊变大后可以踩死野猪，普通状态碰到野猪会死哦，小心!
</p>
<p>
If you were a teardrop;In my eye,
For fear of losing you,I would never cry.
And if the golden sun,Should cease to shine its light,
Just one smile from you,Would make my whole world bright.
</p>
</body>
</html>
2.1文本对齐的方式、首行缩进
text-align；排班，居中
text-indent: 2em;段落首行缩进两个字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
text-align；排班，居中
text-indent: 2em;段落首行缩进
-->
<style>
.p1{
text-indent: 2em;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
“熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。
</p>
<p>
找不回全部的水果不能回家哦！太可怜了。快来帮帮他们吧！熊大喜欢苹果，熊二喜欢鸭梨，
收集全部的水果回家，即可成功过关。吃了神奇药水，熊变大后可以踩死野猪，普通状态碰到野猪会死哦，小心!
</p>
<p>
If you were a teardrop;In my eye,
For fear of losing you,I would never cry.
And if the golden sun,Should cease to shine its light,
Just one smile from you,Would make my whole world bright.
</p>
</body>
</html>
3.1行高
行高和块的高度一致，就可以上下居中
height: 300px;
line-height: 300px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
行高和块的高度一致，就可以上下居中
height: 300px;
line-height: 300px;
-->
<style>
.p3{
background: antiquewhite;
height: 300px;
line-height: 300px;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
“熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。
</p>
<p>
找不回全部的水果不能回家哦！太可怜了。快来帮帮他们吧！熊大喜欢苹果，熊二喜欢鸭梨，
收集全部的水果回家，即可成功过关。吃了神奇药水，熊变大后可以踩死野猪，普通状态碰到野猪会死哦，小心!
</p>
<p class="p3">
If you were a teardrop;In my eye,
For fear of losing you,I would never cry.
And if the golden sun,Should cease to shine its light,
Just one smile from you,Would make my whole world bright.
</p>
</body>
</html>
4.1装饰（上中下划线）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">123</p>
<p class="l2">124</p>
<p class="l3">125</p>
<h1>故事介绍</h1>
</body>
</html>
4.2 超链接去下划线
a标签默认有下划线，所以要去除下划线需要把text-decoration设置为none
a{
text-decoration: none;
}
<a href="">afds</a>
5.1 文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐 参照物：a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/a.png" alt="">
<span>sfeagsdbgfsgthbbg</span>
</p>
</body>
</html>
二、文本阴影和超链接伪类
2.1 超链接伪类（hover重点）
a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="#">
<img src="images/b.png" alt="">
</a>
<p>
<a href="#">码出高效</a>
</p>
<p>
<a href="">作者：孤尽老师</a>
</p>
<p>
￥99
</p>
</body>
</html>
2.2文本阴影
text-shadow:阴影颜色、水平偏移、垂直偏移、阴影半径
主要代码：
#price{
text-shadow: #a2bef3 10px 10px 2px;
}
<p id="price">
￥99
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*text-shadow:阴影颜色、水平偏移、垂直偏移、阴影半径*/
#price{
text-shadow: #a2bef3 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/b.png" alt="">
</a>
<p>
<a href="#">码出高效</a>
</p>
<p>
<a href="">作者：孤尽老师</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
