第03章 字体样式
字体样式简介
字体样式属性：字体类型font-family、字体大小font-size、字体粗细font-weight、字体风格font-style、字体颜色color
字体类型
字体类型:未定义，默认宋体
font-family:字体1,字体2,...,字体N；
比较美观的中文字体有微软雅黑、宋体，英文字体有Times New Roman、Arial、Verdana
# font-family
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style type="text/css">
#div1 {font-family: "Arial";}
#div2 {font-family: "times new roman";}
#div3 {font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">微软雅黑</div>
</body>
</html>
字体大小
# 字体大小：
font-size:像素值px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体大小</title>
<style type="text/css">
#p1 {font-size: 10px;}
#p2 {font-size: 15px;}
#p3 {font-size: 20px;}
</style>
</head>
<body>
<p id="p1">字体大小为10px</p>
<p id="p2">字体大小为15px</p>
<p id="p3">字体大小为20px</p>
</body>
</html>
字体粗细
font-weight:取值;
取值有两种：一种是100~900的数值；另一种是"关键字"；
关键字取值有4个：
取值为100相当于lighter、400相当于normal、700相当于bold、900相当于bolder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体粗细</title>
<style type="text/css">
.p1 {font-weight: 100;}
.p2 {font-weight: 400;}
.p3 {font-weight: 700;}
.p4 {font-weight: 900;}
#p5 {font-weight: lighter;}
#p6 {font-weight: normal;}
#p7 {font-weight: bold;}
#p8 {font-weight: bloder;}
</style>
</head>
<body>
<p id="p1" class="p1">字体粗细为100</p>
<p id="p2" class="p2">字体粗细为400</p>
<p id="p3" class="p3">字体粗细为700</p>
<p id="p4" class="p4">字体粗细为900</p>
<p id="p5" class="p5">字体粗细为lighter</p>
<p id="p6" class="p6">字体粗细为normal</p>
<p id="p7" class="p7">字体粗细为bold</p>
<p id="p8" class="p8">字体粗细为bloder</p>
</body>
</html>
字体风格
字体风格font-style
font-style:normal|italic|oblique;
取值有3种：normal、italic、oblique
有些字体有斜体italic属性，有些没有；oblique是让没有italic属性的字体也能够有斜体效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体斜体</title>
<style type="text/css">
#p1 {font-style: normal;}
#p2 {font-style: italic;}
#p3 {font-style: oblique;}
</style>
</head>
<body>
<p id="p1" class="p1">字体样式为normal</p>
<p id="p2" class="p2">字体样式为italic</p>
<p id="p3" class="p3">字体样式为oblique</p>
</body>
</html>
字体颜色
字体颜色color
color:颜色值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体颜色</title>
<style type="text/css">
#p1 {color: gray;}
#p2 {color: orange;}
#p3 {color: red;}
</style>
</head>
<body>
<p id="p1" class="p1">字体颜色为gray</p>
<p id="p2" class="p2">字体颜色为orange</p>
<p id="p3" class="p3">字体颜色为red</p>
</body>
</html>
CSS注释
/*注释的内容*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体斜体</title>
<style type="text/css">
/*这是CSS注释*/
#p1 {color: gray;}
#p2 {color: orange;}
#p3 {color: red;}
</style>
</head>
<body>
<!--这是HMTL注释-->
<p id="p1" class="p1">字体颜色为gray</p>
<p id="p2" class="p2">字体颜色为orange</p>
<p id="p3" class="p3">字体颜色为red</p>
</body>
</html>