CN104572668A - 基于多个样式文件生成合并样式文件的方法和设备 - Google Patents

Abstract

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

Description

基于多个样式文件生成合并样式文件的方法和设备

技术领域

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

背景技术

在现代网页设计领域中，常常采用级联样式表，级联样式表（CascadingStyle Sheet）简称“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”图片的地方就空出来了。随着样式改动越来越多，这张图片就变的越来越臃肿，多余的背景图片也越来越多，图片体积变大不仅浪费用户带宽，降低了前端性能，而且维护成本也越来越大。

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

发明内容

本申请的主要目的在于提供一种自动合并多个样式文件以生成合并样式文件的技术，以克服现有技术中的上述问题，从而实现自动合并图片并定位CSS样式文件中相应元素的背景位置信息，使得合并图片便于维护，并且图中的背景图片的位置信息能够自动快速地被获取，从而不需要人工计算合并图片中的背景图片，并且也不需要维护臃肿的背景图片合并大图，提高了开发效率，并且也提升了代码的可维护性。

根据本申请的一个方面，提供一种基于多个样式文件生成合并样式文件的方法，其特征在于，包括：基于多个样式文件获取过渡信息集合；对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；将所述待合并的多个背景图片自动合并以形成一张合并图片；基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及基于所述位置信息和所述过渡信息集合，生成合并样式文件。

根据本申请的一个方面，提供一种合并多个样式文件以生成合并样式文件的设备，其特征在于，包括：获取模块，用于基于多个样式文件获取过渡信息集合；解析模块，用于对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；图片合并模块，用于将所述待合并的多个背景图片自动合并以形成一张合并图片；确定模块，用于基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及生成模块，用于基于所述位置信息和所述过渡信息集合，生成合并样式文件。

与现有技术相比，根据本申请的技术方案，可以实现CSS设计中背景图片的自动合并以及自动确定背景图片合并大图中各个背景图片的位置信息，提高开发效率，并且也提升了代码的可维护性。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1示出了利用现有技术的手动合并方法形成的合并图片的示意图；

图2示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的方法的流程图；

图3A和图3B示出根据本申请的方法自动合并多个背景图片以形成一张合并图片的示意图；以及

图4示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的设备的框图。

具体实施方式

本申请的主要思想在于，为了将需要合并的背景图片进行自动合并，则先对包含这些背景图片的多个CSS样式文件进行解析，从中提取这些背景图片。然后将这些背景图片紧密排列从而自动合并以形成一张大的合并图片。基于这些背景图片的宽度和长度，从而确定出背景图片在合成图片中的位置信息。从而不需要人工计算合并图片中的背景图片，并且也不需要维护臃肿的背景图片合并大图，提高了开发效率，并且也提升了代码的可维护性。

应当理解，在本申请文件中，CSS、CSS文件、CSS样式文件、样式文件都是指代同一事物，也即是用来进行网页风格设计的级联样式表。

为使本申请的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本申请作进一步地详细说明。

参考图2，图2示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的方法的流程图。

本申请的技术方案的应用场景可以是网页设计和前端开发中，使用多个样式文件，有利于代码的组织，然后将多个样式文件合并成一个样式文件以便于页面的快速展示。

在步骤S210处，基于多个样式文件获取过渡信息集合。

具体而言，在需要将所述多个样式文件合并成一个合成样式文件的情况下，首先基于多个样式文件获取过渡信息集合。根据本申请的实施例，该过渡信息集合包含但不限于元素的一些信息、背景图片的宽度和长度等等信息，但是其中的元素的背景图片的背景位置（background-position）的背景位置信息尚未获得。

在步骤S220处，解析所述过渡信息集合以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素。

