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

  • 相关阅读:
    html固定宽度下拉框内容显示不全问题解决方法
    ORA-00918: column ambiguously defined
    LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
    Lombok简化Java代码的好工具
    PLSQL Developer连接不上64位Oracle 10g的解决办法
    Windows 2008安装Oracle10g提示操作系统版本检查未通过
    Windows2008安装WebSphere 6.1提示此安装程序不能在图形方式中运行
    LigerUI树节点选中之后节点背景太短
    javapms部署之后首页不能正常显示问题
    Oracle触发器给表自身的字段重新赋值出现ORA-04091异常
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6617870.html
Copyright © 2011-2022 走看看