如何在html中使用css

         1.行内样式
           
           将模式写在元素的style属性中

           <div style='color:red；font-size：22px；'>

           缺点：结构和样式没有分离
               
                 代码的复用率低

           优点：优先级高

        2.内联样式
           
           将代码写在head中的style标签中

           缺点：代码复用率低

           优点：结构和代码可以分离     

        3.外部样式

            在外部定义一个后缀名为.css的文件，在head中使用link标签引入

            优点：结构和样式分离
                  复用率提高

        3.css选择器

            作用：选择元素

            核心选择器：标签选择器
             div{
                 规则；
                 规则；
             }

             选中标签为div的所有元素

             id选择器
              
              #id{
                规则；
                规则；
              }
             

              类选择器
              .class{
                  规则；
                  规则；
              }

              普遍选择器

              *

              层次选择器
                
                后代选择器

                 ul li{
                     规则；
                     规则；
                 }

                 选中ul下面所有的li

                 子代选择器

                 .bottom>p{
                     规则；
                     规则；
                 }

                 选中class为bottom中的直接子元素p

                 兄弟选择器

                 .jiangsu+li{
                     规则；
                     规则；
                 }

                 选中class为江苏这个元素的下一个兄弟元素

                 一般同胞选择器

                  .jiangsu~li{
                      规则；
                      规则；
                  }

                  他会选择class为江苏的所有兄弟元素

                  多选择器
                  1）逗号选择器
                  h1，h2，h3，test{
                      规则；
                      规则；
                  }
                  选中h1，h2，h3，class为test的元素

                  2）组合选择器

                  a.百度{
                      规则；
                      规则；
                  }
                  选中class为百度的a标签

                  属性选择器

                  [attr]选中具有属性atrr的元素，不管属性的值为多少
                  [atrr=val]选中具有atrr属性，并且值为val
                  [atrr^=val]选中具有atrr属性，并且值以val开头
                  [atrr$=val]选中具有atrr属性，并且值以val结尾
                  [atrr*=val]选中具有atrr属性，并且值包含val
                  [atrr~=val]选中具有atrr属性，bingqieattr的值之一为value的元素

    伪类选择器

      子代元素相关的伪类选择器

        ul:first-child {
          规则；
          规则；
          ....
        }

        选中ul的第一个孩子

        ul:last-child {
          规则；
          规则；
          ....
        }

        选中ul的最后一个孩子

        ul:nth-child(参数) {
          规则；
          规则；
          ....
        }
        参数的取值：
            1.数字

            2.关键字（odd=>奇数，even=>偶数）

        选中参数值的孩子

      元素状态相关的

        :hover     鼠标悬停在上面时
        
        :link

        :visited

    伪元素选择器

      ::after     选中之后不存在的元素

      ::before    选中之前不存在的元素