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

  • 相关阅读:
    Linux系统下的安装jdk和tomcat教程
    CentOS环境下安装jdk和tomcat
    Java的一个高性能快速深拷贝方法。Cloneable?
    AOP面向切面
    struts中实现ajax的配置信息
    上传下载固定配置
    mysql常用命令
    阿里云部署前后台项目
    PMP相关文件梳理
    面试思路总结
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6617870.html
Copyright © 2011-2022 走看看