HTML+css+js学习安排日程day03

css样式及选择器

一、css样式

1、内联样式

内联样式/行内样式

       在开始标签内，配置style属性，在style属性值里写css样式

       可以写多组css样式，样式与样式之间用;隔开

       缺点：

          1、结构和样式耦合

          2、不容易修改

       总结：不建议使用

    <div style="color:pink;font-size: 50px; background-color: aqua;">到谓了，切挟身生已。</div>

    <div style="color:pink;font-size: 50px; background-color: aqua;">到谓了，切挟身生已。</div>

    <div style="color:pink;font-size: 50px; background-color: aqua;">到谓了，切挟身生已。</div>

    <div style="color:pink;font-size: 50px; background-color: aqua;">到谓了，切挟身生已。</div>

2、内部样式

在head标签里配置style标签，通过选择器选中对应html结构，

      在花括号里面设置css声明块，可以写多组样式，也是以;隔开

      语法：选择器{css声明块}

      缺点：不方便复用

           html文件会变得很长，看起来也不好看

      总结：比较大的项目，或者重复使用率比较高的部分，不建议使用

 <style>

      div {

        color: pink;

        font-size: 50px;

        background-color: red;

      }

    </style>

3、外部样式

   在html文件外新建一个.css文件，在css文件通过选择器选中对应的结构，设置相关的样式

    通过link标签，将html文件和css文件联系在一起

    总结：大的项目，或者复用率高的，推荐使用

<link rel="stylesheet" href="./03peiqi.css" />

/* 选择器{ css声明块}*/

p{

    color: red;

    background-color: pink;

}

二、css选择器

 常用选择器

        1、元素（标签）选择器

          作用：通过标签名选中对应的内容

          语法：标签名{

            css样式

          }

          注意：html常用的标签大概也就20多个，如果用元素选择器来选中设置样式 一定要注意是否波及到其他内容。如果波及到了 就不要用元素选择器

        2、id选择器

          作用：通过对应的id属性值选中对应的结构

          语法：#id属性值{

            css样式

          }

          注意：id属性值不能重复使用 不能以数字开头，不能是汉字。

        3、class选择器

          作用：通过指定的class属性值选中对应的内容

          语法：.class属性值{

            css样式

          }

          ***注意：可以起多个属性值 中间以空格隔开***

          ***这也是最常用的选择器***  

        4、通配选择器

          作用：选中页面中所有的标签

          语法：*{

            css样式

          }

     -->

      复合选择器

      1、交集选择器

        作用：选中满足多个条件的元素

        语法：选择器1 选择器2 选择器3{

          css样式

        }

        注意：如果选择器中有元素选择器 元素选择器必须放在第一位

      2、并集选择器

        作用：选中多个选择器对应的内容

        语法：选择器1，选择器2，选择器3.。。。。{

          css样式

        }

    -->

    <!--

      关系选择器

      1、父子关系：直接包含和被包含关系

      2、祖先后代关系：直接或间接包含和被包含关系

      3、兄弟关系：拥有共同父元素的元素标签

         ***子元素选择器：通过指定的父元素找到指定的子元素***

            语法：父元素>子元素{

              css样式

            }

        ***后代选择器***

           作用：通过指定的祖先元素找到指定的后代元素

           语法：祖先元素 后代元素{

            css样式

           }    

           注意：由于子元素一定的条件下也属于后代元素，所以在使用的时候 能用子元素的选择器尽量不用后代选择器。否则一定程度上会影响网站性能。

        ***下一个兄弟选择器***

           作用：通过指定兄找到指定的下一个兄弟

           语法：兄+弟{

            css样式

           }  

        ***选择所有兄弟选择器***

            作用：通过指定的兄找到所有的兄弟，不包括前面的

            语法：兄~弟{

              css样式

            }  

      属性选择器：通过指定的属性名或属性值来选中对应的内容

      语法：[属性名]{} 选择含有指定属性的元素

      语法：[属性名=属性值]{}选择含有指定的属性和属性值的元素

      语法：[属性名^=属性值]{}选择属性值以指定开头的元素

      语法：[属性名*=属性值]{}选择属性值含有某值的元素

      语法：[属性名$=属性值]{}选择属性值以指定结尾的元素

      注意：语法有点特殊，在中括号内可以写多种变化，

  

      伪类选择器：不存在的类或者特殊的类 不特指某一个元素 指的是一个元素的特殊状态

      1、：first-child

      2、last-child

      3、nth-child（） 选择第n个元素 2n或even 偶数 2n+1或odd 奇数

      否定伪类 ：not（）