欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

CSS合并共享之CSS优化

CSS 属性选择器合并共享|CSS优化
这里DIVCSS5主要是讲的CSS代码优化方面来讲解CSS属性的合并。

DIV CSS代码属性合并好处1、节约CSS代码。从而节约CSS代码或CSS文件字节,从而减少客户浏览器下载时间,使网页打开更加快捷。2、维护更方便。CSS属性选择器分组合并,让代码更加简便,维护更加快捷,以改一而同时改几个CSS选择器样式功能。

什么是CSS 属性选择器合并
CSS 属性选择器合并是指让具有相同属性代码选择器,将他们相同代码提取出来然后合并成一个CSS属性选择器,而他们命名以逗号隔开。如下图:
CSS合并共享
 

DIV+CSS合并用法
1、将不同CSS选择器中各个相同代码(相同代码较多可使用,如果相同代码较少去合并反而造成代码臃肿)提取到一个未命名选择器里如"{""}"内。
如下演示代码
CSS代码集
假如以上3个在一个页面里不同地方使用声明的样式选择器内的样式前部分相同,但是唯一(或有点不同),这个时候我们就为了方便以后修改维护及节约代码我们就可以将这3个CSS选择器合并。

2、提取相同样式“border:1px solid #000; height:24px; width:100px; ”并新建一个没有命名的选择器如下代码:
{border:1px solid #000; height:24px; width:100px; }
然后将三个样式命名以小写“逗号”+空格隔开放到各个新建无名选择器前如下:
 

CSS优化后代码
同时将那3个相同提取出来的去掉如下代码:

div css优化后代码

这样合并就完成,对比以前的
未优化CSS代码
感觉是否简单多了。

当然CSS代码合并共享选择器,如果CSS代码少不能体现出来,如果代码多复杂将会体现出来他的优势。同时如果一个网站多个页面公用一个CSS样式,要求网站内的背景栏目标题字体颜色、内容背景样式要改变几处将达到整站样式改变,使用此方法将各个不同CSS选择器中样式分别提取出来合并组合成一个新的共享CSS选择器,即可实现改变一处将改变整个如栏目背景文字样式颜色等样式,这样将体现CSS优化优越性能。

可扩展了解相关教程
1、CSS代码优化
2、html压缩
3、CSS压缩/a>
4、
CSS初始化

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r126.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2010-04-21 13:21 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。