伯爵之魂
致力于web设计,讲究新时代换新思维模式

     呵呵,每天更新可能会一直坚持下去,一直把我自己给写穷,写的自己脑袋中的知识实在是没东西可写的时候,就会和大家Say 拜拜了,呵呵,但是可能吗?每天不断在进步,每天都在学习,积累经验,希望自己永远没有脑袋写破的那天!好,回到正题上面来!

     我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以后只能在firefox中正常显示。因为那个css涉及的滤镜太多,而且还奥css中“级联(cascade)”这种强大功能的支持。

     那么级联样式表css中的“级联”到底是什么意思呢?W3C是这样来描述的:css级联为每个样式规则指派权重,若元素应用了多个样式规则,那么将优先使用权重最高的的样式。

     但是你要发问了,只听说搜索引擎对某个网站的赋予的权重比较高或比较低,但是css中的“级联”赋予的权重是什么呢?W3C的这段定义,看上去很富有深意,但是它只包含了两个信息传递给了我们,那就是---特殊性和继承性。这两个概念将会成为我们学习的良师益友。当然,凡事都是两面的,也有可能成为我们的噩梦!接下来我们就来着重来说一下这个级联能够对我们书写带来些什么!

     刚才已经说了,级联概括了两个概念---特殊性和继承性,下面我们开始说一下这个继承性,继承性也就是你定义一个样式这个样式可以运用到它的子孙子元素,当然,不一定要都运用一个样式,也可以赋予几个选择器中的几个不同样式。我们线看下代码:

1 .box
2 {
3 color:red;               /*定义了一个样式这个样式将会运用到里面元素的h1,h2,h3,h4,p,ul,li等子孙元素*/
4 }

再来看段代码:

1 .box
2 {
3 color:red;           /*box运用了一个样式,它的子孙要默认这个样式,这就是继承*/
4 }
5 .box .archive
6 {
7 color:green;         /*但是拥有.archive这个选择器的标签不老实,他不用老祖宗的东西,自己创造了个green的样式来,这样权重提高了,他就可以不用继承了*/
8 }

     这样的话大家大概能弄明白这个继承的含义了?如果我们每次都要定义一个样式,每个写一个选择器,累死人,不可想象有多大的工作量。

     下面我们来看下这个特殊性有什么魅力

     前面我们已经来看到了两个例子,我们应该也能从中读到些什么吧,首先我们看到后面的规则比前面的权重高,比较特殊一点,尽管特殊性的例子看着比较简单,但是它本身存在的问题可不少。我们完全可能不经意的时候创造出了特殊过分了的样式规则,如果想要解决,我们需要想出更特殊的样式规则!在看代码(有代码有真相):

1 body>html #head ul.navigation li.home a
2 {
3 color:red;          /*本来这个就可以命令a的元素样式为红色,鼠标移动过也是一样,但我们想让它移动过去有变化怎么办?*/
4 }
5 
6 body>html #head ul.navigation li.home a:hover
7 {
8 color:green;        /*ok这段代码解决了,这就是特殊中的特殊,来继承已经不能控制我了,哈哈*/
9 }

      控制特殊性

      我们看到上面的是不是太特殊了?有点过分复杂?没关系,我们接下来再来个代码真相:

1 #linklist ul li h3
2 {
3 color:red;           /*虽然标准,但是还是有些别扭*/
4 }
5 
6 #linklist h3
7 {
8 color:red;           /*看我比较渐变吧,轻装上阵*/
9 }

     上面的例子表明了我们不能一层一层的来做无用功,有时候甚至对浏览器的解析也是一种负担。写了很多额外的选择器,却没有得到应有的评价,好!今天先写到这里吧!祝大家端午节玩的愉快舒心!

     《浅谈对前端开发时对html中一些招数的运用 》《对于新手编写web静态站习惯的养成 》文章对新手都很有帮助!

        (喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式,或者跟我发邮件747850255@qq.com转载请自觉附上转载地址,来自博客园“明年开奥迪”)

posted on 2011-06-03 21:16  伯爵之魂  阅读(2944)  评论(9编辑  收藏  举报