计算机小白对CSS（层叠样式表）的小结（第三天）

0.1书写位置

第一种方式：内联样式

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

                css样式语法：样式名：样式值  名值对结构  如：color：red

                可以写多种css样式，只是要用；隔开

                优势：比较有针对性               

                缺点：1、不容易修改（几万行的话）2、结构和样式耦合了

第二种方式：内部样式表

                在head标签里新建一个style标签，通过各种选择器选择对应的元素，然后在{}里写名值对，也可以写多种样式.

                优势：修改比较方便，结构和表现都分开

                缺点：不方便复用

第三种方式：外部样式表

                    在html文件外，新建.css文件，在css文件里，选中对应的元素，设置样式

                    通过link标签，引入.css文件，即可生效

                    这种方式推荐使用

                    比较方便复用，而且html文件也更干净

0.2 css语法

                css语法：选择器  声明块（名值对结构）

0.3常用选择器

一、元素选择器

        作用：选择对应标签里的内容

        语义：标签名{}     如h1{}  p{}

二、id选择器

        作用：选择对应属性值里的内容

        语义：#id属性值{}  如 #p1{}

        注意：id属性值是独一无二的存在

三、class 选择器

         注意：id选择器和class选择器很像，只不过class属性值可以复用

         语义：.class属性值{}   如.p2{}

四、通配选择器

        作用：选中页面中所有的元素

       语义： *{}

04.css复合选择器

1、交集选择器

      作用：选中同时符合多个选择器条件的元素

      语法：选择器1选择器2···{}

      例如  div.red{}  .red1#red2{}

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

2、并集选择器

     作用：同时选中对应选择器的元素

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

05.关系选择器

1、子元素选择器

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

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

2、后代选择器

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

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

3.下一个兄弟选择器(仅挨着我的)

      语法：兄+弟{}

 4、所有兄弟选择器

      语法：兄~弟{}

元素之间的关系

      父子关系     直接包含、被包含的关系

      祖先后代关系  直接或间接包含、被包含的关系

      兄弟关系      拥有共同的父元素