Zoe

样式表:

一、样式表的概念:CSS(Cascading Style Sheets)层叠式样式表,作用是美化HTML网页。

二、样式表的分类:样式表分内联式样式表、内嵌式样式表和外部样式表三种。

1、内联式样式表:A、写在标签里面 。

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

                            C、控制精确,样式优先级最高,但是代码重用性差。

2、内嵌式样式表:A、作为一个独立的区域内嵌在网页里,必须写在head标签里面。<style type="text/css">样式</style>

                            B、控制没有内联的精确,样式优先级第二,代码重用性好。

3、外部样式表:A、新建一个CSS文件,用来放样式表,如果要在HTML文件中调用样式表,一般用<link href="test.css" rel="stylesheet" />

                        B、控制没有内联的精确,样式优先级最低,代码重用性最好。

选择器:

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

选择器分为四种:标签选择器、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"的标签,使用此样式。

posted on 2017-03-25 17:58  口袋里的SKY  阅读(213)  评论(0编辑  收藏  举报