CN115858983A - 生成css文件的方法和装置、电子设备和存储介质 - Google Patents

Abstract

本申请提供了一种生成CSS文件的方法和装置、电子设备和存储介质，其中，该方法包括：采用获取需要进行样式信息设置的目标HTML文件；在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。通过在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类，并基于目标CSS原子类生成CSS文件，可以使最终得到的CSS文件中的所有目标CSS原子类是目标HTML文件所需使用的，进而可以避免目标HTML文件中不需要的CSS原子类存在于CSS文件中，可以有效减少CSS文件中CSS原子类的数量，并有效克服了相关技术中存在的CSS文件体积大，从而导致用户无法快速看到页面内容。

Description

生成CSS文件的方法和装置、电子设备和存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种生成CSS文件的方法和装置、电子设备和存储介质。

背景技术

在相关技术中，通常采用CSS(Cascading Style Sheets，层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言)对网页中元素位置的排版进行控制，以支持各种字体字号样式，并实现对网页对象和模型样式的编辑。

原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并且会以视觉效果进行命名。相关技术中存在的CSS框架，如Tailwind CSS，主要是通过内置一些常用的样式来实现原子CSS，不过这种方案会出现样式的冗余，进而导致CSS文件体积大，从而导致用户无法快速看到页面内容。

因此，相关技术中的CSS文件体积大，从而导致用户无法快速看到页面内容的问题。

发明内容

本申请提供了一种生成CSS文件的方法和装置、电子设备和存储介质，以至少解决相关技术中的CSS文件体积大，从而导致用户无法快速看到页面内容的问题。

根据本申请实施例的一个方面，提供一种生成CSS文件的方法，包括：

获取需要进行样式信息设置的目标HTML文件；

在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；

基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

可选地，如前述的方法，在所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类之前，所述方法还包括：

按照预设的页面渲染方案，确定出需要生成的所述多个CSS原子类；

基于与每个CSS原子类对应的原子类名，以及所述多个CSS原子类，生成包括所述多个CSS原子类的规则字典。

可选地，如前述的方法，所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类，包括：

按照预设方案对所述目标HTML文件进行解析，确定出所述目标HTML文件中的目标样式信息；

在所述规则字典中存在与所述目标样式信息相同的目标CSS原子类名的情况下，将所述目标CSS原子类名对应的原子类确定为与所述目标样式信息对应的所述目标CSS原子类。

可选地，如前述的方法，所述基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件，包括：

建立缓存字典；

将所述目标CSS原子类名以及所述目标CSS原子类对应缓存至所述缓存字典中；

基于所述缓存字典中的目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

可选地，如前述的方法，所述基于所述缓存字典中的目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件，包括：

获取预设CSS文件，其中，所述预设CSS文件中包括多个预设样式信息；

通过在所述多个预设样式信息中确定出所述目标CSS原子类名对应的指定样式信息，并将所述指定样式信息替换为所述目标CSS原子类，得到所述CSS文件。

可选地，如前述的方法，在所述基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件之后，所述方法还包括：

确定所述CSS文件的目标文件信息；

按照所述目标文件信息，将所述CSS文件与所述目标HTML文件相关联，并渲染得到目标页面。

可选地，如前述的方法，在获取需要进行样式信息设置的目标HTML文件之后，所述方法还包括：

在所述多个CSS原子类中，不存在所述HTML文件所需使用的指定CSS原子类的情况下，生成目标提示信息，其中，所述目标提示信息用于指示所述多个CSS原子类中缺失所述指定CSS原子类以及所有所述指定CSS原子类的个数；

对所述目标提示信息进行展示。

根据本申请实施例的另一个方面，还提供了一种生成CSS文件的装置，包括：

获取模块，用于获取需要进行样式信息设置的目标HTML文件；

确定模块，用于在预设的多个CSS原子类中，确定出所述HTML文件所需使用的目标CSS原子类；

生成模块，用于基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

根据本申请实施例的又一个方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；其中，存储器，用于存储计算机程序；处理器，用于通过运行所述存储器上所存储的所述计算机程序来执行上述任一实施例中的方法步骤。

根据本申请实施例的又一个方面，还提供了一种计算机可读的存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一实施例中的方法步骤。

