html选择器

CSS的作用：

     就是用来改变文本的样式

CSS三大特性

     继承性：给父类元素设置一些属性以后，子类也可以使用，叫继承性

    如果对父类标签设置样式以后，如果子类标签没有单独设置样式默认继承父类的样式

  注意：

   1、并不是所有的都可以继承，只有以color  font-  text  line开头的才可以继承

    2、继承不仅仅是直接子代可以继承，后代同样可以继承

   3、超链接的文字颜色和下划线是不能继承的

     层叠性

          就是css处理冲突的能力

          注意点：

              层叠型只有在多个选择器同时选中同一个标签，有设置了相同的属性，才会发生层叠型

               如果多个选择器设置的属性没有重复则样式重叠

   

  优先级

     当多个选择器选中同一个标签，并且给同一个标签设置了相同的属性时，

     如何层叠，由优先级来确定

优先级判断的三种方式：

      1、选择器是否直接选中（间接选中指的就是继承），如果是间接选中采取就近原则

      2、是否是相同的选择器

             如果选择器相同  谁在后面听谁的

        3、如果是不同的选择器

                 根据选择器的优先级  比如   id选择器>类选择器>标签选择器

       4、!important  优先级最高

             color: yellow !important;

  注意点：！必须要

       important  必须要写；前面

       

语法：

选择器｛

    属性:  属性值；

   ｝

   p{

       color:red;

   }

格式：

   <style  type="text/css">

      选择器{

                属性:  属性值；

          }

</style>

注意点：

       style标签必须写在head标签里面

       属性 type="text/css"可写可不写

CSS的三种方式

    1、行内样式--直接写在标签里面的样式  

        <p style="color:red">今天星期五，明天再上一天班就可以休息</p>

不推荐使用  增加了结构的复杂度

    2、内部样式

           CSS写在style标签里面

<style  type="text/css">
    h1{

color:red;
    }

</style>

    3、外部样式

        单独写一个css文件，然后在页面使用引入或导入的方式加载进来（推荐的写法）

      引入：  使用link标签引入  <link href="path" rel="stylesheet">

     导入：   使用@import   

 <style type="text/css">

@imprt url(path)

</style>

区别：

      企业实际开发只是用link方式的，再html外面单独写一个css文件

     外部链接link方式加载原理是，先把css文件和网页文件全部加载以后再显示页面效果，而导入式是先加载结构再加载CSS样式，所以可能在网速较慢的情况下客户看到的页面样式不是使用css后的样式

CSS基本选择器

      1、标签选择器

               直接选择标签名，不需要<>,表示对选中的标签直接设置css样式，使用标签选择器，在页面中所有的同名标签都会被选中

       2、类选择器

              根据指定的类名称找到对应的标签，然后设置样式

           格式：

              .类名｛

                      属性：属性值；

                 ｝

  注意点：

       1、每一个html标签都有一个属性叫class

        2、class属性值可以重复

        3、类名就是专门给某个特定的标签设置样式的(常用)

        4、每个标签可以有多个clss属性值 每个值之间使用空格隔开

     3、Id选择器

            格式：

                 #id值｛

               属性：属性值；

       ｝

注意点：

       1、每个标签都可以添加一个id属性

       2、同一个页面id属性值只允许出现一次（如果设置多个同名的值使用id选择器设置样式可以有效果

              因为，在后面学习的Js里面要求一个ID值只能出现一次，因为js通过id获取时只能拿到第一个）

       3、使用id选择器需要在ID值前面加#

       

    class选择器和ID选择器的编写规范：

        1、 id或class 名称只能是由数字、字母、下划线，不能以数字开头

        2、一般不推荐使用和html标签名一样的名字

        3、在前端开发里面，一般情况如果设置id属性值仅仅是为了设置样式，我们不推荐使用id选择器，因为在前端开发里面id属性是留给JS用

  

基本选择器的优先级

     ID选择器>类选择器>标签选择器

高级选择器

    层次选择器

         后代选择器：

  格式：

    选中的父标签  选中的后代标签{

                属性：属性值；

         }

     只要是父标签里面的后代标签都会被选中(包括子标签)

子选择器

  格式：

     选中的父标签>选中的子标签{

                属性：属性值；

         }

   只能选中父标签的直接子元素

后代选择器和子选择器的区别：

    后代可以选中子元素和后代元素，而子选择器只能选中子元素

  相邻兄弟选择器   

      格式：

           选中的标签+选中的选择器   E+F

       E+F{

 

                属性：属性值；

         }

       选择E紧跟其后的F标签，中间不能隔其他标签而且只能选中紧跟其后一个

  通用兄弟选择器  

     格式：

           选中的标签~选中的选择器   E~F

       E~F{

 

                属性：属性值；

         }

       选择E后面的F标签都被选中，不管中间有没有隔开都会被选中

   

并集选择器（掌握）

      需要同时对多个标签设置一样的样式时

    格式： E,F,A｛

            

          ｝

表示同时对E F A标签设置同样的样式

    h1,h2,h3,h4,h5{

    color: yellow;
}

  交集选择器（了解）

         EF

E只能是标签选择器

F可以id选择器也可以是类选择器

表示EF两者同时具备

    结构伪类选择器

 

   格式：

     E:first-child{

     }

  作为父类元素第一个子元素E

格式：ul li:nth-child(2)

  选择父级元素E的第n个子元素F，F必须是父级元素的第n个子元素

   

 属性选择器

 

*  选择器

     表示所有标签