一.span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>span</title>
<style>
#span1{
color: red;
font-weight: bold;
}
#span2{
color: blue;
}
</style>
</head>
<body>
<p><span id="span1">span</span>标签是一个<span id="span2">行内元素</span></p>
</body>
</html>
二.字体类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置字体类型</title>
<!--
作者：[email protected]
时间：2020-02-26
描述：font-family: 设置字体类型
-->
<style>
.f1{
font-family: "宋体";
}
.f2{
font-family: "微软雅黑";
}
</style>
</head>
<body>
<p class="f1">宋体</p>
<p class="f2">微软雅黑</p>
</body>
</html>
三.字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体大小</title>
<!--
作者：[email protected]
时间：2020-02-26
描述：font-size：设置字体大小
px:默认16像素
<-->
<style>
.p1{
font-size: 16px;
}
.p2{
font-size: 50%;
}
.p3{
font-size: 1.5em;
}
</style>
</head>
<body>
<p class="p1">唐僧</p>
<p class="p2">孙悟空</p>
<p class="p3">猪八戒</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
.p1{
font-style: normal;
}
.p2{
font-style: italic;
}
.p3{
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">普通字体</p>
<p class="p2">斜体</p>
<p class="p3">倾斜体</p>
</body>
</html>
