07 【案例】HTML :插入样式

一、样式的作用
装饰文档

二、插入样式的方式
1.行内样式（Inline Style）：通过元素的style属性设置
<p style="font-size:14px;text-align:left">这是一个段落</p>
缺点：大量重复代码，无法复用；特殊效果无法实现，比如鼠标移入的hover效果等

2.内嵌样式（Internal Style Sheet）：通过style元素设置
<style>
p{font-size:14px;text-align:left}
</style>
缺点：无法实现跨文档的样式复用

3.外联样式（External Style Sheet）：通过link元素引用，link的地址必须是合法地址
<link rel="stylesheet" href="style.css" type="text/css" media="all">

image.png

三、外联样式表及其应用
link:两个资源的关系
-超链接：
<link href="chapter1.html" rel= "prev" rev="next">
<link href="chapter3.html" rel="next" rev="prev">
-外联资源：
<link rel="icon" href="favicon.png" size="16*16" type="image/png">
<link rel="stylesheet" href="style.css">

rel：文档与资源之间的关系，link元素必须要有rel属性，值是浏览器预支的关键字中的一个或者多个，多个关键字之间用空格分隔
<link rel="author license" href="/about">

href：资源的目标地址，link元素必须要有href属性,href的值必须为合法的URL地址

type：资源的MIME类型，建议性的属性，可以不设置，对于外联资源，浏览器不会载入不支持的资源
<link rel="stylesheet" href="style.css" type="text/plain">

media：资源应用的设备，值为媒体查询信息
<link rel="stylesheet" href="style.css" media="{max-width:800px}">
<link rel="stylesheet" href="style.css" media="print">

案例：响应式布局
代码后续补上