zoukankan      html  css  js  c++  java
  • 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,边学边通过博客记录,鞭策自己不断努力,同时恳请博客园的各位老师批评指正并多多鼓励,多谢:)

  • 相关阅读:
    利用ganymed-ssh2远程执行其它Linux机器上的shell命令
    ZooKeeper 笔记(4) 实战应用之【消除单点故障】
    ZooKeeper 笔记(3) 实战应用之【统一配置管理】
    ZooKeeper 笔记(2) 监听数据变化
    ZooKeeper 笔记(1) 安装部署及hello world
    intellij idea 高级用法之:集成JIRA、UML类图插件、集成SSH、集成FTP、Database管理
    hadoop: hive 1.2.0 在mac机上的安装与配置
    mac 下卸载mysql的方法
    mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项
    hadoop: hbase1.0.1.1 伪分布安装
  • 原文地址:https://www.cnblogs.com/sunny1893/p/4483498.html
Copyright © 2011-2022 走看看