文本
文本颜色和背景色
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>