具体而言，例如，可以利用CSS解析器对过渡信息集合进行解析，从而提取出待合并的多个背景图片。背景图片是指具有背景图片属性的图片。在多个样式文件中包含许多背景图片，在基于多个样式文件获取过渡信息集合时，这些背景图片依然被包含在过渡信息集合中。在这些背景图片中，其中有一些背景图片是不适合进行合并的，例如一些平铺背景图片、或者一些需要向上、向下、向左或向右对齐的背景图片等。这些不适合进行合并的图片可能位于一个黑名单表格中，表示其不适合进行合并。因此，CSS解析器可以将待合并的多个背景图片（也即是除这些不适合合并的背景图片之外的其他适合进行合并的背景图片）提取出来。

根据本申请的具体实施例，举例而言，例如基于两个样式文件获取的过渡信息集合中提取出三张背景图片Image1、Image2和Image3。并且获取到各个背景图片的宽度和长度。例如，Image1的宽度为96px（像素），长度为97px；Image2的宽度为98px，长度为34px；并且Image3的宽度为24px，长度为24px。

在步骤S230处，将所述待合并的多个背景图片自动合并以形成一张合并图片。

更具体地说，将提取出来的待合并背景图片进行排列进行自动合并以形成一张合并图片，其中，采用使得所述合并图片的尺寸尽可能小的方式来将所述多个背景图片进行排列。例如，将提取出来的待合并背景图片紧密排列进行自动合并以形成该合并图片。优选地，可以将提取出来的背景图片按其图片的宽和高由大到小紧密排列，以使得所形成的合并图片的尺寸尽可能小。采用使得所述合并图片的尺寸尽可能小的方式来将所述多个背景图片进行排列的步骤可以进一步包括：将所述待合并的多个背景图片按照长度或宽度从大到小进行排序；根据排序结果将所述待合并的多个背景图片绘制在合并图片中。

例如，可以将需要进行自动合并的背景图片按照长度从大到小进行排序，如果长度相同，则再次按照宽度从大到小进行排列。然后按照排序顺序将需要合并的背景图片绘制在合并图片中以使得合并图片的尺寸尽可能小。

本领域技术人员应该理解，也可以按照其他方式或规则来对多个背景图片进行合并。

根据本申请的具体实施例，例如，将前面例子中的三张图片按照上述方法排列从而自动合并成一张大图片。

接下来，在步骤S240处，基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息。

具体而言，基于所述合并图片，可以获取每一个背景图片的长度与宽度。然后，基于每个背景图片的长度和宽度，确定每个背景图片的在合并图片中的位置信息。由于合并图片中的每个背景图片的长度与宽度已被获取到，并且背景图片之间是依次紧密排列的，从而利用每个背景图片的长度和宽度，可以计算并从而确定每个背景图片在合并图片中的位置信息。

例如，继续上面的例子，图3A示出了需要合并的三张图片，并且将三张图片自动合并后的合并图片如图3B所示。由于已知了Image1的宽度为96px（像素），长度为96px；Image2的宽度为98px，长度为34px；并且Image3的宽度为24px，长度为24px。从而可以利用背景图片的宽度和/或长度信息计算出在合并图片中各个背景图片的位置信息。例如，Image1在合并图片中的位置信息为（0,0）；利用Image1的宽度，可以计算出Image2在合并图片中的位置信息为（-96px，0）；利用Image1的宽度和Image2的长度，可以计算出Image3在合并图片中的位置信息为（-96px，-34px）。同理，如果合并图片中有更多的图片，也可以按照同样的方法计算出每个背景图片在合并图片中的位置信息。

至此，已经描述了如何自动合并多个CSS样式文件中待合并的背景图片以形成合并图片并计算确定各个背景图片在合并图片中的位置信息。利用该位置信息，则可以确定最终的CSS样式文件中的相应元素的背景图片的背景图片的背景位置信息。

根据本申请的实施例，该方法还可以包括步骤250，在步骤250处，基于上述位置信息和过渡信息集合，生成最终的合并样式文件。

在本技术领域中，在将CSS样式文件中的多个背景图片合并到大图中，确定了背景图片在合并的大图中的位置信息之后，就能确定最后CSS样式文件中相应元素的背景图片的background_position参数值了。

