CSS3笔记003 - 第03章 字体样式

第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>
posted @ 2020-08-26 07:14  测试工匠麻辣烫  阅读(132)  评论(0)  编辑  收藏  举报