在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用集体声明的方法,将风格相同的CSS选择器同时声明,如:
| <html> <head> <title>集体声明</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> |
上例显示可以看到所有行的颜色都是紫色,而且字体大小均为15px。集体声明的效果与单独声明的效果完全相同,H2.special、.special和#one的声明并不影响前一个集体声明,第二行和最后二行的紫色和大小为15px的前提下使用了下划线进行突出。
另外,对于实际网站中的一些小型页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有的标记都是用同一个CSS样式,但又不希望逐个来加入集体声明列表。这时可以利用全局声明符号*,
如:
| <html> <head> <title>全局声明</title> <style type="text/css"> <!-- *{ /* 全局声明 */ 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> |
上例效果与之前的效果完全相同,代码却大大缩减了。这种全局声明的方法在一些小页面中特别实用。
宁波智森网络公司版权所有,转载请注明来自宁波网站建设网,http://www.nbseoer.com。 (您可能还想了解:宁波网站推广|宁波网站设计|宁波SEO)