具体而言，将各个背景图片在合并图片中的位置信息记录为样式文件中各个相应元素的背景位置信息，然后基于各个相应元素的背景位置信息和前述过渡信息集合，生成合并样式文件。

举例而言，以上述的三个背景图片为例，例如将背景图片Image1在合并图片中的左上角的位置信息（0,0）与过渡信息集合中的相应元素区域的左上角(0，0)重合，从而记录下相应元素的背景图片的背景位置信息为（0,0），也即是说，该元素的background_position参数值为（0,0）。将背景图片Image2在合并图片中的左上角的位置信息（-96px，0）与过渡信息集合中的相应元素区域的左上角(0，0)重合，从而记录下相应元素的背景图片的背景位置信息为（-96px，0），也即是说，该元素的background_position参数值为（-96px，0）。将背景图片Image3在合并图片中的左上角的位置信息（-96px，-34px）与过渡信息集合中的相应元素区域的左上角(0，0)重合，从而记录下相应元素的背景图片的背景位置信息为（-96px，-34px），也即是说，该元素的background_position参数值为（-96px，-34px）。

通过本申请的方法，可以自动合并背景图片以形成一个合并图片并快速确定背景图片的位置信息，从而在更换合并图片中的任何一个图片时，不必考虑新图片的位置如何计算，而是只需要利用本申请的方法，针对包含新背景图片的所有待合并图片重新自动合并成新的合并图片并确定背景图片在新合并图片中的位置从而得到新的合成样式文件中各个元素的背景图片的新的背景位置信息，以便进行位置信息更新。

以上描述了根据本申请实施例的基于多个样式文件生成合并样式文件的方法，相应地，本申请的实施例还提供相应的设备。图4示出根据本申请一个实施例的基于多个样式文件生成合并样式文件的设备的框图。

如图4所示，设备400可以包括样式合并模块410、解析模块420、图片合并模块430、确定模块440以及生成模块450。

具体而言，获取模块410，用于基于多个样式文件获取过渡信息集合。在需要将所述多个样式文件合并成一个样式文件的情况下，首先基于多个样式文件自动获取过渡信息集合。根据本申请的实施例，该过渡信息集合包含但不限于元素的一些信息、背景图片的宽度和长度等等信息，但是其中的元素的背景图片的背景位置（background-position）的背景位置信息尚未获得。

解析模块420可以被配置成解析所述过渡信息集合以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素。

如前所述，在需要将所述多个样式文件合并成一个合成样式文件的情况下，首先，可以利用CSS解析器对该过渡信息集合进行解析，从而提取出待合并的多个背景图片。

然后，图片合并模块430可以被配置成将待合并的多个背景图片自动合并以形成一张合并图片。根据本申请的实施例，所述图片合并模块进一步被配置成将所述多个背景图片进行排列以形成所述合并图片，其中，采用使得所述合并图片的尺寸尽可能小的方式来将所述多个背景图片进行排列。例如，将提取出来的待合并背景图片紧密排列进行自动合并以形成该合并图片。优选地，可以将提取出来的背景图片按其图片的宽和高由大到小紧密排列，以使得所形成的合并图片的尺寸尽可能小。本领域技术人员应该理解，也可以按照其他方式或规则来对多个背景图片进行自动合并。

确定模块440可以被配置成基于前述合并图片，确定背景图片的每一个在合并图片中的位置信息。

根据本申请的实施例，所述确定模块440可以进一步包括获取子模块和确定子模块。获取子模块可以用于基于所述合并图片，获取每一个背景图片的长度与宽度。确定子模块可以用于基于每个背景图片的长度和宽度，确定每个背景图片的在合并图片中的位置信息。由于合并图片中的每个背景图片的长度与宽度已被获取到，并且背景图片之间是依次紧密排列的，从而利用每个背景图片的长度和宽度，可以计算并从而确定每个背景图片在合并图片中的位置信息。

