基于多个样式文件生成合并样式文件的方法和设备的制造方法
【技术领域】
[0001]本申请涉及计算机网页技术领域，具体地涉及一种基于多个样式文件生成合并样式文件的方法和设备。
【背景技术】
[0002]在现代网页设计领域中，常常采用级联样式表,级联样式表(Cascading StyleSheet)简称“CSS”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置、外观以及创建特殊效果的能力。在CSS样式表中，可以利用CSS Sprite (—种网页图片应用处理方式)方式将该多个CSS样式表中涉及到的图片都合并到一张大图中去。这样，当访问该页面时，载入的图片就不会像零星图片那样一幅一幅地慢慢显示出来，而是会作为整体立即被显示出来。因为对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本没有太大差别。因此，加速的关键，不是降低质量，而是减少图片个数。则浏览器每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。因此将涉及的多个零星背景图片合并到一个大图片中是本领域普遍采用的办法。因此，CSS Sprite技术把网页中一些背景图片合并到一张合并图片文件中，再利用CSS样式表“background-posit1n”(背景位置)进行背景定位，从而将特定背景图片显示在页面上的相应元素的位置上。
[0003]但是，在现有技术中，人们需要手动地合并和更新背景图片，再根据背景图片在合并后的大图中的位置，手动地计算样式文件中的相应元素的背景位置的数值。如果针对合并图片文件进行新增、删除或更新任何一个零星背景图片时，都需要手动更新合并图片文件并手动地重新计算背景位置的数值。
[0004]如图1所示，其中示出了现有技术的手动合并的大图，其中包含许多背景图片。在这张合并的背景图片大图中，如果某元素要使用大图中第一个背景图片，则比较比较简单，直接设置background-posit1n为(0,0)。但是如果某个元素要使用比如“B”这个背景图片，那么则需要在PhotoShop之类的软件中计算该背景图片的位置，例如，利用工具计算得到位置是(O, _80px),从而可以将对应元素的background-posit1n参数值设置为(O, _80px)。
[0005]在这个示例中，大概有上百多个背景图片，所以需要计算上百多次背景图片位置，这是一个比较单调枯燥的重复工作。也即是说，现有技术无法自动合并并确定合并后的背景图片大图中的背景图片的位置信息。此外，现有技术中的背景图片大图的维护死板且“臃肿”。如，现在要更换图中“I”的图片，并且要更新的新图片的长度比“I”图片的长度稍微增加了一些。由于图片大小不一致，原来的位置已经放不下新图片，所以不得不重新找一个位置(例如，将新的图片添加到图片的最后面)。这样，原先“I”图片的地方就空出来了。随着样式改动越来越多，这张图片就变的越来越臃肿，多余的背景图片也越来越多，图片体积变大不仅浪费用户带宽，降低了前端性能，而且维护成本也越来越大。
[0006]因此需要一种改进的自动合并多个背景图片从而合并多个样式文件以生成合并样式文件的方案，来克服上述问题。
【发明内容】
[0007]本申请的主要目的在于提供一种自动合并多个样式文件以生成合并样式文件的技术，以克服现有技术中的上述问题，从而实现自动合并图片并定位CSS样式文件中相应元素的背景位置信息，使得合并图片便于维护，并且图中的背景图片的位置信息能够自动快速地被获取，从而不需要人工计算合并图片中的背景图片，并且也不需要维护臃肿的背景图片合并大图，提高了开发效率，并且也提升了代码的可维护性。
[0008]根据本申请的一个方面，提供一种基于多个样式文件生成合并样式文件的方法，其特征在于，包括:基于多个样式文件获取过渡信息集合；对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；将所述待合并的多个背景图片自动合并以形成一张合并图片；基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及基于所述位置信息和所述过渡信息集合，生成合并样式文件。
[0009]根据本申请的一个方面，提供一种合并多个样式文件以生成合并样式文件的设备，其特征在于，包括:获取模块，用于基于多个样式文件获取过渡信息集合；解析模块，用于对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；图片合并模块，用于将所述待合并的多个背景图片自动合并以形成一张合并图片；确定模块，用于基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及生成模块，用于基于所述位置信息和所述过渡信息集合，生成合并样式文件。
[0010]与现有技术相比，根据本申请的技术方案，可以实现CSS设计中背景图片的自动合并以及自动确定背景图片合并大图中各个背景图片的位置信息，提高开发效率，并且也提升了代码的可维护性。
【附图说明】
[0011]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中:
[0012]图1示出了利用现有技术的手动合并方法形成的合并图片的示意图；
[0013]图2示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的方法的流程图；
[0014]图3A和图3B示出根据本申请的方法自动合并多个背景图片以形成一张合并图片的不意图；以及
[0015]图4示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的设备的框图。
【具体实施方式】
[0016]本申请的主要思想在于，为了将需要合并的背景图片进行自动合并，则先对包含这些背景图片的多个CSS样式文件进行解析，从中提取这些背景图片。然后将这些背景图片紧密排列从而自动合并以形成一张大的合并图片。基于这些背景图片的宽度和长度，从而确定出背景图片在合成图片中的位置信息。从而不需要人工计算合并图片中的背景图片，并且也不需要维护臃肿的背景图片合并大图，提高了开发效率，并且也提升了代码的可维护性。
[0017]应当理解，在本申请文件中，CSS、CSS文件、CSS样式文件、样式文件都是指代同一事物，也即是用来进行网页风格设计的级联样式表。
[0018]为使本申请的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本申请作进一步地详细说明。
[0019]参考图2，图2示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的方法的流程图。
[0020]本申请的技术方案的应用场景可以是网页设计和前端开发中，使用多个样式文件，有利于代码的组织，然后将多个样式文件合并成一个样式文件以便于页面的快速展示。
[0021]在步骤S210处，基于多个样式文件获取过渡信息集合。
[0022]具体而言，在需要将所述多个样式文件合并成一个合成样式文件的情况下，首先基于多个样式文件获取过渡信息集合。根据本申请的实施例，该过渡信息集合包含但不限于元素的一些信息、背景图片的宽度和长度等等信息，但是其中的元素的背景图片的背景位置(background-posit1n)的背景位置信息尚未获得。
[0023]在步骤S220处，解析所述过渡信息集合以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素。
[0024]具体而言，例如，可以利用CSS解析器对过渡信息集合进行解析，从而提取出待合并的多个背景图片。背景图片是指具有背