CSS知识点速记（一）

网页分成三个部分：

• 结构(HTML)
• 表现(CSS)
• 行为(JavaScript)

CSS（层叠样式表）网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。总之一句话，CSS用来设置网页中元素的样式的。

使用CSS来修改元素的样式方法有三种

第一种方式(内联样式，行内样式)：

• 示例代码：

<p style="color:red; font-size: 60px;">哥伦布日记</p>

• 在标签内部通过style属性来设置元素的样式
• 存在问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
• 注意：开发时绝对不要使用内联样式

第二种方式（内部样式表）

• 将样式编写到head中的style标签里， 然后通过CSS的选择器来选中元素并为其设置各种样式， 可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
• 优点：内部样式表更加方便对样式进行复用
• 存在问题：我们的内部样式表只能对一个网页起作用， 它里边的样式不能跨页面进行复用

第三种方式 （外部样式表） 最佳实践

• 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
• 优点：外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
• 示例代码：

<link rel="stylesheet" href="./style.css">

CSS中的注释/* */，注释中的内容会自动被浏览器所忽略

CSS的基本语法:

• 选择器：声明块-选择器，通过选择器可以选中页面中的指定元素，比如 p 的作用就是选中页面中所有的p元素-声明块，通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成， 声明是一个名值对结构， 一个样式名对应一个样式值，名和值之间以:连接，以;结尾

CSS常见选择器

1、元素选择器

• 作用：根据标签名来选中指定的元素
• 语法：标签名{}
• 例子：p{} h1{} div{}

2、id选择器(id具有唯一性，不能重复)

• 作用：根据元素的id属性值选中一个元素
• 语法：#id属性值{}
• 例子：#box{} #red{}

3、类选择器

• 作用：根据元素的class属性值选中一组元素
• 语法：.class属性值
• 例子：

在HTML中
<h1 class="blue abc">我是标题</h1>
在CSS中
.blue{
          color: blue;
      }

4、通配选择器

• 作用：选中页面中的所有元素
• 语法: *
• 例子: *{}

CSS的复合选择器

1、交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1选择器2选择器3选择器n{}
• 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

2、选择器分组（并集选择器）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,选择器3,选择器n{}
• 例子：

#b1,.p1,h1,span,div.red{}

元素间的关系：

• 父元素：直接包含子元素的元素叫做父元素
• 子元素：直接被父元素包含的元素是子元素
• 祖先元素：直接或间接包含后代元素的元素叫做祖先元素， 一个元素的父元素也是它的祖先元素
• 后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素是兄弟元素

CSS的关系选择器

1、子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素

2、后代元素选择器：

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代

3、兄弟选择器：

• 作用：选中指定的兄弟元素
• 选择下一个兄弟语法：前一个 + 下一个
• 选择下边所有的兄弟语法：兄 ~ 弟

CSS的属性选择器：

• 作用：选择含有指定属性的元素
• 语法：[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素
• 例子：

p[title*=e]{
          color: orange;
      }

CSS的伪类选择器

1、伪类（不存在的类，特殊的类）

• 伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素…
• 伪类一般情况下都是使用:开头:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素 -特殊值： -n 第n个 n的范围0到正无穷 -2n 或 even 表示选中偶数位的元素 -2n+1 或 odd 表示选中奇数位的元素
• 注意：以上这些伪类都是根据所有的子元素进行排序
• 以下几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序:first-of-type:last-of-type:nth-of-type()
• 否定伪类：:not() 作用：将符合条件的元素从选择器中去除

a元素的伪类

• :link 用来表示没访问过的链接（正常的链接）
• :visited 用来表示访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色
• :hover 用来表示鼠标移入的状态
• :active 用来表示鼠标点击

CSS的伪元素选择器：

• 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）伪元素使用 :: 开头::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容::before 元素的开始 ::after 元素的最后
• before 和 after 必须结合content属性来使用，通过before和after添加的内容是无法被鼠标选中的

样式的继承：

• 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先和后代之间的，继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
• 注意：并不是所有的样式都会被继承。比如：背景相关的，布局相关等的这些样式都不会被继承。

样式的冲突

• 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
• 注意：发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重

• 内联样式 1,0,0,0
• id选择器 0,1,0,0
• 类和伪类选择器 0,0,1,0
• 元素选择器 0,0,0,1
• 通配选择器 0,0,0,0
• 继承的样式 没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！