[发明专利]基于多个样式文件生成合并样式文件的方法和设备

说明书

本申请提供基于多个样式文件生成合并样式文件的方法和设备。该方法可以包括：基于多个样式文件获取过渡信息集合；对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；将所述待合并的多个背景图片自动合并以形成一张合并图片；基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及基于所述位置信息和所述过渡信息集合，生成合并样式文件。通过本申请的方法，解决了现有技术中落后的人工手动地合并样式文件的背景图片并确定位置信息的问题，实现了样式文件的自动合并和位置信息自动确定。

技术领域

本申请涉及计算机网页技术领域，具体地涉及一种基于多个样式文件生成合并样式文件的方法和设备。

背景技术

在现代网页设计领域中，常常采用级联样式表，级联样式表（Cascading StyleSheet）简称“CSS”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置、外观以及创建特殊效果的能力。在CSS样式表中，可以利用CSS Sprite（一种网页图片应用处理方式）方式将该多个CSS样式表中涉及到的图片都合并到一张大图中去。这样，当访问该页面时，载入的图片就不会像零星图片那样一幅一幅地慢慢显示出来，而是会作为整体立即被显示出来。因为对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本没有太大差别。因此，加速的关键，不是降低质量，而是减少图片个数。则浏览器每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。因此将涉及的多个零星背景图片合并到一个大图片中是本领域普遍采用的办法。因此，CSS Sprite技术把网页中一些背景图片合并到一张合并图片文件中，再利用CSS样式表“background-position”（背景位置）进行背景定位，从而将特定背景图片显示在页面上的相应元素的位置上。

但是，在现有技术中，人们需要手动地合并和更新背景图片，再根据背景图片在合并后的大图中的位置，手动地计算样式文件中的相应元素的背景位置的数值。如果针对合并图片文件进行新增、删除或更新任何一个零星背景图片时，都需要手动更新合并图片文件并手动地重新计算背景位置的数值。

如图1所示，其中示出了现有技术的手动合并的大图，其中包含许多背景图片。在这张合并的背景图片大图中，如果某元素要使用大图中第一个背景图片，则比较比较简单，直接设置background-position为（0，0）。但是如果某个元素要使用比如“B”这个背景图片，那么则需要在PhotoShop之类的软件中计算该背景图片的位置，例如，利用工具计算得到位置是（0，-80px），从而可以将对应元素的background-position参数值设置为（0，-80px）。

在这个示例中，大概有上百多个背景图片，所以需要计算上百多次背景图片位置，这是一个比较单调枯燥的重复工作。也即是说，现有技术无法自动合并并确定合并后的背景图片大图中的背景图片的位置信息。此外，现有技术中的背景图片大图的维护死板且“臃肿”。比如，现在要更换图中“I”的图片，并且要更新的新图片的长度比“I”图片的长度稍微增加了一些。由于图片大小不一致，原来的位置已经放不下新图片，所以不得不重新找一个位置（例如，将新的图片添加到图片的最后面）。这样，原先“I”图片的地方就空出来了。随着样式改动越来越多，这张图片就变的越来越臃肿，多余的背景图片也越来越多，图片体积变大不仅浪费用户带宽，降低了前端性能，而且维护成本也越来越大。

因此需要一种改进的自动合并多个背景图片从而合并多个样式文件以生成合并样式文件的方案，来克服上述问题。

发明内容