文本
文本
文本颜色和背景色
color属性用于设置文本的颜色，background-color属性用于设置文本的背景颜色- 颜色由以下值指定：
- 颜色名，例如
blue - 十六进制值，例如
#FF0000 - RGB 值（RGBA），例如
RGBA(0, 255, 255, 0.3)
- 颜色名，例如
文本对齐
-
text-align属性用来设置元素中文本的水平对齐方式，该属性的常用可选值如下：值 描述 left 默认值，左对齐 right 右对齐 center 居中对齐 justify 两端对齐 -
vertical-align属性用来定义元素内文本的垂直对齐方式，通常使用在图片上，将图片垂直方向的中线与文本的中线（文字元素行内框的中线）对齐
文字装饰
-
text-decoration属性用于设置或删除文本装饰 -
最常用的做法就是使用
text-decoration: none属性来删除<a>标签的默认下划线 -
该属性的可选值如下：
值 描述 none 默认值，标准文本，没有额外装饰，可以用来删除已有的文本装饰 underline 在文本下方添加一条下划线 overline 在文本上方添加一条上划线 line-through 在文本的中间定义一条横向贯穿文本的线（类似于删除线）
文字间距
text-indent属性用来为元素中的文本添加首行缩进的效果letter-spacing属性用来设置字符之间的间距（可为负值）word-spacing属性用于指定文本中单词之间的间距line-height属性用于指定行之间的间距，即行高height属性设置元素的高度，即块高度
文本转换
-
text-transform属性用来控制文本中英文字母的大小写 -
通过该属性可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式
-
该属性的可选值如下：
值 描述 none 默认值，以原文显示，对文本中的英文不做更改 capitalize 将文本中的每个单词更改为以大写字母开头的形式 uppercase 将文本中的英文字母全部更改为大写 lowercase 将文本中的英文字母全部更改为小写
文本阴影
-
text-shadow属性用来为文本添加阴影及模糊效果，属性的语法格式如下：text-shadow: h-shadow v-shadow blur color;- h-shadow：必填值，设置阴影的水平位置，允许为负值
- v-shadow：必填值，设置阴影的垂直位置，允许为负值
- blur：可选值，设置模糊的距离（模糊半径）
- color：可选值，设置阴影的颜色
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
/* 颜色: 单词 RGB RGBA */
color: RGBA(0, 255, 255, 0.3);
/* 排版: 居中 */
text-align: center;
}
.p1 {
/* 首行缩进(1em等于一个字) */
text-indent: 2em;
}
.p2 {
/* 文字阴影效果 */
text-shadow: 10px 10px 2px orange;
}
.p3 {
/* 背景颜色 */
background-color: blueviolet;
/* 块高度 */
height: 200px;
/* 行高 */
line-height: 200px;
/* 转换为大写字母 */
text-transform: uppercase;
/* 字符间距 */
letter-spacing: -3px;
}
a {
/* 从链接上删除下划线 */
text-decoration: none;
}
.line1 {
/* 上划线 */
text-decoration: overline;
}
.line2 {
/* 中划线 */
text-decoration: line-through;
}
.line3 {
/* 下划线 */
text-decoration: underline;
}
img, span {
/* 图片与文字中线对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<a href="http://">a标签(链接)去下划线</a>
<p class="line1">上划线</p>
<p class="line2">中划线</p>
<p class="line3">下划线</p>
<h1>故事介绍</h1>
<p class="p1">在阿克佩乐高大陆，冒险者们发现通过一个隐秘的洞窟就可以到达一个极度冰冷的地方，里面充满了巨大的冰层。</p>
<p class="p2">一头肥硕的白熊从洞窟深处向人群中冲来，没人知道这头熊从哪里来，它在洞中呆了多久，它又是靠吃什么生存下来的。白熊一身蛮肉，孔武有力，不好对付，必须打败它，才能继续探险之旅!</p>
<img src="C:\Windows\Web\Wallpaper\Windows\imgX.jpg" alt="img" width="160px" , height="100px">
<span>文本中图像的垂直对齐</span>
<p class="p3">But you, gods, will give us some faults to make us men.</p>
</body>
</html>
