CSS基础知识（一）

（选择器、伪类、伪元素、样式继承、单位）

1、 CSS 层叠样式表 ，用来设置网页中元素的样式。

 （网页实际是一个多层的结构，通过css分别对每一层设置样式，而最终可见的只有最上面一层）

2、CSS设置元素的样式

 第一种（内联样式，行内样式）

              -标签中通过style属性来设置元素样式

      问题：

              -只能对一个标签生效，当样式发生变化时不便于后期的维护

                注意：开发时绝对不能使用内联样式 

第二种（内部样式表）

          -将样式编写到head的style标签中，然后通过css的选择器来选中元素并为其设置各种样式

           可以同时为多个标签修改样式

          -内部样式表更加方便对样式复用

        问题：内部样式只能对一个网页起作用，不能跨页面进行复用

第三种（外部样式表）

             -可以将css样式编写到外部css文件中，然后通过link标签进行引入

             -可以在不同页面进行复用

             -可以使用到浏览器的缓存机制，从而加快网页加载速度，提高用户体验

3、CSS的基本语法：选择器  声明块

选择器：通过选择器选中页面中的指定元素

声明块：通过声明块指定要为元素设定的样式

           声明块是由一个一个的声明组成；

           声明是一个名值对结构，一个样式名对应一个样式值，名和值之间用：隔开以逗号结尾；

注：style中的编写语法全部按照css的规则进行，不使用html的规则

4、选择器

（1）常用选择器

                 -元素选择器

                      作用：根据标签来选定指定元素

                      语法：标签名（）

                      例子:p{} h1{} 

                 -id选择器

                      作用：根据元素id属性选择一个元素

                      语法：#id属性值

                      例子：#box{} #abc{}

                 -类选择器

                      作用：根据元素的class属性选中一组元素

                      语法：.class属性值

                      （class是一个标签的属性，与id类似，不同之处是class可以重复使用，

                      可以通过class属性为元素分组，一个class可以对应多个属性值

                 -通配选择器

                       作用：选中页面中的所有元素

                       语法：*{}        

（2）复合选择器

                 -交集选择器

                       作用：选中同时复合多个条件的元素

                       语法:选择器1选择器2选择器3选择器n{}

                       注意点：交集选择器如果有元素选择器，必须使用元素选择器开头

                 -选择器分组（并集选择器）

                       作用：同时选择多个选择器对应的元素

                       语法：选择器1,选择器2,选择器3,选择器n{}

（3）子元素选择器

                作用：选中指定的元素的指定子元素

                语法：父元素>子元素

（4） 后代元素选择器：

                作用：选中指定元素内的指定后代元素

                语法：祖先(空格)后代

            选择下一个兄弟

                     语法：前一个+后一个

            选择下边所有兄弟

                      语法：前一个~后一个

补充：

        父元素 ：直接包含子元素的元素

        子元素 ：直接被父元素包含的元素

        祖先元素 ：直接或间接包含后代元素的元素

                  父元素也是其祖先元素

        后代元素 ：直接或间接被祖先元素包含的元素

                  子元素也是后代元素

        兄弟元素 ：拥有相同父元素的元素

（5）属性选择器                   

         [属性名] 选择含有指定属性的元素

         [属性名=属性值] 选择含有指定属性名和属性值的元素

         [属性名^=属性值] 选择属性值以指定值开头的元素

         [属性名$=属性值] 选择属性值以指定值结尾的元素

         [属性名*=属性值] 选择属性值中含有某值的元素

（6）伪类选择器 

     伪类：（不存在的类，特殊的类）用来描述一个元素的特殊状态

     比如：第一个子元素、被点击的元素、鼠标移入的元素……

      伪类一般情况下都是使用冒号开头

              :first-child 第一个子元素

              :last-child  最后一个子元素

              :nth-child() 选中第n个子元素

                 （）特殊值：

                     n  第n个 

                     2n 或even 表示选中偶数位元素

                     2n+1 或odd 表示选中奇数位元素

以上这些伪类都是根据所有子元素进行排序

               :first-of-type 

               :last-of-type

               :nth-of-type()  括号里的n表示同类型的第n个

 这几个伪类的功能与上述基本相同。不同点是其在同类型元素中进行排序

                :not() 否定伪类         将符合条件的元素从选择器中除去

 超链接伪类：          

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

           :visited 用来表示访问过的链接(由于保护隐私，visited伪类只能修改颜色)

           :hover 用来表示鼠标移入的状态

           :active 用来表示鼠标点击

5、伪元素 ：

表示页面中一些特殊的并不真实存在的元素（特殊的位置）

伪元素以::开头

   ::first-letter 表示第一字母

   ::first-liner   表示第一行

   ::selection 表示选中的内容(被选择后的字体大小不能设置)

   ::before 元素的开始

   ::after  元素的最后      before和after必须结合content属性来使用

6、样式继承  

指某一元素设置的样式同时也会应用到其后代元素

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

 注意：并不是所有的样式都会被继承

            比如：背景相关、布局相关等；

7、样式冲突  

通过不同的选择器选中相同的元素，并为相同的元素设置不同值时，就会发生冲突

 发生冲突时使用选择器优先级决定   

        选择器优先级：

                 内联样式(行内样式)1，0，0，0

                 id选择器         0，1，0，0

                 类和伪类选择器   0，0，1，0

                 元素选择器       0，0，0，1

                 通配选择器       0，0，0，0

                 继承样式         没有优先级

    比较优先级时需要将所有选择器的优先级进行相加计算，最后优先级越高越优先显示（分组选择器则单独计算）

    同类型选择器的累计不会超过其最大的数量级，如：类选择其再高也不会超过id选择器

    若优先级计算后相同，此时优先使用靠下的样式

      可以在某样式的后边加！important ，此时该样式获得最高优先级，超过内联样式（在标签中使用style属性）

 注意：在开发中不得已才能使用！important

8、单位

长度单位：

                  像素：

                      -屏幕（显示器）实际上是一个一个的小矩形构成

                      -不同屏幕像素大小不同，像素越小屏幕显示效果越清晰

                      -同样像素在不同设备下显示效果不一样

                 百分比：

                       -可以将属性值设置为相对于其父元素属性的百分比

                       -子元素会随着父元素的改变而改变

                 em :

                       -em是相对于元素字体大小来计算的

                       -1em=1font-size(font-size默认值为16)

                       -em会根据字体大小的改变而改变

                 rem :

                        -rem是相对于根元素的字体大小来计算

颜色单位：

                 在CSS中使用颜色名来设置各种颜色很不方便

               RGB值 

                     -通过三种颜色的不同溶度来调配出不同颜色

                     -每种颜色的范围（0~255）（0%~100%）

                     -语法：RGB(红色,绿色,蓝色)

                 RGBA值

                     -在rgb基础上增加一个a表示透明度

                     -前三种表示同rgb,a: 1表示完全不透明 0表示透明 0.5表示半透明

                十六进制RGB值

                     -语法：#红色绿色蓝色

                     -颜色溶度通过00-ff表示

                     -当颜色两位两位重复时可以简写 如：#aabbcc-->#abc