CSS的三种使用方式
1. 行内样式：在某个特定的元素当中采用style属性。只对当前元素有效
2. 内嵌样式：在页面的head部分采用<style>标 签。范围是针对当前文件
3. 外链样式：将CSS样式写在单独的CSS文文件件当中，需要用到的地方引入该外部样式表文件 #
1，外链样式 【head部分 将CSS样式写在单独的CSS文文件件当中，需要用到的地方引入该外部样式表文件】
<link rel="stylesheet" type="text/css" href="../css/base.css">
2.内嵌样式 【head部分采用<style>标 签。范围是针对当前文件】
<style>
p {color: forestgreen; font-size: small;}
</style>
3.行内样式【在某个特定的元素当中采用style属属性性。只对当前元素有效】
<p style="color: blueviolet; font-size: x-large;">段落2</p >
link 元素用于链接外部css样式表等其他相关外部资源。
link
其中link中包括如下属性。
href：指明外部资源文件的路径，即告诉浏览器外部资源的位置
hreflang：说明外部资源使用的语言
media：说明外部资源用于哪种设备
rel：必填，表明当前文档和外部资源的关系
sizes：指定图标的大小，只对属性rel="icon"生效
type：说明外部资源的 MIME 类型，如text/css、image/x-icon
rel核心属性的参数值如下，也可参考 MDN。alternate：链接到文档的替代版本
archives：链接到文档集或历史数据
author：提供指向文档作者的链接
bookmark：定义文档在收藏夹中显示的书签图标
canonical：指明网站的规范版本
dns-prefetch：指定浏览器预先执行目标资源的DNS解析
external：链接到外部，即告知搜索引擎，此链接不是本站链接
first：链接到集合中的首个文档
help：链接帮助信息
icon：定义网站或网页在浏览器标题栏中的图标
license：链接到文档的版权信息
last：链接到集合中的末个文档
nofollow：指定文档不被搜索引擎跟踪，即某些页面不被爬虫抓取
next：记录文档的下一页（浏览器可以提前加载此页）
noreferrer：可以阻止浏览器发送访问来源信息
preload：对资源进行预加载
pingback：提供处理当前文档的pingback服务器地址
prefetch：对资源进行预加载并缓存，通常preload用于加载当前页面的资源，而prefetch用于加载将来页面可能需要的资源
preconnect：预先连接到目标资源的地址
prev：记录文档的下一页
search：链接到文档的搜索工具
stylesheet：指定作为样式表的外部资源
sidebar：指定浏览器边栏中显示的文档
tag：指定当前文档使用的标签、关键词
up：指向一个文档，此文档提供此网页的上下文关系
1、标签选择器
结构： 标签名{css属性名：属性值}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：1.标签选择器选择的是一类标签，而不是单独的一个
2.标签选择器无论嵌套关系有多深，都能够找到对应的标签
标签选择器作用； 可以选取所有的指定标签的元素
2、类选择器
结构： .类名{css属性名：属性值；}
作用：通过类名，找到页面中所有的带有这个类名的标签，设置样式
注意：1.所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
2.类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
3.一个标签中可以同时有多个类名，类名之间用空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标
类选择器 作用 ；可以选取包含该class 类选择器 属性值的所有元素
3.id选择器
结构： #id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：1.所有的标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
区别：
class类名和id属性值之间的区别
class类名相当于姓名，可以重复，一个标签中可以有多个class类名
id属性值相当于身份证号码，不可重复，一个标签里面只能有一个ID属性值
类选择器和id选择器之间的区别
类选择器以.开头
id选择器以#开头
实际开发中的情况
类选择器用的最多
id一般配合js来使用，除非情况特殊，一般不要给id设置样式
实际开发中会遇到冗余代码的抽取
ID选择器作用 ； 选取ID属性值等于当前值的元素，因为ID属性的唯一性，ID选择器只能选择到一个元素
例如 #to_ 163 {color: blue;}
4、通配符选择器
结构： *{css属性名：属性值}
作用：找到页面中所有的标签，然后设置样式
注意：1.开发中应用极少，只有在特殊的情况下才会使用
2.在小页面中可能会用于去除页面中默认的margin和padding
复合选择器有两种；①交集选择器 作用；选择同时满足多个选择器要求的元素，多个基础选择器连续的写在一起，如果有标签选择器，需要写在第一个 ②并集选择器：选择满足任意一个选择器的元素，多个基础选择器用逗号隔开 例如：a.c3 {color:crimson;}
1、交集选择器
语法： 选择器1选择器2{css样式}
作用：选中页面中同时满足过个选择器的标签 紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：之间没有任何东西隔开，紧挨着的
交集选择器中如果有标签选择器，标签选择器必须放在前面
2、并集选择器
语法： 选择器1,选择器2{css样式}
并集选择器：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意： 选择器与选择器之间用,隔开
可以是基础选择器或者复合选择器
每组选择器通常一行写一个，提高代码的可读性
关系选择器
1.子代选择器 只会选择亲儿子，> 语法：父元素>子元素{}
作用：通过指定的父元素找到指定的子元素 <style>
p > span{color: blueviolet;}
</style>
</head>
2 后代选择器 作用 ；选择所有的子孙后代,空格表示后代关系
作用：通过指定的祖先元素找到指定的子元素
语法：父元素 子元素{}（父元素和子元素中间空格） <style>
p span{color: blueviolet;}
</style>
</head>
<body>
<p>这个也会<span>后代选择器</span></p >
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
