您当时的方位:主页 > 作业笔记

网站款式CSS中点(.)、井号(#)、逗号(,)、空格、冒号(:)"的用法和阐明

2015-05-14  codeforacause.net

榜首:

先阐明下网站款式CSS中点(.)、井号(#)的用法:

1)当一个类为圆点(.)时,那么在主体里边调用时用class,并且在同一个页面能够屡次调用是有用的。

  • 代码如下
  • <style>.c1 {width:300px;height:100px;background:#F60;}</style>
    <div class="c1">manbet常识与技能网址是www.codeforacause.net</div>

 

2)当一个类为井号(#)时,那么在主体里边调用时用id,但是在同一个页面只要榜首次调用是有用的。

  • 代码如下
  • <style>#c1 {width:300px;height:100px;background:#F60;}</style>
    <div id="c1">manbet常识与技能网址是www.codeforacause.net</div>

 

 

第二:

再阐明空格和逗号(,)的用法:

 

 1)当有两个类一起呈现,以空格分隔时,表明第二个类归于榜首个类,而榜首个类包括第二个类:

  • 代码如下

  • <style>
    .c1 .c1-center{width:300px;height:200px; float:left;background:#F60;}
    </style>

    <div class="c1">
        <div class="c1-left">我是左面<div>
        <div class="c1-center">
         中心是:manbet常识与技能网址是www.codeforacause.net
        </div>

        <div class="c1-left">我是右边<div>
    </div>

 

 2)当有两个类一起呈现,以逗号(,)分隔时,表明榜首个类和第二个类是并排联络,不论调用哪个类成果都是相同的:

  • 代码如下

  • <style>
    .c1, .c1-center{width:300px;height:200px; float:left;background:#F60;} 
    </style>

         <div class="c1">我的宽度是300像素,高度是200像素<div>
        
        <div class="c1-center">
       我的宽度也是300像素,高度也是200像素
        </div>
        

 

 

第三:

最终阐明冒号(:)的用法:

 

 冒号在CSS中一般叫做伪类,例如咱们常见的:

  • 代码如下

  • a:link {color: #FF0000} /* 未拜访的链接 */
    a:visited {color: #00FF00} /* 已拜访的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

更多伪类办法和使用阐明请看本站教程:http://www.codeforacause.net/w3cschool/css/css-pseudo-elements.html