• CSS基本语法


    CSS是CasCading Style Sheets的缩写,基本结构如下:

    <style type = "text/css">

         选择器{

                     对象的属性1:属性值1;

                     对象的属性2:属性值2;          

                  }

    </style>

    其中,选择器表示被修饰的对象,属性是希望改变的样式。选择器可分为标签选择器,ID选择器以及类选择器。

     

    1 标签选择器

    适用于对页面某类标签的内容进行修饰。语法如下:

        标签名{

                    属性名1:属性值1;

                    属性名2:属性值2;

                    .......

               }

    <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
           <style type = "text/css">
                       li{
                     color:red;
                     font-size:32;
                     font-family:宋体;
                  }
           </style>
       </head>
       <body>
           <div>
              <ul>
                 <li>钢笔</li>
                 <li>水笔</li>
                 <li>文具</li>
                 <li>粉笔</li>
              </ul>
           </div>
       </body>
    </html>

    2 类选择器

        标签选择器修饰的范围比较广,如果要单独修饰某个具体<li>元素,则可以使用类选择器。语法如下:

        .类名{

                    属性名1:属性值1;

                    属性名2:属性值2;

                    .......

               }

    <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
           <style type = "text/css">
                  li{
                     color:red;
                     font-size:32;
                     font-family:宋体;
                  }
                  .blue{
                     color:blue;
                  }
           </style>
       </head>
       <body>
           <div>
              <ul>
                 <li class="blue">钢笔</li>
                 <li>水笔</li>
                 <li class="blue">文具</li>
                 <li>粉笔</li>
              </ul>
           </div>
       </body>
    </html>

    3 ID选择器

    ID属性是html元素的唯一标识,要求页面内不能有重复的ID标识属性。对应的ID选择器一般用于修饰对应ID标识的html元素内容,实际应用与</div>配合使用,用法如下:

    <div id="ID标识名">。

    语法如下:

    #ID标识名{

          属性名1:属性值1;

          属性名2:属性值2;

          ......

    }

    <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
           <style type = "text/css">
                  #menu{
                     font-size:14px;
                     font-family:宋体;
                     width:200px;
                     background:#ccc;
                  }
           </style>
       </head>
       <body>
           <div id = "menu">
              <ul>
                 <li>钢笔</li>
                 <li>水笔</li>
                 <li>文具</li>
                 <li>粉笔</li>
              </ul>
           </div>
       </body>
    </html>

          以前没有接触过CSS,边学边通过博客记录,鞭策自己不断努力,同时恳请博客园的各位老师批评指正并多多鼓励,多谢:)

  • 相关阅读:
    ###JS获取URL参数的函数###
    Ant通配符
    java.lang.OutOfMemoryError处理错误
    超越最常用的快捷键
    一个完整的工作流管理系统成部分
    Caused by: org.hibernate.hql.ast.QuerySyntaxException: TkltEmpQuitProcess is not mapped. (SSH项目中出现的映射问题)
    小的心得
    diary record 20120423
    小的思想
    用3种方法检测远程URL是否存在。
  • 原文地址:https://www.cnblogs.com/sunny1893/p/4483498.html
Copyright © 2020-2023  润新知