目的：为了把样式和内容分开，并且使网页元素更加丰富，引入了CSS
CSS页面引入有三种方式：
1）内联式：比较不常用，因为内容和样式仍然在一起，不方便。示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--字体颜色、字体大小、字体类型、行高-->
<div style="color: hotpink;font-size: 20px;font-family: 'Leelawadee UI Semilight';line-height: 50px">
传统布局：使用table来做整体页面的布局
总结：这种方式来制作页面现在也不是很多了，感觉并不是很高效。
需要先用photoshop量出页面布局具体的尺寸位置，再将其划分为表格，
对每个格子进行编辑。每个格子可以嵌套表格，这样有时候写着写着还有点迷糊，
要重新找到编辑位置属于哪一个表格的哪个位置， 通常会将表格的border设置为1，
方便检查
</div>
<div>
博客园是一个面向开发者的知识分享社区。自创建以来,
博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
推动并帮助开发者通过互联网分享知识,从而让更多
</div> </body>
</html>
2）嵌入式：由于这种方式速度快，一般用于首页加载。示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KID</title>
<style type="text/css">
div{
color:hotpink;
font-size:20px;
font-family:'Microsoft YaHei UI';
line-height:50px
}
</style>
</head>
<body>
<div>
博客园是一个面向开发者的知识分享社区。自创建以来,
博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
推动并帮助开发者通过互联网分享知识,从而让更多
</div>
<div>
博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,
博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
推动并帮助开发者通过互联网分享知识,从而让更多
</div>
</body>
</html>
3）外联式：样式单独保存在main.css文件中，样式与内容完全分离，用于大多数网页中。示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KID</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
博客园是一个面向开发者的知识分享社区。自创建以来,
博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
推动并帮助开发者通过互联网分享知识,从而让更多
</div>
<div>
博客园是一个面向开发者的知识分享sdgdhgfgjkhljsadsfxcvbnm社区。自创建以来,
博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,
推动并帮助开发者通过互联网分享知识,从而让更多
</div>
</body>
</html>
main.css:
div{
color:hotpink;
font-size:20px;
font-family:'Microsoft YaHei UI';
line-height:50px
}