zoukankan      html  css  js  c++  java
  • 2017-3-25 css样式表(一)

    样式表:

    一、样式表的概念: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"的标签,使用此样式。

  • 相关阅读:
    剑指offer-二维数组中的查找
    TF-IDF(term frequency–inverse document frequency)
    Java实现中文字符串的排序功能
    当前课程
    【R】资源整理
    CentOS相关
    【转】Setting up SDL Extension Libraries on MinGW
    【转】Setting up SDL Extension Libraries on Visual Studio 2010 Ultimate
    【转】Setting up SDL Extension Libraries on Code::Blocks 12.11
    【转】Setting up SDL Extension Libraries on Visual Studio 2019 Community
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6617870.html
Copyright © 2011-2022 走看看