高级网页设计知识之css样式级别

ID：13915483

大小：67.00 KB

页数：4页

时间：2018-07-24

资源描述：

《高级网页设计知识之css样式级别》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、高级网页设计知识：CSS样式的级别今天讲一下CSS的样式的级别。很多设计师都感觉自己对CSS样式的理解很到位了。功能都理解了。但很多细节注意不到，因为没有遇见过。CSS样式的级别：可以理解为，当前元素样式对多样式的适用循序。例如：定义一个CSS样式one：.one{width:100px;height:20px;border:1pxsolid#f00;}在网页中使用这个样式：

上面的代码会在网页绘制一个宽100像素，高20像素，边框为1像素的红色实体边。现在我

2、们在DIV里定义STYLE

我们更改宽度为200像素高度为40像素；可以发现，DIV的大小改变了。并且继承了.one的样式；我们可以这样理解过程：网页首先读取到了.one的样式Width:100px;Height:20px;Border:1pxsolid#ff0;然后又读入了STYLE中的样式Width:200px;Height:40px;这个时候读取到的样式就会把前面的样式覆盖那么最终得到的样式

3、会是：Width:200px;Height:40px;Border:1pxsolid#ff0;写都这个地方，可能大家都感觉自己本来就知道这些不需要多说。但是，下面要说的是样式表内部的选择顺序；如果你坚持看到了这里，那么我相信你一定会有收获；现在我们要实现边框的下边框不显示；我们可以这样写样式表：.one{border-bottom:none;/*定义底边为NONE也就是没有底边*/width:100px;height:20px;border:1pxsolid#f00;}还是使用：

4、one”>

5、der-bottomBorder-rightBorder-style..................widthheightBackground-color然后开始读取CSS样式表填充到上面的内存中去；如果我们先定义BORDER-BOTTOM那么浏览器就会想内存里关于Border-bottom的字段写入none属性；接着又读取到border:1pxsolid#f00的属性，这个属性表示Border-left,border-right,border-top,border-bottom的属性都是1像素，

6、实边，红色；这个时候原内存里我们定义的BORDER-BOTTOM会被覆盖掉。所以我们看到的网页里DIV底边还在。如果反过来，就是先填入了全部BORDER的属性，然后读取到BORDER-BOTTOM的设置时覆盖原属性。结论：写CSS的时候要先写总再写细。虽然部分浏览器会有不同的解析内存，但是会拖慢速度，还是这样写比较好。好了。就说这么多，大家慢慢体会体会。有不懂或者有非议的地方可以联系我，我们大家一起交流交流。

高级网页设计知识之css样式级别

高级网页设计知识之css样式级别

相关文章

相关标签