CSS基础

css引入样式

        内联样式 ：

                缺点：容易造成代码冗余

                优点：优先级最高 

        内部样式表：

                缺点：样式的复用率较低

                优点：样式与结构分离

        外部样式表：

                优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

        样式优先级：行内样式>内部样式/外部引入

        使用@import引入css文件 不推荐 必须放在style标签第一行

                缺点：优先加载html 再加载css、兼容性差 ie5+、属于css

@inport和外部样式表的区别：

        外部样式表：属于html，同时加载html和css

        @import：属于css，先加载html再加载css

CSS选择器

        标签选择器：根据标签名称对当前页面所有该名称标签设置共同属性

                格式: ​ 标签名称{ ​ 属性:值;  }

        id选择器：根据id为对应标签设置属性

                格式：#id名称{ ​ 属性:值; ​ }

                注意点：同一个界面id不可重复、一般不用id设置样式，id一般留给js使用

        类选择器：根据类名找到对应的标签设置属性

                格式：.类名{ ​ 属性:值; ​ }

                注意点：同一个页面类名可重复、类名专门用来设置css样式、每个标签可以绑定多个类名

                id和class的区别：id相当于人的身份证不可以重复 ​ class相当于人的名称可以重复、一个HTML标签只能绑定一个id名称 ​ 一个HTML标签可以绑定多个class名称

        后代选择器：指定标签所有的后代设置属性

                格式：标签名称1 标签名称2{ ​ 属性:值; ​ }

                注意点：后代不只是儿子属性，也可能是孙子属性等

        子元素选择器：找到所有的儿子元素设置属性

                格式：标签名称1>标签名称2{ ​ 属性:值; ​ }

                注意点：只能寻找儿子属性

        伪类选择器：伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

        序选择器：CSS3中新增的选择器最具代表性的就是序选择器

                ​ 1.同级别中的第几个、:first-child 选中同级别中的第一个标签 ​、:last-child 选中同级别中的最后一个标签 ​、:nth-child(n) 选中同级别中的第n个标签、:nth-last-child(n) 选中同级别中的倒数第n个标签 、:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效

                2.同级别同类型中的第几个 ​ :first-of-type 选中同级别中同类型的第一个标签 、:last-of-type 选中同级别中同类型的最后一个标签 、:nth-of-type(n) 选中同级别中同类型的第n个标签 、:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 ​ 、:only-of-type 选中父元素的特定类型的唯一子元素

        动态伪类选择器：E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上、E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 、E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 、E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。

        伪元素选择器：

                ::after ​ 表示元素的最后边的部分 ​ 一般需要结合content这个样式一起使用， ​ 通过content可以向after的位置添加一些内容

                ::before ​ 表示元素最前边的部分 ​ 一般需要结合content这个样式一起使用，通过content可以向before的位置添加一些内容 ​

                ::first-letter ​ 为第一个字符来设置一个样式 ​

                ::first-line ​ 为第一行设置一个样式

        通配符选择器：给当前界面上所有的标签设置属性

                格式：*{ ​ 属性:值; ​ }

CSS三大特性

        继承性

                给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

                注意点: ​

                       1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 

                       2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 ​

                       3.继承性中的特殊性 ​

                                3.1 a标签的文字颜色和下划线是不能继承的,当做子元素 ​

                                3.2 h标签的文字大小是不能继承的，在做子元素

        层叠性

                层叠性就是CSS处理冲突的一种能力

                注意点: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

        优先级

                当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

                权重的计算规则 ​

                        内联样式，如: style="..."，权值为1000。 ​

                        ID选择器，如：#content，权值为0100。 ​

                        类，伪类、属性选择器，如.content，权值为0010。 ​

                        标签选择器、伪元素选择器，如div p，权值为0001。 ​

                        通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。

                        继承的样式没有权值