CSS基础

目录

一、css基础

1.css简介

2.css语法

3.css书写位置

二、常用选择器

1.常用选择器

2、复合选择器

3、关系选择器

4、属性选择器

5、伪类选择器

---

一、css基础

1.css简介

html  超文本标记语言

css   层叠样式表

          —网页上实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式

           而最终我们能看到的只有最上面的一层

        设置css样式前提

          1、css书写位置

          2、如何选择对应的结构

2.css语法

html和css是两种不同的语言，所以有不同的书写位置

CSS的语法：选择器   声明块

        选择器：如何选中对应的html标签

        声明块：就是对应的css样式   名值对结构

3.css书写位置

css样式  名值对的结构  

           样式名：样式值

例如   font-size：20px；   （设置字体大小）

          color：red；        （设置字体颜色）

          backgroud：black；  （设置背景颜色）

第一种方式：内联样式/行内样式

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

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

第二种方式 内部样式表

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

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

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

第三种方式  外部样式表

        在html文件外新建一个.css文件 在css文件通过选择器选择对应的结构

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

二、常用选择器

1.常用选择器

1、元素（标签）选择器

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

        语法：标签名{  }

2、id选择器

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

         语法：#id属性值{  }

3、class选择器

          作用：通过指定class属性值，选中对应的结构

          语法：.class属性值{  }

4、通配选择器

           作用：选中页面所有内容

           语法：*{  }

2、复合选择器

1、交集选择器

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

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

2、并集选择器

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

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

3、关系选择器

元素之间的关系

      父子关系

            直接包含和被包含的关系

      祖先后代关系

           直接或间接包含和被包含的关系

      兄弟关系

           拥有共同父元素的标签

1、子元素选择器

          作用：通过指定的父元素找到指定的子元素

          语法：父元素>子元素{  }

2、后代选择器

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

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

3、下一个兄弟选择器

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

      语法：兄+弟{  }

4、选择所有兄弟选择器

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

       语法：兄~弟{  }

4、属性选择器

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

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

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

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

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

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

5、伪类选择器

一、伪类 （不存在的类 特殊的类）

         伪类不特指某一元素，指定是某一元素的特殊状态

          例如：第一个元素 被点击的元素 鼠标移入的元素...

        特点：一般情况一；开头

          (1) :first-child   第一个子元素

          (2) :last-child    最后一个子元素

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

               特殊值： n   所有的

                              2n，even    偶数

                              2n+1，odd   奇数

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

        1、:first-of-type  选择第一个子元素

        2、:last-of-type   选中最后一个子元素

        3、:nth-of-type()   选中第n个子元素

                功能跟上面的相似

                不同的是这是在同类型的子元素中去选择

二、:not(){  }  否定伪类

            将符合条件的元素从选择器中去除