字体样式
| 属性 | 说明 |
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
- 字体类型(font-family)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#div1{font-family: "宋体";}
#div2{font-family: "微软雅黑";}
#div3{font-family: "Times New Roman";}
</style>
</head>
<body>
<div id="div1">宋体</div>
<div id="div2">微软雅黑</div>
<div id="div3">Times New Roman</div>
</body>
</html>
- 字体大小(font-size)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{font-size: 10px;}
#p2{font-size: 20px;}
#p3{font-size: 30px;}
</style>
</head>
<body>
<p id="p1">字体大小为10px</p>
<p id="p2">字体大小为20px</p>
<p id="p3">字体大小为30px</p>
</body>
</html>
- 字体粗细(font-weight)
| 属性值 | 说明 |
| normal | 正常（默认值） |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗（效果和bold差不多） |
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{font-weight: lighter;}
#p2{font-weight: normal;}
#p3{font-weight: bold;}
#p4{font-weight: bolder;}
</style>
</head>
<body>
<p id="p1">字体粗细为lighter</p>
<p id="p2">字体粗细为normal</p>
<p id="p3">字体粗细为bold</p>
<p id="p4">字体粗细为bolder</p>
</body>
</html>
- 字体风格(font-style)
| 属性值 | 说明 |
| normal | 正常（默认值） |
| italic | 斜体 |
| oblique | 斜体 |
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{font-style: normal;}
#p2{font-style: italic;}
#p3{font-style: oblique;}
</style>
</head>
<body>
<p id="p1">字体风格为normal</p>
<p id="p2">字体风格为italic</p>
<p id="p3">字体风格为oblique</p>
</body>
</html>
- 字体颜色(color)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{color: purple;}
#p2{color: pink;}
#p3{color: yellow;}
#p4{color: #cc99ff;}
#p5{color: #6699ff;}
</style>
</head>
<body>
<p id="p1">字体颜色</p>
<p id="p2">字体颜色</p>
<p id="p3">字体颜色</p>
<p id="p4">字体颜色</p>
<p id="p5">字体颜色</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
p{font-family: 宋体,微软雅黑; font-size: 14px; font-weight: bold;color: blue;}
</style>
</head>
<body>
<p>"有规划的人生叫蓝图，没有规划的人生叫拼图"</p>
</body>
</html>
文本样式
| 属性 | 说明 |
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-transform | 大小写 |
| line-height | 行高 |
| letter-spacing、word-spacing | 字母间距、词间距 |
- 首行缩进(text-indent)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
p{font-size: 15px;text-indent: 30px;}
</style>
</head>
<body>
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</body>
</html>
- 水平对齐(text-align)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{text-align: left;}
#p2{text-align: right;}
#p3{text-align: center;}
</style>
</head>
<body>
<p id="p1">好好学习，天天向上！</p>
<p id="p2">好好学习，天天向上！</p>
<p id="p3">好好学习，天天向上！</p>
</body>
</html>
- 文本修饰(text-decoration)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{text-decoration: none;}/*去除所有划线效果*/
#p2{text-decoration: underline;}/*下划线*/
#p3{text-decoration: line-through;}/*中划线*/
#p4{text-decoration: overline;}/*顶划线*/
</style>
</head>
<body>
<p id="p1">好好学习，天天向上！</p>
<p id="p2">好好学习，天天向上！</p>
<p id="p3">好好学习，天天向上！</p>
<p id="p4">好好学习，天天向上！</p>
</body>
</html>
- 大小写(text-transform)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{text-transform: none;}/*无转换*/
#p2{text-transform: uppercase;}/*转换为大写*/
#p3{text-transform: lowercase;}/*转换为小写*/
#p4{text-transform: capitalize;}/*每个单词首字母大写*/
</style>
</head>
<body>
<p id="p1">rome wasn't built in a day.</p>
<p id="p2">rome wasn't built in a day.</p>
<p id="p3">rome wasn't built in a day.</p>
<p id="p4">rome wasn't built in a day.</p>
</body>
</html>
- 间距(letter-spacing,word-spacing)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{letter-spacing: 0px;}/*字母间距*/
#p2{letter-spacing: 3px;}
#p3{letter-spacing: 6px;}
#p4{word-spacing: 0px;}/*单词间距*/
#p5{word-spacing: 3px;}
#p6{word-spacing: 6px;}
</style>
</head>
<body>
<p id="p1">rome wasn't built in a day.</p>
<p id="p2">rome wasn't built in a day.</p>
<p id="p3">rome wasn't built in a day.</p>
<p id="p4">rome wasn't built in a day.</p>
<p id="p5">rome wasn't built in a day.</p>
<p id="p6">rome wasn't built in a day.</p>
</body>
</html>
- 行高(line-height)
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{line-height: 10px;}
#p2{line-height: 20px;}
#p3{line-height: 30px;}
</style>
</head>
<body>
<p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
<p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
<p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</body>
</html>
- 课后习题练习
<!DOCTYPE html>
<html>
<head>
<title>白鹿为霜</title>
<style type="text/css">
#p1{font-family: "宋体";font-size: 14px;text-indent: 28px;}
span{font-weight: bold;text-decoration: underline;}
#p2{font-size: 14px;text-indent: 28px;font-family: "Times New Roman";text-transform: uppercase;}
</style>
</head>
<body>
<p id="p1">很多人都喜欢用战术上的勤奋来掩盖战<br>略上的懒惰，事实上这种"<span>低水平的勤奋</span>"远<br>远比懒惰可怕。</p>
<p id="p2">Remeber:no pain,no gain!</p>
</body>
</html>
扫一扫
5014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
