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

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