大前端设计（H5+小程序+App）
温馨提示：
本文中可能包含表格，在手机屏幕上竖屏显示时，一行内可显示中文字符数量为20个左右，因部分表格单元格内容过长会导致自动换行，从而使得排版不太美观。
另外，本文中可能包含高清图片，在手机屏幕上预览时，我们需要频繁的进行放大缩小操作，这是相当麻烦的一件事情。
因此，如果条件允许，建议您坐在舒适的办公桌前，冲泡一杯咖啡或者茶，在电脑上阅读以获得更好的体验。
在HTML文档中，有三种使用样式表的方式：内联方式、内部样式块和外部样式文件。
1、内联方式 (Inline Styles)
内联定义即在标记的style属性值上直接使用CSS。
示例代码：
<!DOCTYPE html>
<html>
<head style="">
<meta charset="UTF-8">
<title>内联样式表</title>
</head>
<body style="background-color: deepskyblue;">
<p style="color:gray;
font-size: 18px;
font-family: '微软雅黑';" >
字体颜色将显示为灰色，18像素大小,字体为微软雅黑。
</p>
</body>
</html>
运行效果：
内联样式表
2、内部样式块对象 (Embedding a Style Block)
我们还可以在HTML文档的<head>标记里插入一个<style>块。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式块</title>
<style>
body {
background: deepskyblue;
color: green;
}
p {
font-size: 12px;
}
</style>
</head>
<body>
<!--
描述：此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则；
-->
<p style="font-size: 30px;">这段文字颜色遵循内部样式表规则，文字大小遵循内联样式表规则。</p>
<p style="font-size: 20px;">第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
运行效果：
内部样式块
3、外部样式表 (Linking to a Style Sheet)
我们在Web项目中可以先建立外部样式表文件style.css，然后在HTML文档中使用<link>标记将其作为样式表链接起来。
css文件style.css示例代码：
body {
background: deepskyblue;
color: green;
}
p {
font-size: 12px;
}
HTML文档示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!--
描述：此处的p标记内的内容样式被覆盖了。因为优先级遵循最近原则；
-->
<p style="font-size: 20px;">这段文字颜色遵循外部样式表规则，文字大小遵循内联样式表规则。</p>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
运行效果：
外部样式表
温馨提示：
多种使用方式并存时，最接近目标元素的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义，但覆盖重叠的定义。
如果您不能静下心来，不精心雕琢和打造自己的知识系统和技能体系，沉迷于点石成金亦或是拔苗助长等等的奇技淫巧之间，那都是事倍功半的瞎忙活！
古往今来，学习，没有捷径，除非出现科幻般的脑机互联......但有拙法，那就是书山有路勤为径，学海无涯苦作舟！更何况，日新月异知识爆炸的今天，态度犹豫和停止学习，那么等待您的，唯有丛林淘汰法则。
书，能读完吗？肯定不能，汗牛充栋！
书，能学完吗？绝对可以，得读经典。
好好学习，天天向上！继续下一章...
