一. 文本标签
1. 斜体
<em>斜体</em> <i>斜体</i>
<em>用于表示一段内容中的着重点
<i>没有语义，只是单纯的将文本变为斜体
2. 加粗
<strong>加粗</strong> <b>加粗</b>
<strong>用于表示一段内容中的着重点
<b>没有语义，只是单纯的将文本变为加粗
3. 引用
<p> 子曰：<blockquote>三人行，必有我师焉</blockquote> </p> <p> 毛主席说过：<q>自己动手丰衣足食</q> </p>
blockquote和q都可以标记引用的文本
blockquote用于长引用，q用于短引用
4. 上标和下标
<p> 2的3次方：2<sup>3</sup><br/> 水的化学式：H<sub>2</sub>O </p>
sup用于定义上标
sub用于定义下标
5. 列表
无序列表：
<ul> <li>列表项1</li> <ul> <li>列表项1.1</li> <li>列表项1.2</li> <li>列表项1.3</li> <li>列表项1.4</li> </ul> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul>
有序列表
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ol>
二. 文本格式化
1. 单位
-
px：像素 ，对于不同的显示器来说，一个像素的大小是不相同的
-
百分比：百分比是相对于父元素来说的，如果父元素的大小是16px，则子元素设置100%就是16px，200%就是32px
-
em（只能用于设置文字大小）：em和百分比类似，也是相对于父元素说的，1em就相当于100%，1.5em相当于150%
2. 颜色
-
单词：比如red，blue，yellow
-
十六进制：#FF0000、#00FF00、#0000FF、#F0F
-
RBG：rgb(255,0,0)
-
RGBA：rgb(255,0,0,0.2)，最后的a范围是0~1，代表透明度
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
p {
color:rgba(255,0,0,0.2);
}
div{
height:100px;
width:100px;
background-color:brown;
}
#zj{
font-size:1.5em;
}
</style>
</head>
<body>
<div>
嘎嘎嘎嘎
</div>
<p>哈哈哈哈</p>
<p id="zj">哼哼哼哼</p>
</body>
</html>
3. 文本基本样式
-
font-size：文字大小
-
font-family：字体
-
font-style：是否斜体
-
italic：斜体
-
normal：正常
-
font-weight：是否粗体
-
bold：粗体
-
normal：正常
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
p {
font-size:50px;
font-family:"楷体";
font-style:italic;
font-weight:blod;
font-weight:900;
}
</style>
</head>
<body>
<p>哈哈哈哈</p>
</body>
</html>
4. 行高
line-height：用于设置行高，行高越大，行间距越大
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
p {
line-height:20px;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
可以利用行高来进行垂直居中：假如我们设置div的宽度是60px，如果要让div中的文字垂直居中，可以利用line-height:60px实现：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
#zj1{
background-color:green;
text-align:left;
height:60px;
line-height:60px
}
</style>
</head>
<body>
<div id="zj1"> 段落1</div>
</body>
</html>
5. 修饰文本
text-decoration：可以在文本的上方、下方或中间添加线条
-
underline：文本上方（上划线）
-
overline：文本下方（下划线）
-
line-through：文本中间（删除线）
-
none：不显示下划线
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
#zj1{
text-decoration:underline;
}
#zj2{
text-decoration:overline;
}
#zj3{
text-decoration:line-through;
}
#zj4{
text-decoration:none;
}
</style>
</head>
<body>
<p id="zj1"> 段落1</p>
<p id="zj2"> 段落1</p>
<p id="zj3"> 段落1</p>
<a id="zj4" href="https://zhangjia.io">没有下划线的链接</p>
</body>
</html>
6. 文本对齐
text-align：用于设置文本的对齐方式
可选值：
-
left：左对齐
-
right：右对齐
-
justify：两端对齐
-
center：居中对齐
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
#zj1{
text-align:left
}
#zj2{
text-align:right;
}
#zj3{
text-align:justify;
}
</style>
</head>
<body>
<p id="zj1"> 段落1</p>
<p id="zj2"> 段落1</p>
<p id="zj3"> 段落1</p>
</body>
</html>
关于a标签的对齐，因为a标签是行级标签，所以直接按照下面的方式设置居中是没有效果的：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
#zj4{
text-align:center;
}
</style>
</head>
<body>
<a id="zj4" href="https://zhangjia.io">没有下划线的链接</p>
</body>
</html>
可以将a标签设置为块级标签：
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
#zj4 {
display: block;
text-align: center;
}
</style>
</head>
<body>
<a id="zj4" href="https://zhangjia.io">没有下划线的链接</p>
</body>
</html>
请登录之后再进行评论