zoukankan      html  css  js  c++  java
  • css---样式表分类,选择器

    css(Cascading Style Sheets,层叠式样式表),作用是美化HTML网页。

    一:样式表的分类:

    1,内联式样式表

        和html联合显示,控制精确,样式优先级最高,但是代码重用性差。

        style="样式" 例如:<div style="height:200px;"></div>

    2,内嵌式样i式表

         作为一个独立区域内嵌在网页里,必须写在head标签里,先第二,重用性一般。

    3,外部式样式表

         写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好。

     二:选择器

      选择器是样式表用来选择元素的

    选择器分为标签选择器,class选择器,ID选择器,复合选择器

    1、标签选择器:A、用标签名做选择器。

                            B、优先级最低。

        例如:<style type="text/css>

              p{

                   样式:

               }

            </style>

    注:格式对P标签起作用。

    2、Class选择器:A、根据Class名来筛选元素,都是以"."开头。

                               B、优先级排名第二。

        例如:<head>

             <style type="text/css>

              .aaa{

                   样式:

               }

            </style>

               </head>

            <body>

             <div class="aaa"></div>

            </body>

    3、ID选择器:A、根据ID名来筛选出唯一元素,都是以"#"开头。

                           B、优先级最高。

       例如:

    <head>

             <style type="text/css>

              #aaa{

                   样式:

               }

            </style>

      </head>

      <body>

             <div id="aaa"></div>

     </body>

    4、复合选择器:

    (1)逗号并列:用","隔开,表示并列。

        例如:<style type="text/css>

              p,span{

                   样式:

               }

            </style>

    注:格式对P标签和span标签起作用。

    (2)空格后代:用空格隔开,表示后代。

    例如:<style type="text/css>

              .p .span{

                   样式:

               }

            </style>

    注:找到使用样式p的标签,在该标签里面span标签使用该样式。

    (3)用"."筛选:用"."表示筛选。

    例如:<style type="text/css>

              p.span{

                   样式:

               }

            </style>

    注:在p标签中的class="span"的标签,使用此样式。

  • 相关阅读:
    【TJOI2019 Day2】简要题解
    【TJOI2019 Day2】简要题解
    【Codeforces 750G】—New Year and Binary Tree Paths(数位dp)
    【Codeforces 750G】—New Year and Binary Tree Paths(数位dp)
    【TJOI2019 Day1】简要题解
    【TJOI2019 Day1】简要题解
    【LOJ #6503】【雅礼集训 2018 Day4】—Magic(生成函数+分治NTT)
    【LOJ #6503】【雅礼集训 2018 Day4】—Magic(生成函数+分治NTT)
    【HihoCoder #1529】— 不上升序列(dp+斜率)
    【HihoCoder #1529】— 不上升序列(dp+斜率)
  • 原文地址:https://www.cnblogs.com/jiulinghoudabai/p/6641814.html
Copyright © 2011-2022 走看看