网站制作越简单越好(五):不要重复定义可继承的值、多重CSS样式定义、使用子选择器

(2)
主页 > SEO > SEO技术 > 阅读: 作者: CRAZYSEO 发布日期: 2017-11-17 16:47:22
SEO诊断、外包、顾问业务 请联系QQ:3534790242
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值...

CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用一些默认值覆盖你的定义。

一、多重CSS样式定义,属性追加重复最后优先原则

一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。例如:

我们先定义两个样式

.one{width:200px;background:url(http://www.abc.com/helloseo.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(http://www.abc.com/goodseo.jpg) no-repeat left top;}

在页面代码中,我们可以这样调用:

<div class="one" two></div>

这样最终的显示效果是这个div样式是什么呢??重复的是以哪一个为准呢??

<div class="one" two></div>应用到的样式如下:

width:200px;

border:10px solid #000;

background:url(http://www.abc.com/seo.jpg) no-repeat left top;

因为,当应用两个或多个样式时,浏览器所应用的样式根据是属性追加重复最后优先原则。就是说两个或多个,或重复的样式名定义,浏览器所应用的样式是按先后顺序的,如果定义了重复的属性值,以最后定义的为准,如果应用了两个或多个样式名,里面不重复定义的属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。

二、使用子选择器(descendant selectors)

使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

<div>

<ul>

<li class="subnavitem"> <a href="http://www.abc.com/article1/#" class="subnavitem">Item 1</a></li>>

<li class="subnavitemselected"> <a href="http://www.abc.com/article1/#" class="subnavitemselected"> Item 1</a> </li>

<li class="subnavitem"> <a href="http://www.abc.com/article1/#" class="subnavitem"> Item 1</a> </li>

</ul>

</div>

这段代码的CSS定义是:

div#subnav ul { }

div#subnav ul li.subnavitem { }

div#subnav ul li.subnavitem a.subnavitem { }

div#subnav ul li.subnavitemselected { }

div#subnav ul li.subnavitemselected a.subnavitemselected { }

你可以用下面的方法替代上面的代码

<ul id=”subnav”>

<li> <a href="http://www.abc.com/article1/#>" Item 1</a> </li>

<li class="sel"> <a href="http://www.abc.com/article1/#>" Item 1</a> </li>

<li> <a href="http://www.abc.com/article1/#>" Item 1</a> </li>

</ul>

样式定义是:

#subnav { }

#subnav li { }

#subnav a { }

#subnav .sel { }

#subnav .sel a { }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

如果一个容器里有多个同样的元素,而且这些元素样式都不一样,请避免用这个方式,建以采用不同的class如:

<ul class=”one”><li></li></ul>

<ul class=”tow”><li></li></ul>

十二、不需要给背景图片路径加引号

为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:

background-image:url{“images

margin:0 auto;

}

但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {

text-align:center;

}

#wrap {

width:760px;

margin:0 auto;

text-align:left;

}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

 

相关文章

QQ咨询