室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> 文章内容

css选择器的集体和嵌套申明实例详解

[日期:2010-03-06]   来源:IT部落窝  作者:IT部落窝   阅读:1986[字体: ]

  css选择器的申明:可以单独申明,也可以进行集体申明。同样的样式如果单独申明,就会产生很多重复的代码,所以具有共同属性的最好进行集体申明。而且方便控制,达到一改全改的效果。嵌套式声明就是一个标记里嵌套另一个标记。

  集体声明实例:

<html>
<head>
<title>css选择器的申明-集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{
 color:purple;   
 font-size:15px; 
 }
h2.special, .special, #one{ 
 text-decoration:underline; 
}
-->
</style>
</head>
<body>
 <h1>集体声明h1</h1>
 <h2 class="special">集体声明h2</h2>
 <h3>集体声明h3</h3>
 <h4>集体声明h4</h4>
 <h5>集体声明h5</h5>
 <p>集体声明p1</p>
 <p class="special">集体声明p2</p>
 <p id="one">集体声明p3</p>
</body>
</html>
  解释:以上代码第一个集体声明表示:对于整个页面 h1,h2,h3,h4,h5,p这些标签中的内容都会引用这这个样式。第二个集体声明表示: h2标记中的special类别选择器,类别选择器.special以及ID选择器#one都会采用这个样式。

  嵌套声明实例:

     <style type="text/css">
     <!--
     p b{       /* 嵌套声明,p标记中的b标记 */
      color:maroon;    /* 颜色 */
      text-decoration:underline; /* 下划线 */
     }
     -->
     </style>
  以上嵌套声明代码表示p标记中的b标记的内容会采用此样式。
  举例如下:
  <p>IT部落窝<b>网址</b>是:www.ittribalwo.com</p>
  此行中“网址”会采用样式,因为它是位于p标记中的b标记。
  
IT部落窝<b>网址</b>是:www.ittribalwo.com
  此行b标记中的“网址”并不会采用样式。

IT部落窝PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程