Web前端-css1--引入方式与选择器 层级覆盖

                                                     css

css 中的样式格式语法:
      选择器{
          样式名:样式值;
          样式名:样式值;
          。。。。。。
       }

css 的引入方式:


           3种:
             1外部样式: (开发时候使用)
                        将css 的样式写到一个外部的.css 的文件中
                        在html文件中用一个link 标签将两个文件进行关联(友情提示: link标签放到head内部)
                      <link rel="stylesheet" href="mycss.css">

             2内部样式:(教学使用)
                       将css 的样式放到同一html文件中
                       用一个style 标签包裹  (友情提示:style标签可以在html中认为放,但是建议head内部)
            <nav style="background-color: red">我是一个导航标签我叫nav 

             3内嵌样式:
                      将css 的样式放到 标签的内部
                      用一个style 属性引入
    <style>
        p{
            background-color: red;
        }
    </style>

                                                           选择器

标签选择器:
              语法:
              标签名{
                 样式
              }

              匹配规则:  页面中所有的div标签

类选择器:
     语法:
        .class值 {
           样式
        }
       匹配规则: 页面中所有带有该class值的标签
       友情提示:
            标签理解为人     class值为社团
            同一个社团可以有不同的人
            同一个人可以参加不同的社团

  id选择器:
        语法:
          #id值{
            样式
          }

        匹配规则: 页面中的具有该id值的标签
                   id页面唯一

后代选择器

       语法:
          父    子{
            样式
          }

        匹配:
            前提:标签需要有嵌套
                  父级下的所有子级 (满足该结果)

子代选择器:

       语法:
          父 > 子{
            样式
          }

        匹配:
            前提:标签需要有嵌套
                  父级下的直接子 (满足该结果)

 群组选择器:
      语法:
        选择器,选择器,选择器。。。{
          样式;。。
        }
     匹配规则:
           页面中所有满足{前的选择器

交集选择器:
      表示更加精确:
         语法:
             选择器选择器{
               样式
             }
             匹配:
                 页面中具有相同选择器的哪一个
             友情提示:
                  一般  标签选择器 class选择器

 div.a{
            background-color:red;
        }

通用选择器:
     语法:
        *{
          样式
        }

    匹配的规则 页面中的所有标签
    友情提示:
          以后开发少用,或者不用
          若想设置多个标签的样式 我们是用的是群组选择器

                                    css 层叠样式表

      表现:  样式的覆盖

      样式的覆盖体现:
          1引入体现:
                1外部  == 2 内部   3 内嵌
                内部与外部比较
                外部与内部引入效果相同 但是谁后加载 显示的样式就是谁
                内/外部  与 内嵌比较
                最终使用的是内嵌的样式

<br>

           class选择器中的样式 要优先于 标签选择器中的样式
             id选择器中的样式  要优先于   class选择器中的样式

     所以:  若id  class   标签   选择器中设置了相同的样式则使用规则
             id  >  class   > 标签

     开发人员为了 好使用选择器  默认人给这三个选择器一个权值  (权值是虚拟的不存在的)
           标签:    1
           类:      10
           id:      100
   添加:
          内嵌:     1000
    !important:     10000   不要万不得已不要用  若想让选择器中的样式覆盖内嵌的方式就在想要设置的样式后面添加 !important

 所谓的权值是假设值,不存在的

   样式的最终使用谁?
        要计算{前面的选择器的权值和   权值和越大  最终的样式就是谁


   友情提示:
    1   页面中尽量少用id选择器  一般id 选择器作为最外层 的结构块使用   页头  导航   内容   页脚
       多用class 选择器  可以是组  也可以做到标记单独的作用
       id选择器使用的另外一种情况:
       当  权值压不住
   2   权值是假的

 css层叠的表现(多中方式,对同一样式的修饰   最终的演示显示问题)
           1.引入方式的样式层叠覆盖问题  ( 【内部==外部】< 内嵌 )
           2.同一引入方式  相同的选择器   后写样式覆盖前写样式
           3.不同选择器的层叠问题   !important>  内嵌> id> class> 标签
           4.权值的计算  权值大的 >  权值小的
 

发布了26 篇原创文章 · 获赞 4 · 访问量 432

猜你喜欢

转载自blog.csdn.net/yanghainan0318/article/details/103341198