在本申请实施例中，采用获取需要进行样式信息设置的目标HTML文件；在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。的方式，通过在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类，并基于目标CSS原子类生成CSS文件，可以使最终得到的CSS文件中的所有目标CSS原子类是目标HTML文件所需使用的，进而可以避免目标HTML文件中不需要的CSS原子类存在于CSS文件中，可以有效减少CSS文件中CSS原子类的数量，进而可以有效减小CSS文件体积，从而可以提升加载的速度，进而可以让用户快速看到页面内容；有效克服了相关技术中存在的CSS框架存在样式冗余，因此CSS文件体积大，从而导致用户无法快速看到页面内容的技术问题。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是根据本申请实施例的一种可选的生成CSS文件的方法的流程示意图；

图2是根据本申请另一实施例的一种可选的生成CSS文件的方法的流程示意图；

图3是根据本申请应用例的一种可选的生成CSS文件的方法的示意图；

图4是根据本申请实施例的一种可选的生成CSS文件的装置的结构框图；

图5是根据本申请实施例的一种可选的电子设备的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请实施例的一个方面，提供了一种生成CSS文件的方法。可选地，在本实施例中，上述生成CSS文件的方法可以应用于由终端和服务器所构成的硬件环境中。服务器通过网络与终端进行连接，可用于为终端或终端上安装的客户端提供服务(如广告推送服务、应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器提供数据存储服务。

上述网络可以包括但不限于以下至少之一：有线网络，无线网络。上述有线网络可以包括但不限于以下至少之一：广域网，城域网，局域网，上述无线网络可以包括但不限于以下至少之一：WIFI(Wireless Fidelity，无线保真)，蓝牙。终端可以并不限定于为PC、手机、平板电脑等。

本申请实施例的生成CSS文件的方法可以由服务器来执行，也可以由终端来执行，还可以是由服务器和终端共同执行。其中，终端执行本申请实施例的生成CSS文件的方法也可以是由安装在其上的客户端来执行。

以由服务器来执行本实施例中的生成CSS文件的方法为例，图1为本申请实施例提供的一种生成CSS文件的方法，包括如下所述步骤：

步骤S101，获取需要进行样式信息设置的目标HTML文件。

本实施例中的生成CSS文件的方法可以应用于需要在生成用于对HTML文件进行样式渲染的CSS文件的场景。

为了最终确定所需生成的CSS文件，则先获取需要进行样式信息设置的目标HTML文件。

HTML(HyperText Mark-up Language)文件，就是超文本标记语言，结构包括头部分(Head)、和主体部分(Body)，其中头部(head)提供关于网页的信息，主体(body)部分提供网页的具体内容。

目标HTML文件可以是已经能够生成指定页面，但是未完成所需样式对应的代码的HTML文件。例如，未对页面中的颜色、大小、位置等进行设置的HTML文件。

目标HTML文件可以是HTML文件编写人员在完成目标HTML文件之后，通过预设接口上传至实现本实施例方法的服务器(例如，平台或系统)中，以便于后期可以生成与该目标HTML文件对应的CSS文件。

步骤S102，在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类。

开发人员在编写HTML文件的过程中，可以预先约定样式与CSS原子类之间的对应关系(例如，样式名对应的原子类)即，后文中所述的规则字典，进而在得到目标HTML文件之后，可以通过确定出目标HTML文件中与各个元素(例如，文字、背景等等)对应的样式信息(例如，文字颜色、文字大小、文字位置、背景颜色等等)，进而依据目标HTML文件，以确定出目标HTML文件所需使用的目标CSS原子类。

目标CSS原子类可以是例如：用于文字排版的代码.f10{font-size：10px；}，用于定位的代码.tl{text-align:left；}等等。且一般情况下，每个CSS原子类用于对每个元素的其中一种样式进行设定。

例如：当目标HTML文件中包括样式信息为“bg-red”则可以确定出目标CSS原子类“background-color：red”，并指示“背景色为红色”；当样式信息为“rounded-30px/20px”则可确定出目标CSS原子类“border-radius：30px/20px”，并指示边框每个圆角的水平半径是30px，垂直半径是20px，等等。步骤S103，基于目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件。

在得到所有目标CSS原子类之后，即可基于该目标CSS原子类生成对应的CSS文件。

例如，将目标CSS原子类对应的代码写入空白的初始CSS文件中，得到CSS文件；或者将目标CSS原子类对应的代码对预设的初始CSS文件中与每个初始CSS原子类进行修改后，得到CSS文件。

通过本实施例中的方法，通过在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类，并基于目标CSS原子类生成CSS文件，可以使最终得到的CSS文件中的所有目标CSS原子类是目标HTML文件所需使用的，进而可以避免目标HTML文件中不需要的CSS原子类存在于CSS文件中，可以有效减少CSS文件中CSS原子类的数量，进而可以有效减小CSS文件体积，从而可以提升加载的速度，进而可以让用户快速看到页面内容；有效克服了相关技术中存在的CSS框架存在样式冗余，因此CSS文件体积大，从而导致用户无法快速看到页面内容。

作为一种可选的实施例，如前述的方法，在步骤S102在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类之前，方法还包括如下所述步骤：

步骤S201，按照预设的页面渲染方案，确定出需要生成的多个CSS原子类。

页面渲染方案可以是对某一批页面进行渲染的方案，且由于一批页面或者一个页面中所需进行设置的样式包括多个，进而确定出所需生成的多个CSS原子类，以便于能够从中匹配到对应的目标原子类。

步骤S202，基于与每个CSS原子类对应的原子类名，以及多个CSS原子类，生成包括多个CSS原子类的规则字典。

在生成所有CSS原子类之后，可以确定出与每个CSS原子类对应的原子类名，以便于后期HTML开发人员可以通过将原子类名作为样式信息写入至HTML文件中。

进而可以基于多个CSS原子类中，每个CSS原子类以及与每个CSS原子类对应的原子类名，生成包括多个CSS原子类的规则字典。

规则字典可以是JSON格式的文件，可以包括多条键值对信息，每条键值对信息以原子类名作为键名，以对应的CSS原子类作为键值。

例如，“bg-red”：“background-color：red”

“rounded-30px/20px”：“border-radius：30px/20px”。

通过本实施例中的方法，可以生成对应的规则字典，以便于后期可以基于该规则字典得到目标HTML文件所需使用的目标CSS原子类。

作为一种可选的实施例，如前述的方法，所述步骤S102在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类，包括如下所述步骤：

步骤S301，按照预设方案对目标HTML文件进行解析，确定出目标HTML文件中的目标样式信息。

在得到目标HTML文件之后，可以按照预设方案对目标HTML文件进行解析，例如按照指定的字段“class＝“xx””在目标HTML文件中进行匹配，xx为任意样式信息，得到所有目标样式信息。

步骤S302，在规则字典中存在与目标样式信息相同的目标CSS原子类名的情况下，将目标CSS原子类名对应的原子类确定为与目标样式信息对应的目标CSS原子类。

在得到目标样式信息之后，可以通过该目标样式信息在规则字典中进行匹配，并在匹配得到与目标原始信息相同的目标CSS原子类名的情况下，将该目标CSS原子类名对应的原子类确定为目标样式信息对应的目标CSS原子类。

进一步的，在确定出目标HTML文件之后，可以将目标HTML文件缓存至缓存字典中，以便于在本步骤之前，可以从缓存字典直接获取目标样式信息。

通过本实施例中的方法，通过在目标HTML文件中解析得到目标样式信息，然后基于该目标样式信息确定出目标CSS原子类，可以使最终得到的与该目标HTML文件对应的目标CSS原子类。

如图2所示，作为一种可选的实施例，如前述的方法，所述步骤S103基于目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件，包括如下所述步骤：

步骤S401，建立缓存字典。

为了便于后期基于目标CSS原子类生成CSS文件，可以预先建立缓存字典，用于存储后续的目标CSS原子类。

进一步的，缓存字典还可以用于存储前述实施例中的目标样式信息。

步骤S402，将目标CSS原子类名以及目标CSS原子类对应缓存至缓存字典中；

在得到所有一一对应的目标CSS原子类名以及目标CSS原子类，以及得到缓存字典之后，即可将目标CSS原子类名以及目标CSS原子类缓存至缓存字典中，以便于后续可以快速调取得到各个目标CSS原子类。

步骤S403，基于缓存字典中的目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件。

作为一种可选的实施例，如前述的方法，所述步骤S403基于缓存字典中的目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件，包括：

步骤S501，获取预设CSS文件，其中，预设CSS文件中包括多个预设样式信息。

步骤S502，通过在多个预设样式信息中确定出目标CSS原子类名对应的指定样式信息，并将指定样式信息替换为目标CSS原子类，得到CSS文件。

为了生成CSS文件，可以获取预设的预设CSS文件，并且，该预设CSS文件中可以包括多个样式信息。

在多个预设样式信息中，可以确定出与目标CSS原子类名对应的指定样式信息，然后将该指定样式信息替换为目标CSS原子类。进而得到CSS文件。

进一步的，在将指定样式信息替换为目标CSS原子类之后，还可以将预设CSS文件中未进行替换的其他样式信息的相关信息都进行删除。进而可以使得到的CSS文件的数据量更小。进一步减少数据的冗余。

通过本实施例中的方法，可以基于确定给出的目标CSS原子类，自动生成对应的CSS文件，可以有效提升CSS文件的生成效率，并降低开发人员的工作量。

作为一种可选的实施例，如前述的方法，在所述步骤S103基于目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件之后，方法还包括如下所述步骤：

步骤S601，确定CSS文件的目标文件信息；

步骤S602，按照目标文件信息，将CSS文件与目标HTML文件相关联，并渲染得到目标页面。

在得到CSS文件之后，可以确定出CSS文件的目标文件信息。

目标文件信息可以是与CSS文件唯一对应的文件信息，目标文件信息可以包括但不限于：CSS文件的文件地址。

在确定目标文件信息之后，即可将CSS文件与目标HTML文件相关联，进而可以渲染得到目标页面。

例如，可以采用如下所述外联式方法，使用link标签元素将外部的CSS文件(.css文件)被目标HTML文件进行引用，引用需要放在目标HTML文件的<head>部分中。

<head>

<link rel＝"stylesheet"type＝"text/css"href＝"style.css"/>

</head>

对各个属性的说明：

href属性设置外部样式表文件(即，CSS文件)的地址，可以是相对地址，也可以是绝对地址；rel属性定义关联的文档，这里表示关联的是样式表；type属性定义导入文件的类型，同style元素一样，text/css表明为CSS文本文件。一般在定义<link>标签时，应定义3个基本属性，其中href是必须设置属性。

通过本实施例中的方法，可以自动基于目标HTML文件以及CSS文件渲染得到目标页面，可以进一步提升进行页面渲染的效率，提升自动化运行的程度，进而可以有效降低相关人员的工作量。

作为一种可选的实施例，如前述的方法，在所述步骤S101获取需要进行样式信息设置的目标HTML文件之后，方法还包括如下所述步骤：

步骤S701，在多个CSS原子类中，不存在HTML文件所需使用的指定CSS原子类的情况下，生成目标提示信息，其中，目标提示信息用于指示多个CSS原子类中缺失指定CSS原子类以及所有指定CSS原子类的个数；

步骤S702，对目标提示信息进行展示。

在确定出多个CSS原子类之后，若HTML文件所需使用的指定CSS原子类不存在于多个CSS原子类中时，则指示HTML文件中的指定样式信息(与指定CSS原子类的指定原子类名相同)未在多个CSS原子类中查询到对应的指定CSS原子类，则生成目标提示信息。

可选地，在生成目标提示信息之前，可以先统计所有指定CSS原子类(通过指定样式信息进行表征)，然后确定出所有指定CSS原子类的数量(即，与指定样式信息的数量相同)，在生成目标提示信息之后，即可对该目标提示信息进行展示。

通过和本实施例中的方法，可以确定出多个CSS原子类中缺失的指定CSS原子类，并生成对应的目标提示信息，以便于后期人员可以对多个CSS原子类进行拓充，以提升后期对于生成其他HTML文件所对应的CSS文件的效率。

如图3所示，提供一种应用前述任一实施例的应用例：

步骤1.建立规则字典，用户声明需要按需生成的CSS原子类，可采用JSON文件进行如下配置：

{

//背景色

“bg-####”：“background-color：####”

//边框圆角

“rounded-****”:“border-radius：****”，

//元素位置:absolute,fixed,relative,static等

“pos-XXXX”：“position：XXXX”

}

步骤2.建立缓存字典，用于对已命中规则字典的样式进行缓存，提高按需生成的效率。

步骤3.从HTML文件中匹配到所需要的且符合规则字典的CSS样式(即，目标样式信息)。

步骤4.对所有匹配到的CSS样式根据步骤1中规则字典进行样式生成(即，得到各个目标原子类，主要是颜色、大小、位置等的替换)；

步骤5.把代码生成CSS文件。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM(Read-Only Memory，只读存储器)/RAM(Random Access Memory，随机存取存储器)、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

根据本申请实施例的另一个方面，还提供了一种用于实施上述生成CSS文件的方法的生成CSS文件的装置。图4是根据本申请实施例的一种可选的生成CSS文件的装置的结构框图，如图4所示，该装置可以包括：

获取模块1，用于获取需要进行样式信息设置的目标HTML文件；

确定模块2，用于在预设的多个CSS原子类中，确定出HTML文件所需使用的目标CSS原子类；

生成模块3，用于基于目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件。

需要说明的是，该实施例中的获取模块1可以用于执行上述步骤S101，该实施例中的确定模块2可以用于执行上述步骤S102，该实施例中的生成模块3可以用于执行上述步骤S103。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在实现如图1所示方法的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

根据本申请实施例的又一个方面，还提供了一种用于实施上述生成CSS文件的方法的电子设备，该电子设备可以是服务器、终端、或者其组合。

根据本申请的另一个实施例，还提供一种电子设备，包括：如图5所示，电子设备可以包括：处理器1501、通信接口1502、存储器1503和通信总线1504，其中，处理器1501，通信接口1502，存储器1503通过通信总线1504完成相互间的通信。

存储器1503，用于存放计算机程序；

处理器1501，用于执行存储器1503上所存放的程序时，实现如下步骤：

步骤S101，获取需要进行样式信息设置的目标HTML文件。

步骤S102，在预设的多个CSS原子类中，确定出目标HTML文件所需使用的目标CSS原子类。

步骤S103，基于目标CSS原子类生成用于对目标HTML文件进行样式信息设置的CSS文件。

可选地，在本实施例中，上述的通信总线可以是PCI(Peripheral ComponentInterconnect，外设部件互连标准)总线、或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述处理器可以是通用处理器，可以包含但不限于：CPU(Central ProcessingUnit，中央处理器)、NP(Network Processor，网络处理器)等；还可以是DSP(DigitalSignal Processor，数字信号处理器)、ASIC(Application Specific IntegratedCircuit，专用集成电路)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本申请实施例还提供一种计算机可读存储介质，存储介质包括存储的程序，其中，程序运行时执行上述方法实施例的方法步骤。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、ROM、RAM、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例中所提供的方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种生成CSS文件的方法，其特征在于，包括：

获取需要进行样式信息设置的目标HTML文件；

在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类；

基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

2.根据权利要求1所述的方法，其特征在于，在所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类之前，所述方法还包括：

按照预设的页面渲染方案，确定出需要生成的所述多个CSS原子类；

基于与每个CSS原子类对应的原子类名，以及所述多个CSS原子类，生成包括所述多个CSS原子类的规则字典。

3.根据权利要求2所述的方法，其特征在于，所述在预设的多个CSS原子类中，确定出所述目标HTML文件所需使用的目标CSS原子类，包括：

按照预设方案对所述目标HTML文件进行解析，确定出所述目标HTML文件中的目标样式信息；

在所述规则字典中存在与所述目标样式信息相同的目标CSS原子类名的情况下，将所述目标CSS原子类名对应的原子类确定为与所述目标样式信息对应的所述目标CSS原子类。

4.根据权利要求1所述的方法，其特征在于，所述基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件，包括：

建立缓存字典；

将所述目标CSS原子类名以及所述目标CSS原子类对应缓存至所述缓存字典中；

基于所述缓存字典中的目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

5.根据权利要求4所述的方法，其特征在于，所述基于所述缓存字典中的目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件，包括：

获取预设CSS文件，其中，所述预设CSS文件中包括多个预设样式信息；

通过在所述多个预设样式信息中确定出所述目标CSS原子类名对应的指定样式信息，并将所述指定样式信息替换为所述目标CSS原子类，得到所述CSS文件。

6.根据权利要求1所述的方法，其特征在于，在所述基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件之后，所述方法还包括：

确定所述CSS文件的目标文件信息；

按照所述目标文件信息，将所述CSS文件与所述目标HTML文件相关联，并渲染得到目标页面。

7.根据权利要求1至6中任一项所述的方法，其特征在于，在获取需要进行样式信息设置的目标HTML文件之后，所述方法还包括：

在所述多个CSS原子类中，不存在所述HTML文件所需使用的指定CSS原子类的情况下，生成目标提示信息，其中，所述目标提示信息用于指示所述多个CSS原子类中缺失所述指定CSS原子类以及所有所述指定CSS原子类的个数；

对所述目标提示信息进行展示。

8.一种生成CSS文件的装置，其特征在于，包括：

获取模块，用于获取需要进行样式信息设置的目标HTML文件；

确定模块，用于在预设的多个CSS原子类中，确定出所述HTML文件所需使用的目标CSS原子类；

生成模块，用于基于所述目标CSS原子类生成用于对所述目标HTML文件进行样式信息设置的CSS文件。

9.一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口和所述存储器通过所述通信总线完成相互间的通信，其特征在于，

所述存储器，用于存储计算机程序；

所述处理器，用于通过运行所述存储器上所存储的所述计算机程序来执行权利要求1至7中任一项所述的方法步骤。

10.一种计算机可读的存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行权利要求1至7中任一项中所述的方法步骤。

Images