引言:
上节说到css样式表的概念以及css作用对象:元素
本文主要内容:
1.CSS样式表的引用的几种方式
内联式
外联式
内嵌式
2.候选样式表的介绍
一、引用方式
外联式:
<link rel="stylesheet" type="text/css"href="style.css" media="all">
代码拆解
最外层式link标签
link 标签的作用是将当前文档与其他文档关联起来,其他文档的路径有herf指向
rel 表示关系是层叠样式表
type 引用对象的文件类型声明
href 其后可以填相对地址也可以填绝对地址 指向的是被引用的文件
meadia 默认就是media=“all" 多媒体描述符 应用多媒体对象类型声明
值得注意的是:
1.如果文件不是css结尾,使用type申明的text也可能不会被老牌浏览器所识别
2.link标签只能放在头部不能放在其他地方
3.当有多个link时会将样式合并处理
内嵌式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*这里书写样式*/
</style>
</head>
以双标签<stytle type = "text/css" media="all"> </stytle>
和外联式类似 同样具有type 和media两个属性
内联式/行内样式
<body>
<p style="color:red;">这是内容</p>
</body>
适用于少量代码对一个元素设置
但从结构与样式分离的角度来说这样设置显然不是最优选项
二、候选样式表
如果我们需要给自己网站设计一个夜晚模式或者深色模式该怎么办呢?重新编写代码替换原有的代码显然不是明智的选择,那该怎么办呢?css提供了候选样式表
候选样式表与首选样式表的不同属性:
rel 候选样式表的属性值式alternate stylesheet
除此之外还可以为不同的样式表设置不同的名称