当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 特效 - This is Cereal(一)

点击数:21432012-12-16 09:55:06 来源: 海盈网络

级联和分层效果

      Shaun Inman一定非常喜爱均衡的饮食。想象一下这个场景:手捧着一盒“Post Fruity Pebbles",脑海中充斥着一股模仿的旋风和些许冲破陈规的冲动,Inman最终选择了早餐作为他的作品This is Cereal的基调。当然,借助现代浏览器强劲的特效处理能力,他的设计也正冲击着禅意花园视觉效果的巅峰。


CSS禅意花园 - This is Cereal


      由于目前为止,仍有很多用户正使用着那些不支持CSS高级功能的浏览器,所以Inman也竭力保证了在用这类浏览器浏览时,作品质量不会有太多的下降。不过即便这样,那些吸引眼球的特殊效果仍旧只能在那些“高级”浏览器中呈现。

      禅意花园是一部收集了各种实验性和创意作品的集合,This is Cereal也如其他所有富有创意的作品一样,与禅意花园的主题衔接得天衣无缝。

      6.1.1  级联

      可以看到,只有在像Fire fox这样的对CSS 2高度兼容的浏览器中.This is Cereal的菜单和透明效果才能正常显示。因为使用这类CSS的新增功能要涉及多种CSS过滤器,且还要CSS中“级联【cascade)”这种强大功能的支持。

      那么级联样式表CSS中的¨级联”究竟是什么意思呢?W3C是这样描述的:“CSS级联为每个样式规则都指派了权重,若元素应用了多个样式规则,那么将优先使用最高权重的样式”。这段定义尽管看上去复杂,但是它包含的两个相互关联的概念——特殊性(Specificity)和继承(Inheritance)将会成为学习和使用过程中的良师益友,当然,也可能变成让人头痛的噩梦……

      CSS中的继承(Inheritance)是指只定义一次就能将同一样式赋予多个元素的能力。设想一下,若是没有了这种能力,对于每一种格式,都需要逐一将网页上的元素和CSS定义中的样式对应起来。天啊,这真是个脱离现实、无法操作的想法!

      事实上,CSS还能把某一个样式赋予一类或者一组有着相同标准的元素。例如一个针对h3的定义会把此种样式赋予页面上所有的h3元素(图6-1-1):
h3 {
 color: red;
}

      这样,页面上所有的h3元素都会呈现为红色,是不是很简单呢?但是如何在覆盖某一些h3元素样式的同时又不影响到其他的h3元素呢?其实,我们只要编写一个额外的Class(图6-1-2)即可:

    下面代码中的第一条规则会让所有h3元素显示成红色,而第二条规则会重写第一条规则,把该规则中的样式应用到Class为archives的那些h3元素上。


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端