HTML&CSS精华知识点——css引入、css基础选择器、层叠

• 选择器：选中元素
• 声明块：出现在大括号中包含很多声明（属性），每一个声明（属性）表达了一方面的样式
  三、CSS代码书写的位置
  1、行间样式（内部样式表）：直接在对应的HTML标签后面加上属性 style = “css 样式”
  2、页面级css（内联样式表）：在head标签里写上style标签

<style type=”text/css”>
css 样式
</style>

3、外部css文件（外部样式表）：新建一个css文档（文件名.css）然后在head标签里写上

<link rel="stylesheet" type="text/css" href="">

前两个属性是告诉浏览器这里边链接的是 css 样式， href 里边放地址，然后把 css 样式写在 css 文件里

• 【扩展】、异步加载：代码写好上传后，我们如果要访问这个页面，浏览器就要下载他的源码，下载的是副本，浏览器是把html和css一起下载并执行计算机里把两件事情同时叫做异步加载，计算机中的同步加载和我们生活中的正好相反。

四、css选择器
1、作用：精准的选中你想要的元素
2、选择器种类
1） id 选择器：给 HTML 元素后边加上属性 id=“id 值”，对应在 css 里边写上#id 值{css 代码}， 一个元素只能有一个 id 值，一个 id 值只能对应一个元素。
2） class 选择器：给 HTML 元素后边加上属性 class=“class 值”，对应在 css 里边写上 .class 值{css 代码}，和 id 不同的是： 一个元素可以有多个 class 值（写法：class=“class 值 1 class 值 2”）， 一个 class 值也可以对应多个元素。
3）标签选择器：在 css 里边写上标签名{css 代码}， 则 HTML 里边所有的此类标签都应用此 css 样式属性（不管这个标签在哪，也不管外边被套了多少层，都能被选中）。
4）通配符选择器：在 css 里边写上*{css 代码}， 则 HTML 里边所有的标签都应用此css 样式属性。
5）属性选择器：在 css 里边写上[id]{css 代码} / [class]{css 代码}， 则所有的id/class 元素都会应用此 css 样式，如果写上[id=“id 名” ]{css 代码} / [class=“class 名” ]{css 代码}， 则只有被命名成这种 id/class 名的元素可以应用此样式。
6）伪类选择器
：选中某些元素的某种状态
：hover，鼠标悬停上面的状态
：active，激活状态，鼠标按下状态
：link：超链接为访问时候状态
：visited，超链接访问过后的状态
顺序：注意如果说上面四个一起使用一定按照link visited hover active ，便于记忆，可以这个样， lvha 爱恨法则
7）伪元素选择器
：before
：after

<span>HTML</span>
        span::before{
               content:”《”
        }

五、层叠
1、声明冲突：同一个样多次应用到同一个元素，解决声明冲突的过程，浏览器自动处理
2、权重计算：
1）、比较重要性（重要性从高到低）
• 作者样式中的!important样式
• 作者样式表普通样式
• 浏览器默认样式表中的样式
2）、比较特殊性
看选择器，总体规则选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（XXXX）
• 千位：如果是内敛样式记作1，否则记作0
• 百位：等于选择器中所有id选择器中的数量
• 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
• 个位：等于选择器中所有元素选择器、伪类选择器的数量
逢256进1
3）、比较源次序
代码靠后的胜出