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

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

ID:6176280

大小:67.00 KB

页数:4页

时间:2018-01-05

高级网页设计知识之css样式级别_第1页
高级网页设计知识之css样式级别_第2页
高级网页设计知识之css样式级别_第3页
高级网页设计知识之css样式级别_第4页
资源描述:

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

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

上面的代码会在网页绘制一个宽100像素,高20像素,边框为1像素的红色实体边。现在我们在DIV里定义STYLE

2、:200px;height:40px;">

我们更改宽度为200像素高度为40像素;可以发现,DIV的大小改变了。并且继承了.one的样式;我们可以这样理解过程:网页首先读取到了.one的样式Width:100px;Height:20px;Border:1pxsolid#ff0;然后又读入了STYLE中的样式Width:200px;Height:40px;这个时候读取到的样式就会把前面的样式覆盖那么最终得到的样式会是:Width:200px;Height:40px;Border:1pxsolid#ff0;写都这个地方,可能大家都感觉自己本来就知道这些不需要多说。但是,下

3、面要说的是样式表内部的选择顺序;如果你坚持看到了这里,那么我相信你一定会有收获;现在我们要实现边框的下边框不显示;我们可以这样写样式表:.one{border-bottom:none;/*定义底边为NONE也就是没有底边*/width:100px;height:20px;border:1pxsolid#f00;}还是使用:

看下实际效果是底边还是有的!!!为什么呐。样式的读取循序;现在我们把CSS的书写顺序改一下。现在来看下结果效果出来了。这就是浏览器内核的渲染引擎的工作原理;网页设计的时候这些原理考虑到会有意想不到的效果。下面简单的说下

4、原因浏览器把代码转换成网页可视样式的时候,会把我们定义的东西绘制出来;比如说,我们定义一个DIV网页在加载后翻译到这一句的时候会在内存中绘制一个空的DIV对象就好像一个数据库。数据库里的字段就是样式定义,类似于下表Border-leftBorder-rightBorder-bottomBorder-rightBorder-style..................widthheightBackground-color然后开始读取CSS样式表填充到上面的内存中去;如果我们先定义BORDER-BOTTOM那么浏览器就会想内存里关于Border-bottom的字段写入none属性;

5、接着又读取到border:1pxsolid#f00的属性,这个属性表示Border-left,border-right,border-top,border-bottom的属性都是1像素,实边,红色;这个时候原内存里我们定义的BORDER-BOTTOM会被覆盖掉。所以我们看到的网页里DIV底边还在。如果反过来,就是先填入了全部BORDER的属性,然后读取到BORDER-BOTTOM的设置时覆盖原属性。结论:写CSS的时候要先写总再写细。虽然部分浏览器会有不同的解析内存,但是会拖慢速度,还是这样写比较好。好了。就说这么多,大家慢慢体会体会。有不懂或者有非议的地方可以联系我,我们大家一

6、起交流交流。

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。