一、样式的作用
装饰文档
二、插入样式的方式
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">
三、外联样式表及其应用
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">
案例:响应式布局
代码后续补上