CSS基本语法

浏览数：23 / 时间：2015年06月09日

CSS是CasCading Style Sheets的缩写，基本结构如下：

选择器{

对象的属性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，边学边通过博客记录，鞭策自己不断努力，同时恳请博客园的各位老师批评指正并多多鼓励，多谢：）

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS基本语法