根据本申请的实施例，设备400还可以进一步包括生成模块450，用于基于所述位置信息和所述过渡信息集合，生成合并样式文件。

根据本申请的实施例，所述生成模块450可以进一步包括记录子模块和生成子模块。记录子模块可以用于将背景图片在合并图片中的位置信息记录为样式文件中相应元素的背景位置信息。生成子模块可以用于基于相应元素的背景位置信息和过渡信息集合，生成合并样式文件。

以上描述的基于多个样式文件生成合并样式文件的设备与之前描述的基于多个样式文件生成合并样式文件的方法的处理是对应的，因此，关于其具体细节，可以参见之前描述的方法，这里不再赘述。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域内的技术人员应明白，本申请的实施例可提供为方法、设备、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种基于多个样式文件生成合并样式文件的方法，其特征在于，包括：

基于所述多个样式文件获取过渡信息集合；

对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；

将所述待合并的多个背景图片自动合并以形成一张合并图片；

基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及

基于所述位置信息和所述过渡信息集合，生成合并样式文件。

2.根据权利要求1所述的方法，其特征在于，将所述待合并的多个背景图片自动合并以形成一张合并图片的步骤进一步包括：

将所述多个背景图片进行排列以形成所述合并图片，其中，采用使得所述合并图片的尺寸尽可能小的方式来将所述多个背景图片进行排列。

3.根据权利要求2所述的方法，其特征在于，采用使得所述合并图片的尺寸尽可能小的方式来将所述多个背景图片进行排列的步骤进一步包括：

将所述待合并的多个背景图片按照长度或宽度从大到小进行排序；

根据排序结果将所述待合并的多个背景图片绘制在合并图片中。

4.根据权利要求1所述的方法，其特征在于，基于所述合并图片确定所述背景图片的每一个在合并图片中的位置信息的步骤进一步包括：

基于所述合并图片，获取每一个背景图片的长度与宽度；

基于每个背景图片的长度和宽度，确定每个背景图片的在合并图片中的位置信息。

5.根据权利要求1所述的方法，其特征在于，基于所述位置信息和所述过渡信息集合生成合并样式文件的步骤进一步包括：

将所述背景图片在所述合并图片中的位置信息记录为样式文件中相应元素的背景位置信息；以及

基于所述相应元素的背景位置信息和所述过渡信息集合，生成所述合并样式文件。

6.根据权利要求1-4任一项所述的方法，其特征在于，所述过渡信息集合包含所述多个样式文件中的元素的基本信息、背景图片的宽度和长度信息。

7.根据权利要求6所述的方法，其特征在于，所述过渡信息集合不包含所述元素的背景图片的背景位置信息。

8.一种基于多个样式文件生成合并样式文件的设备，其特征在于，包括：

获取模块，用于基于所述多个样式文件获取过渡信息集合；

解析模块，用于对所述过渡信息集合进行解析以提取待合并的多个背景图片，其中所述待合并的多个背景图片对应于所述多个样式文件中的多个元素；

图片合并模块，用于将所述待合并的多个背景图片自动合并以形成一张合并图片；

确定模块，用于基于所述合并图片，确定所述背景图片的每一个在所述合并图片中的位置信息；以及

生成模块，用于基于所述位置信息和所述过渡信息集合，生成合并样式文件。

9.根据权利要求8所述的设备，其特征在于，所述确定模块进一步包括：

获取子模块，用于基于所述合并图片，获取每一个背景图片的长度与宽度；

确定子模块，用于基于每个背景图片的长度和宽度，确定每个背景图片的在合并图片中的位置信息。

10.根据权利要求8所述的设备，其特征在于，所述生成模块进一步包括：

记录子模块，用于将所述背景图片在所述合并图片中的位置信息记录为样式文件中相应元素的背景位置信息；以及

生成子模块，用于基于所述相应元素的背景位置信息和所述过渡信息集合，生成所述合并样式文件。