CSS学习笔记

CSS简介

CSS是一个层叠样式表，网页实际上是一个多层结构，通过css可以为网页的每一层设置样式，而最终我们看到的只是网页的最上一层。

总之，css是用来设置网页中元素的样式。

CSS的使用

第一张方式：（内联样式、行内样式）在标签内部通过style属性来设置元素的样式

 <p style="color:red;font-size:60px;"></p>

但是这种方式不推荐使用。问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。

第二种方式：（内部样式表）将样式编写到head中的style标签中，使用标签选择器

<style>
    p{color:red}
</style>

通过css选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用。问题：内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用。

第三种方式：（外部样式表）可以将样式表写在一个后缀为css的文件里（写选择器即可），然后通过link标签在网页中引入外部的css文件

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

这样意味着只要使用这样样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用；将样式编写到外部css文件中，可以使用到浏览器的缓存机制，从而加快网页的加在速度，提高用户体验。

注意：开发时绝对不要使用第一种内联样式，一般开发使用第三种外部样式表。在style标签里面的代码属于css，不属于html了，遵循css语法。

CSS语法

基本语法：选择器+声明块

注释：/*css注释*/，快捷键ctr+/

选择器（selectors）：通过选择器可以选中页面的指定元素，比如p的作用就是选中页面中的所有p元素

<style>
    p{color:red}
</style>

声明块：通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，各种值之间以：连接，以；结尾。

常用选择器

元素选择器：作用，根据标签名来选中指定的元素；语法，标签名{}；例子，p{}。

id选择器：作用，根据元素的id属性值选中一个元素；语法，#id属性值{}；例子，#box{}。

类选择器（class）：作用，根据元素的class属性值选中一组元素；语法，.calss属性值{}。class是一个标签属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性。

通配选择器：作用，选中页面中的所有元素；语法，*{}。

复合选择器：

交集选择器，选中同时复合多个条件的元素，交集选择器中如果有元素选择器，必须使用元素选择器开头。元素.class，eg. div.red。.class.class2，eg. .red.red1。

选择器分组（并集选择器），同时选择多个选择器对应的元素。选择器，选择器1。

关系选择器：父元素（直接包含子元素的元素），子元素，祖先元素（直接或间接包含后代元素的元素），后代元素，兄弟元素（拥有相同父元素的元素）。

子元素选择器，选中指定父元素的指定子元素，语法：父元素>子元素>....。

后代元素选择器，选中指定元素内的指定后代元素，语法：祖先 后代（用空格隔开）。选择下一个兄弟，语法：前一个+后一个（紧挨着）。选择下边所有兄弟，语法：兄~弟。

属性选择器：*[属性名]，选择含有指定属性的元素；[属性名=属性值]，选择含有指定属性和属性值的元素；[属性名^=属性值]，选择属性值以指定值开头的元素；[属性名$=属性值]，选择属性值以指定值结尾的元素；[属性名*=属性值]，选择属性值中含有某值的元素。

伪类选择器：伪类（不存在的类，特殊的类，特殊状态），用来描述一个元素的特殊状态，比如：第一个元素、被点击的元素、鼠标移入的元素等，伪类一般情况下都是使用冒号开头。

eg. ul>li:first-child，:first-child表示第一个子元素，:last-child表示第一个子元素，:nth-child(n)表示选中第n个子元素，若直接写n表示选中所有子元素，2n或even则是偶数，若写odd跟写2n+1一样表示奇数,注：以上伪类是根据所有子元素进行排序的；:first-of-type，:last-of-type，:nth-of-type()，这些表示在同一类型元素进行排序；:not()，否定伪类，表示将符合条件的元素从选择器中去除，eg. ul>li:not(:nth-of-type(3))，表示将第三个li去除，即除了第三个li。

a元素的伪类：超链接的状态。

        没访问过（:link，用来表示没访问的链接，即正常的链接）。

        访问过（:visited，用来表示访问过的链接，由于隐私原因，只能用于修改颜色，不能改字体大小等），以上伪类是只有a可以用，以下的所有都可以用。

        鼠标移入（:hover，用来表示鼠标移入的状态）。

        鼠标点击（:active，用来表示鼠标点击的状态）。

伪元素选择器：伪元素（表示页面中一些特殊的并不真实存在的元素，特殊位置），使用双冒号开头。

::first-letter，表示第一个字母；::first-line，表示第一行；::selection，表示选中的内容；::before，表示元素的开始位置，::after，表示元素的最后位置，before和after样式里必须结合content（设置最开头位置的内容）属性来使用。

样式的继承

当为一个元素设置样式，也会应用到它的后代元素上。

继承是发生在祖先后代元素之间的，利用继承可以将一些通用样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有元素都具有该样式。

注：并不是所有的样式都会被继承。如：背景相关的，布局相关等的这些样式。（有些样式之所以会有不是因为继承，而是因为默认背景色是透明，会透出祖先背景色）

选择器的权