CSS简介

书写位置、各自的优缺点  

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

        书写位置：开始标签  style属性，讲css样式写在style属性值里面

        可以写多个样式，只要用分隔号；隔开即可

        优缺点：

          优点：有针对性

          缺点：1、结构和表现耦合了

          2、修改起来不方便

        注意：不推荐使用

        第二种方式：内部样式表

       书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，

        在花括号里面书写css样式，可以写多组样式，样式之间用；隔开,

        最后一个样式后可以不加分隔号，但一般都加上

        优缺点：

        缺点：复用率不高

        注意：css比较多的时候，不推荐使用

        但教学期间，用的可能比较多

       第三种方式：外部样式表

        书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中

        对应的html结构，在花括号里面书写css样式,

        然后在head标签内写一个link标签将对应的css文件引入到html文件内

        注意：推荐使用

       css语法：样式名，样式值

               color   设置字体的颜色  red  green  yellow  

               font-size  设置字体的大小   px   默认的字体大小是16px

               background-color  设置背景颜色   red  green  yellow

      CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

      CSS的语法：

       选择器  声明块    

       选择器：有多种选择器

       声明块：具体的css样式，是写在花括号里面

       样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

      /* 四种常用的选择器 */

      /* 需求一：标题变红色 */

      /* 1、元素选择器（标签选择器）

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

      语法：标签名{css样式····}

      例子：h1{}，h3{},p{}

      需求二：将第一句诗变绿色 */

      /* 2、id选择器

      作用：选中对应id属性值的内容

      语法：#id属性值{}

      例子：#p1{},#p2{}····

      注意：id属性值不能重复使用

      需求三：将第二句诗也变绿色 

       3、class选择器

      class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用

      作用：选中对应class属性值的内容

      语法：.class属性值{}

      注意：class属性值可以起多个，中间用空格隔开即开

      例子：.s1{},.ss{},.pp{}

      需求四：给所有的标签字体变为24px */

       4、通配选择器

       作用：选中所有的标签，进行设置

          语法：*{} 

       复合选择器两种 交集选择器，并集选择器  */

      需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */

      1、交集选择器

      作用：选中同时符合多个条件的内容

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

      注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面

      例子：p#p1.pp{},div.ss{}

      需求二：将h1,h3字体颜色变为棕色

      2、并集选择器（群组选择器）

      作用：同时选中对应的内容

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

      例子：.red,#red1,div,p{}

       用关系选择器来选中 */

      需求一：为div的子元素h2设置一个字体颜色红色

      1、子元素选择器

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

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

      例子：#red>.green{},   .pp>em{}

      需求二：div里的span元素字体都变为30px 

      2、后代选择器

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

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

      例子：.class .red{},#red p{}

      需求三:通过衣服p标签找到生鲜区,加背景色粉丝

      3、下一个兄弟选择器

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

      语法：兄+弟{} 

      需求四:

      通过衣服区找到下面所有的兄弟，设置字体颜色棕色

      4、选择下面所有的兄弟(前面的不选)

      作用：通过指定的兄长找到下面所有的兄弟

      语法：兄～弟{}

      例子：#red～.p1{}

     元素之间的关系

    父子关系

    父元素  直接包含子元素的元素

    子元素  直接被父元素包含的元素

    祖先后代关系

    祖先元素  直接或间接包含元素的元素，包括父元素

    后代元素  直接或间接被包含的元素，包括子元素

    兄弟关系

    拥有共同父元素的元素

     需求一：有title属性的p标签，颜色变为红色   

     1:属性选择器

      通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

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

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

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

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

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