首页 > 代码库 > css---样式表分类,选择器

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"的标签,使用此样式。

 

css---样式表分类,选择器