计算机小白对css（层叠样式表）的大总结（第四天）

0.1书写位置

第一种方式：内联样式

                直接写在开始标签里，用style属性，在属性值里写css样式

                样式的语法：属性名：属性值（名值对结构）

                优势：比较有针对性；

                缺点：不容易修改，结构和耦合在一起

第二种方式：内部样式表

                在head标签里写一个style标签，通过各种选择器选对对应元素，然后在{}里写css样式，也是名值对结构

                样式的语法：如 p{}、#p1、.p2

                优势：方便修改，结构和表现分明

                劣势：不方便复用

第三种方式：外部样式表

                在html文件外新建一个css文件，在css文件里选中对应的样式，然后通过link标签引入css文件，即可生效。

                优势：方便复用

02.常用选择器

1、元素选择器

语法：标签名{}  如 h1{}

2、id选择器

语法：#属性值{}  如#a{}

3、class选择器

语法：.属性值{}    如.b{}

4、通配选择器

语法：*{}

0.3复合选择器

1、交集选择器：                语法：选择器1选择器2选择器3{}

2、并集选择器：                语法：选择器1；选择器2；选择器3{}

0.4关系选择器

1、子元素选择器：                语法：父元素>子元素{}

2、后代选择器：                    语法：祖先元素  后代元素{}

3、兄弟选择器（下一个相邻的兄弟）：                    语法：兄+第{}

4、所有兄弟选择器：                语法：兄~弟{}

0.5属性选择器

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

                 [属性名=属性值]{}  选择含有指定属性以及指定属性值的元素

                 [属性名^=属性值]{}    选择含有指定属性以及指定属性值开头的元素

                 [属性名$=属性值]{}    选择含有指定属性以及指定属性值结尾的元素

                 [属性名*=属性值]{}    选择含有指定属性,只要含有某个属性值的元素

0.6伪类选择器

一、伪类选择器：  不存在的类，表示一种状态，就好比第一个，倒数第一个

        ：first-child  第一个子元素

        ：last-child   最后一个子元素

        ：nth-child（n）   第n个子元素

                n        选中所有子元素       

                2n/even        偶数

                2n+1/od        奇数

        以上的伪类是根据所有的子元素排列的

        :first+of+type        第一个子元素

        ：last-of+type        最后一个子元素

        ：nth-of+type        第n个子元素

        同类型中进行排列

二、:not() 否定伪类  将符合条件的元素去除

        额外知识点：去掉项目符号

        ul,li{

                list-style: none;

                margin: 0;

                padding: 0;

              }

0.7、元素的伪类

1、 :link 表示未访问过的a标签的状态

        a:link{

                 color: red;

               }

2、 :visited  表示访问过的a标签的状态

        a:visited{

                 color: orange;

3、:hover  鼠标移入后，元素的状态

        a:hover{

                font-size: 30px;

                color: red;

                }

4、:active  鼠标点击后，元素的状态

 div{

        width: 200px;

        height: 100px;

        background-color: orchid;

      }

      div:hover{

        background-color: palegreen;

      }

      div:active{

        width: 100px;

        height: 50px;

        background-color: peru;

      }

0.8伪元素选择器

        ::first-letter  第一个字母

        ::first-line    第一行

        ::selection    选中的内容

        ::before     在元素开始的位置前

        ::after      在元素结束的位置后