CN116257714A

CN116257714A - 层叠样式表的生成方法、装置、计算机设备和存储介质

Info

Publication number: CN116257714A
Application number: CN202211642266.7A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2022-12-20
Filing date: 2022-12-20
Publication date: 2023-06-13

Abstract

本申请实施例公开了层叠样式表的生成方法、装置、计算机设备和存储介质；本申请实施例获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件；根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据映射关系，由目标样式类名生成目标对象，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识；根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。在本申请实施例中，通过将目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以生成基于待处理超文本标记语言文件格式的目标层叠样式表，以提升开发效率。

Description

层叠样式表的生成方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，具体涉及层叠样式表的生成方法、装置、计算机设备和存储介质。

背景技术

CSS(Cascading Style Sheets，层叠样式表，是一种用来表现HTML(超文本标记语言)或XML(可扩展标记语言)样式的编程语言，主要用在互联网的网页样式中，不仅可静态修饰网页，还可配合JavaScript动态修饰网页。

现有技术中，随着时间的迁移与需求的迭代，网页内容会越来越多，这意味着渲染网页样式的层叠样式表代码变得很繁重，开发人员需要花费大量时间和精力编写层叠样式表，效率低。

发明内容

本申请实施例提供层叠样式表的生成方法、装置、计算机设备和存储介质，可以提升生成层叠样式表的效率。

本申请实施例提供一种层叠样式表的生成方法，包括：获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，所述样式类名为超文本标记语言文件中指向层叠样式表的类名，所述样式属性为层叠样式表的属性；根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据所述映射关系，由所述目标样式类名生成目标对象，所述目标对象携带有所述目标样式类名对应的目标样式属性、以及指向所述目标样式类名的标识；根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表。

本申请实施例还提供一种层叠样式表的生成装置，包括：获取单元，用于获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，所述样式类名为超文本标记语言文件中指向层叠样式表的类名，所述样式属性为层叠样式表的属性；确定单元，用于根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；生成单元，用于根据所述映射关系，由所述目标样式类名生成目标对象，所述目标对象携带有所述目标样式类名对应的目标样式属性、以及指向所述目标样式类名的标识；生成单元，还用于根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表。

本申请实施例还提供一种计算机设备，包括处理器和存储器，所述存储器存储有多条指令；所述处理器从所述存储器中加载指令，以执行本申请实施例所提供的任一种层叠样式表的生成方法中的步骤。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行本申请实施例所提供的任一种层叠样式表的生成方法中的步骤。

本申请实施例可以获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，所述样式类名为超文本标记语言文件中指向层叠样式表的类名，所述样式属性为层叠样式表的属性；根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据所述映射关系，由所述目标样式类名生成目标对象，所述目标对象携带有所述目标样式类名对应的目标样式属性、以及指向所述目标样式类名的标识；根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表。

在本申请中，通过将目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以生成基于待处理超文本标记语言文件格式的目标层叠样式表。以此，开发时仅需编写待处理超文本标记语言文件，即可以通过该替换操作生成相应的目标层叠样式表，以提升开发效率。

此外，通过将待处理超文本标记语言文件中的目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以建立替换后超文本标记语言文件中标识与目标对象携带的目标样式属性之间的关联关系，以此可以通过调整该关联关系，自由调整待处理超文本标记语言文件对应的样式属性，以快速修改网页样式，提升网页样式修改的效率。

附图说明

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

图1a是本申请实施例提供的层叠样式表的生成方法的场景示意图；

图1b是本申请实施例提供的层叠样式表的生成方法的流程示意图；

图1c是本申请实施例提供的抽象语法树的示意图；

图1d是本申请实施例提供的目标对象的示意图；

图1e是本申请实施例提供的目标层叠样式表的示意图；

图2是本申请另一个实施例提供的层叠样式表的生成方法的流程示意图；

图3是本申请实施例提供的层叠样式表的生成装置的结构示意图；

图4是本申请实施例提供的计算机设备的结构示意图。

具体实施方式

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

在对本申请实施例进行详细地解释说明之前，先对本申请实施例涉及到的一些名词进行解释说明。

其中，超文本标记语言(HTML)是一种标记语言，它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。超文本标记语言文件可以指由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

其中，层叠样式表(CSS)可以指是用来表现HTML(超文本标记语言)或XML(可扩展标记语言)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。

本申请实施例提供层叠样式表的生成方法、装置、计算机设备和存储介质。

其中，该层叠样式表的生成装置具体可以集成在电子设备中，该电子设备可以为终端、服务器等设备。其中，终端可以为手机、平板电脑、智能蓝牙设备、笔记本电脑、或者个人电脑(Personal Computer，PC)等设备；服务器可以是单一服务器，也可以是由多个服务器组成的服务器集群。

在一些实施例中，该层叠样式表的生成装置还可以集成在多个电子设备中，比如，层叠样式表的生成装置可以集成在多个服务器中，由多个服务器来实现本申请的层叠样式表的生成方法。

在一些实施例中，服务器也可以以终端的形式来实现。

例如，参考图1a，在一些实施方式中提供了一种层叠样式表的生成系统的场景示意图，该系统可以实现层叠样式表的生成方法。该层叠样式表的生成系统可以包括终端1000、服务器2000以及网络3000，终端以及服务器可以通过网络进行数据交互。

其中，服务器用于获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，样式类名为超文本标记语言文件中指向层叠样式表的类名，样式属性为层叠样式表的属性；根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据映射关系，由目标样式类名生成目标对象，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识；根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。

其中，终端用于从服务器获取目标层叠样式表，并根据目标层叠样式表生成网页。

以下分别进行详细说明。需说明的是，以下实施例的先后次序不作为对实施例优选顺序的限定。

在本实施例中，提供了一种层叠样式表的生成方法，如图1b所示，该层叠样式表的生成方法的具体流程可以如下：

110、获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件。

其中，样式类名为超文本标记语言文件中指向层叠样式表的类名，样式属性为层叠样式表的属性。

其中，超文本标记语言文件(HTML)中有很多的标签(元素)，元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。Class是HTML标签中的一个属性，用于定义元素的类名。可以通过class属性规定元素的样式类名(classname)，通常class属性可以用于指向样式表中的类(class)。

可选地，样式类名为原类。其中，原类可以指HTML文件中最小单位的类名。例如，样式类名可以为h1标签携带fs-50与c-f66的类名，p标签携带mt-20、fs-20和c-666的类名。

其中，样式属性可以指CSS属性，即指定选择符所具有的属性，常见的如字体属性、颜色属性、文本属性等。例如，样式属性可以包括font-size(字体大小)、font-weight(字体加粗)、line-height(行间距)、margin(外边距)、pading(填充)、border(边框)等。此外，样式属性可以有相应的属性值，该属性值可以为法定属性值或常见的数值加单位，如25px(25像素)或颜色值等。

例如，可以预先建立HTML文件中的所有常用的样式类名与层叠样式表中所有常用的样式属性之间的映射关系，以使得HTML文件中的每个最小单位的类名可以对应一个CSS属性以及其值。

可选地，由于CSS属性的属性值定义很广泛，为了减少建立映射关系的数据量，提升效率，可以将类名对应的样式属性以及属性值分别建立映射关系。例如，以样式类名fs-50为例，不能提前将其定义为font-size:50px，而是通过分析fs-50的组成，左边的fs对应CSS属性名称font-size，右边的50对应属性值50px，在解析时动态将其拼接在一起，以此在解析时通过一份字典解析即可，可以减少映射关系的数据量，提升效率。

可选地，为了方便后续步骤读取，在步骤110之前，可以将样式类名与样式属性的映射关系封装为一个对象，并保存为一个JSON文件，该JSON文件在后续步骤中实时被读取用于解析CSS属性。

可选地，为了便于从封装后的对象中解析得到样式类名与样式属性的映射关系，在步骤110之前，还可以设置如下的解析规则：fs-10的10解析为10px，fs-10e解析为10em，fs-10r解析为10rem，fs-10p解析为10％。如margin、padding、border、background(背景)等连写属性，它们的属性值都是一连串空格间隔开的字符串，例如border:1px solid#3c9，在HTML结构中编写时使用下划线_表示空格，例如b-1_solid_3c9。当然还可根据CSS属性的特性制定更多的解析规则，可以将该解析机制封装为FormatValue函数，以便后续步骤调用。

其中，Format函数是一个成员函数，它通过格式操作使任意类型的数据转换成一个字符串。在实际应用中，可以基于实际需要，编写不同的Format函数如FormatFile函数、FormatValue函数。

在一些实施方式中，可以对样式属性的属性名称简写以建立样式类名与样式属性的映射关系，以编写更简洁、更具可读性的层叠样式表，提升编写层叠样式表的效率。具体地，获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件之前，还包括：

获取样式属性的初始属性名称；

从初始属性名称中提取部分字段，得到目标属性名称；

根据目标属性名称以及样式类名，创建样式类名与样式属性的映射关系。

其中，初始属性名称可以指CSS属性原始的名称，如font-size、font-weight、line-height、margin、pading、border等。

可以对CSS属性原始的名称进行简写得到相应的目标属性名称。例如，可以提取首字母作为目标属性名称，如可以将margin简写为m、margin-left(左边距)简写为ml、margin-right(右边距)简写为mr、margin-top(上外边距)简写为mt、margin-bottom简写为mb(下边距)、padding简写为p、padding-left(左内边距)简写为pl、padding-right(右内边距)简写为pr、padding-top(顶部内边距)简写为pt、padding-bottom(底部内边距)简写为pb、font-size简写为fs、color(文本颜色)简写为c等。再如，以样式类名fs-50为例，可以建立fs-50与其对应的目标属性名称fs和属性值50px的映射关系。

可选地，也可以通过随机字符确定初始属性名称对应的目标属性名称。例如，可以以aaa表示margin、bbb表示pading、ccc表示border，那对应形式分别是aaa-10，bbb-20，ccc-1_solid_3c9，分别表示margin:10px，padding:20px，border:1px solid#3c9。若同时出现多个aaa-10，最终以最后一个为准，前面的将被删除。

120、根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名。

其中，类名属性节点可以指节点名称为类的属性节点，例如，若以抽象语法树形式表征待处理超文本标记语言文件，则类名属性节点可以指该抽象语法树中type(类型)为attribute(属性)且name(名称)为class(类)的节点。其中，节点值可以指节点的值。

其中，目标样式类名可以指待处理超文本标记语言文件中的样式类名。

例如，可以通过Node对象nodeType(节点类型)获取所有节点的节点类型，再通过nodeName(节点名称)属性获取节点类型为的attribute的所有节点的节点名称，最后通过nodeValue(节点属性)属性获取其中节点名称为类的节点的节点值，通过解析获取的节点值，确定每个节点值对应的样式类名，以此作为目标样式类名。

在一些实施方式中，可以将待处理超文本标记语言文件转换为抽象语法树，以快速、准确地查找类名属性节点。具体地，根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名，包括：

根据待处理超文本标记语言文件的文本内容，生成抽象语法树；

遍历抽象语法树，确定类名属性节点；

将类名属性节点的节点值对应的样式类名，确定为目标样式类名。

其中，待处理超文本标记语言文件的文本内容可以包括待处理超文本标记语言文件的代码。

其中，抽象语法树是指通过对待处理超文本标记语言文件的代码解析得到的抽象语法树，是待处理超文本标记语言文件的抽象语法结构的树状表示，树上的每个节点都表示待处理超文本标记语言文件的一种结构。例如，可以通过Asttokens将字符串对象转化为抽象语法树上的节点，抽象语法树提供节点类的定义、工具函数和类，包括遍历语法树类和修改语法树等功能，可以使用Asttokens来分析和处理待处理超文本标记语言文件。Asttokens是文本和标记化形式维护源，并用标记信息标记AST节点的工具。

可选地，属性节点可以指抽象语法树上的属性节点，是抽象语法树上的一种节点类型。类名属性节点可以指抽象语法树上的type为attribute且name为class的节点。

例如，可以通过readFileSync函数读取待处理超文本标记语言文件得到文件内容，并将文件内容的代码解析为抽象语法树AST，遍历AST每个子节点。在遍历过程中，通过nodeType以及nodeName获取所有节点的节点类型以及节点名称，如图1c所示，通过获取图中左侧抽象语法树的class对应的节点类型type:"Attribute"以及节点名称name:"class"，并根据获取的节点类型以及节点名称，从所有节点中确定类名属性节点。再提取类名属性节点的节点值，通过解析该节点值确定该类名属性节点对应的样式类名，其中，类名属性节点的节点值可以为该节点的value子节点下的data子节点的值。如图1c所示，图中右侧代码段是对左侧抽象语法树中节点的具体表示，图1c中类名属性节点的value子节点下可以包括start、end、type，raw以及data等多个子节点，可以将data子节点的值“mt-20fs-20c-666”作为目标样式类名。

可选地，待处理超文本标记语言文件可以包括多个子文件，可以遍历该多个子文件，对每个子文件执行步骤根据待处理超文本标记语言文件的文本内容，生成抽象语法树，步骤遍历抽象语法树，确定类名属性节点，以及步骤将类名属性节点的节点值对应的样式类名，确定为目标样式类名。

在一些实施方式中，可以根据遍历语法树的顺序，将目标样式类名组合得到类名集合，一方面便于后续步骤依序调用目标样式类名，另一方面由该类名集合生成目标对象，使目标对象中的目标样式属性以及指向目标样式类名的标识都按照遍历抽象语法树的顺序排列，可以提升将目标样式类名替换为标识的准确性和效率。具体地，根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名之后，还包括：

按照遍历抽象语法树的顺序，由目标样式类名组成类名集合。

其中，类名集合可以指由目标样式类名组成的集合。该类名集合可以为有序的数据结构形式，如数组、队列等。

例如，在遍历抽象语法树的过程中，依序确定了fs-50、c-f66、mt-20、fs-20和c-666等目标样式类名，则可以将这些目标样式类名组成[fs-50、c-f66、mt-20、fs-20、c-666]的类名集合。

可选地，为了便于提取类名集合中的任一目标样式类名，类名集合可以为数组形式，若类名集合为数组形式，则该类名集合也可以称为类名数组。

例如，类名数组中可以包括多个子集合，目标样式类名可以视为这些子集合的文本值，每个子集合对应一个HTML标签，可以根据对应的HTML标签将对应的子集合分为一类。如，div标签的子集合是main，h1标签的子集合是fs-50与c-f66，p标签的子集合是mt-20、fs-20和c-666。这些子集合按照抽象语法树扫描的顺序组成数组结构[“main”，“fs-50c-f66”，“mt-20，fs-20c-666”]，引号内表示对应同一HTML标签的子集合。

可选地，可以将类名集合作为一个classes变量(类的变量)，以便后续步骤调用。例如，可以通过const classes＝sast.map(v＝＞v.value.data)，在遍历抽象语法树的顺序后，提取所有类名属性节点的样式类名，得到classes变量。

130、根据映射关系，由目标样式类名生成目标对象。

其中，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识。目标对象可以指由目标样式类名转换得到的对象。例如，在面向对象的编程((Object Oriented Programming))中，可以将计算机程序视为一组对象的集合，对象可以包含数据和操作数据的函数。

其中，指向目标样式类名的标识可以指能用于表征目标样式类名的标识。例如，获取与目标样式类名具有预设映射关系的标识作为指向该目标样式类名的标识，也可以对目标样式类名进行简写、或随机生成指向该目标样式类名的标识。

例如，可以将目标样式类名所在的类名集合转换为实体的目标对象，以将基本类型转换为可引用的对象，便于后续步骤调用。

可选地，目标对象可以为CSS语法规则。

其中，CSS语法规则可以指将样式应用到指定类型的元素的规则。例如，CSS语法规则可以由选择器和声明块两个基本部分组成的，选择器决定为哪些元素应用样式；声明块定义相应的样式，它包含在一对花括号内，有一条或多条声明组成，而每一条声明则由一个属性和一个值组成，中间用冒号隔开。

在一些实施方式中，可以由指向同一目标样式类名的标识以及目标样式属性生成目标对象，以便于根据目标对象快速获取同一目标样式类名对应的标识以及目标对象，提升处理效率。具体地，根据映射关系，由目标样式类名生成目标对象，包括：

根据映射关系，获取目标样式类名对应的目标样式属性；

将目标样式类名、以及目标样式类名对应的目标样式属性进行组合，生成初始对象；

将初始对象中的目标样式类型转换为指向目标样式类名的标识，得到目标对象。

其中，目标样式属性可以指目标样式类名对应的样式属性。

例如，可以通过解析类名属性节点的节点值，从中提取得到目标样式类名。根据映射关系获取对应每个目标样式类名的CSS属性名称及其值，并对每个目标样式类名生成用于指出规则所要选择的元素的选择器A，并将每个目标样式类名对应的一个CSS属性名称及其值作为一个声明B，将该每个目标样式类名对应的所有声明用{}包裹起来后组成一个声明块，最后得到对应每个目标样式类名的规则A{B}，其中A表示对应任一目标样式类名的选择器，B表示对应该目标样式类名的声明，{B}表示由对应该目标样式类名的声明组成的声明块，所有目标样式类名对应的规则即可以组成初始CSS语法规则(初始对象)，再将获得的初始CSS语法规则中的目标样式类名(选择器)转换为随机字符串(标识)，即得到CSS语法规则。

可选地，也可以先生成指向目标样式类名的标识，再组合得到目标对象。具体地，根据映射关系，由目标样式类名生成目标对象，包括：

根据所述映射关系，获取所述目标样式类名对应的目标样式属性；

生成指向所述目标样式类名的标识；

将对应同一所述目标样式类名的所述标识和所述目标样式属性进行组合，生成目标对象。

可选地，对应同一HTML标签的目标样式类名的标识可以相同。以此，可以一次性获取对应同一HTML标签的样式属性，提升对同一HTML标签样式的处理效率。

可选地，可以将对应同一HTML标签的目标样式类名对应的声明组成一个声明块，例如，以h1标签对应fs-50与c-f66为例，可以将i8qrc9kvhw作为指向fs-50与c-f66的标识，并可以生成对应h1标签的规则：

“i8qrc9kvhw”:

{“primitives”:“fs-50c-f66”,

“rules”:[

“font-size:50px”,

“color:#f666”

]

}，其中，{}内表示声明块，primitives可以用于存储目标样式类名，以便于检索HTML文件中相应的字段。

可选地，指向目标样式类名的标识为选择器。

可选地，若目标样式类名组成了类名数组，可以将类名数组拆分得到按照遍历抽象语法树顺序排列的多个目标样式类名，再执行步骤130。

可选地，也可以按照数组中多个目标样式类名的排列顺序，依次提取目标样式类名，并对提取的每个目标样式类名执行步骤根据映射关系，获取目标样式类名对应的目标样式属性，以及步骤生成指向目标样式类名的标识，再将对应同一目标样式类名的标识和目标样式属性进行组合，生成目标对象。

例如，可以将用于将目标样式类名的CSS属性名称及其值组成CSS语法规则的机制封装为FormatFile函数，以此通过FormatFile函数，调用类名集合对应的classes变量，如const fileContent＝FormatFile(classes)，将该classes变量转换为实体的CSS语法规则。如，以[“main”，“fs-50c-f66”，“mt-20，fs-20c-666”]为例，可以先获取每个HTML标签对应的类名集合(即“”内的目标样式类名)，再基于空格将其拆分为main、fs-50、c-f66、mt-20、fs-20和c-666，基于符号-进一步拆分每个类名集合，获取相应目标样式属性，以输出如图1d所示的属性值，再将目标样式类目转换为如图1d所示的随机字符串(标识)，最终输出如图1d所示的CSS语法规则。该CSS语法规则中，对应同一HTML标签的目标样式类名以同一标识表示，如图1d中i8qrc9kvhw为fs-50c-f66对应的标识，再由对应同一HTML标签的目标样式属性组成一个rules(规则)，以此可以快速替换对应同一HTML标签的目标样式类名。

在一些实施方式中，可以以随机字符串作为标识，以提升生成标识的效率。指向目标样式类名的标识为随机字符串。

例如，对于每个目标样式类名，可以使用一个指定长度随机字符串代替该目标样式类名。

可选地，可以通过RandomId函数生成长度随机字符串。RandomId函数可以用于生成随机浮点数、整数、字符串。

140、根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。

其中，目标层叠样式表可以指与待处理超文本标记语言文件关联的蹭点样式表。

例如，为了提升将目标样式类名替换为标识的准确性和效率，可以通过遍历抽象语法树上的每个节点，依次判断该节点是否为类名属性节点，若是，则将类名属性节点对应的目标样式类名替换为相应的标识，在遍历完抽象语法树后，即同时完成了对所有目标样式类名的替换，得到了替换后的抽象语法树，并以此生成目标层叠样式。

可以理解的是，通过替换待处理超文本标记语言文件对应的目标样式类名，可以生成基于待处理超文本标记语言文件HTML结构的CSS文件，以此可以简化最终HTML文件的文件内容，使文件体积更小。此外，通过将目标样式类名替换为标识，以对超文本标记语言文件中的目标样式类名进行模糊处理，提升超文本标记语言文件的数据安全性。

在一些实施方式中，根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表，包括：

根据目标对象，将待处理超文本标记语言文件中的目标样式类名替换为标识，得到目标超文本标记语言文件；

根据目标对象以及目标超文本标记语言文件，生成目标层叠样式表。

例如，可以基于目标对象携带的目标样式类名与目标样式属性的关联关系以及指向目标样式类名的标识，将目标样式属性与目标超文本标记语言文件中的标识关联，以将关联后的目标样式属性作为目标层叠样式表。以此，在编写HTML文件后，可以生成与HTML文件关联的CSS文件。

在一些实施方式中，可以通过检测待处理超文本标记语言文件中对应目标样式类名的基础类型字段，来一一进行替换操作，以实现对目标样式类名的自动替换。具体地，目标对象包括对应目标样式类名的基础类型字段，根据目标对象，将待处理超文本标记语言文件中的目标样式类名替换为标识，得到目标超文本标记语言文件，包括：

根据目标对象，在待处理超文本标记语言文件中检测与基础类型字段匹配的目标字段；

若检测到与基础类型字段匹配的目标字段，将目标字段替换为标识，得到目标超文本标记语言文件。

其中，基础类型字段可以指原生类型字段(Primitives字段)，该字段可以用于存储目标样式类名。例如，目标对象中的基础类型字段可以表征为“primitives”:“fs-50c-f66”，其中fs-50c-f66为基础类型字段。

例如，可以通过readFileSync函数读取HTML文件，将扫描出来的与基础类型字段相同的字段全部替换为相应的标识。如，将main替换为1n8co7svqi，fs-50c-f66替换为i8qrc9kvhw，mt-20fs-20c-666替换为zrww29wsnq，以得到目标HTML文件。

在一些实施方式中，可以将目标映射关系以及超文本标记语言文件关联生成目标层叠样式表，以快速生成基于超文本标记语言文件结构的层叠样式表。具体地，根据目标对象以及目标超文本标记语言文件，生成目标层叠样式表，包括：

从目标对象中，提取标识以及与标识对应的目标样式属性；

将标识以及与标识对应的目标样式属性进行组合，生成目标映射关系；

将目标映射关系与目标超文本标记语言文件进行关联，得到目标层叠样式表。

其中，目标映射关系可以指由每个标识以及与该标识对应的目标样式属性组成的映射关系。

例如，可以从目标对象中提取每个用于表征目标样式类名的随机字符串，以及与该字符串对应的rules字段，该rules字段中包括目标样式类名对应的目标样式属性，如rules字段可以表征为“rule”：[“font-size:50px”,“color:#f666”]，[]中的字段为目标样式属性。以此可以以rule{}的形式组合起来，生成映射关系.i8qrc9kvhw{font-size:50px；color:#f666；}，i8qrc9kvhw表示表征目标样式类名的随机字符串。由所有表征目标样式类名的随机字符串对应的映射关系，组成一份对应HTML文件的CSS文件(目标映射关系)。对于rules为空数组的类名直接跳过，不做任何处理。再将该CSS文件以外联的形式链接到目标HTML文件中，以得到与目标HTML文件链接的目标CSS文件(目标层叠样式表)。如图1e所示，该目标CSS文件可以记录指向目标样式类名的标识(随机字符串)以及相应的目标样式属性的映射关系以此，在开发时只需编写HTML文件，可以通过构建映射关系、以及对在HTML文件的动态扫描与动态分析的形式生成一份对应CSS文件，可以提升编写CSS文件文件的效率。

可选地，目标映射关系与目标超文本标记语言文件关联的方式为外联方式。其中，外联可以指使用link或者@import引入CSS文件，通过外联方式链接的CSS文件是一个单独的文件，可以作用于多个页面，在修改的时候可以针对性地修改某一块区域，达到多个页面样式同时变更，相较于内联、页级链接的方式，省去了到每个页面修改的步骤，提高了开发效率和性能。

本申请实施例提供的层叠样式表的生成方案可以应用在各种场景中。比如，以网页制作为例，获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，样式类名为超文本标记语言文件中指向层叠样式表的类名，样式属性为层叠样式表的属性；根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据映射关系，由目标样式类名生成目标对象，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识；根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。

采用本申请实施例提供的方案通过将目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以生成基于待处理超文本标记语言文件格式的目标层叠样式表。以此，开发时仅需编写待处理超文本标记语言文件，即可以通过该替换操作生成相应的目标层叠样式表，以提升开发效率。

由此可知，本申请实施例的层叠样式表的生成方法适用范围广，面对基于设计图开发或不基于设计图开发，都能通过编写目标样式类名方式快速搭建一个网页元素的层叠样式表。它并不会像那些UI框架需引入繁重且累赘的层叠样式表支持文件，这些文件需在使用前编译好，而目标样式类名的编译是在编写完毕保存时即使编辑，具有更好的实时性、简化性和轻量性。

根据上述实施例所描述的方法，以下将作进一步详细说明。

在本实施例中，将以应用于设计图开发网站为例，对本申请实施例的方法进行详细说明。

如图2所示，一种层叠样式表的生成方法具体流程如下：

210、根据样式属性的初始属性名称以及样式类名，创建样式类名与样式属性的映射关系。

HTML文件的标签可以携带样式类，例如，h1标签携带fs-50与c-f66的类名，p标签携带mt-20、fs-20和c-666的类名。因为值的定义很广泛，无需提起定义其对应值，以fs-50为例，不能提前将其定义为font-size:50px，而是通过分析fs-50的组成，左边的fs对应font-size，右边的50对应50px，在解析时动态将其拼接在一起。这样就能解决那些原子化类名提前定义指定CSS属性及其值了，在解析时通过一份字典解析即可。

因此，可以对这些原子化类名(样式类名)起一个名字，叫做原类，在本申请实施例以原类表示最小单位的类名，对应一个CSS属性及其值。

例如，可以根据CSS属性名称缩写制定映射关系中的CSS属性名称(样式属性)，如可以将margin简写为m、margin-left(左边距)简写为ml、margin-right(右边距)简写为mr、margin-top(上外边距)简写为mt、margin-bottom简写为mb(下边距)、padding简写为p、padding-left(左内边距)简写为pl、padding-right(右内边距)简写为pr、padding-top(顶部内边距)简写为pt、padding-bottom(底部内边距)简写为pb、font-size简写为fs、color(文本颜色)简写为c等。

再如，也可以随机制定映射关系中的CSS属性名称，例如aaa表示margin，bbb表示pading，ccc表示border，那对应形式分别是aaa-10，bbb-20，ccc-1_solid_3c9，分别表示margin:10px，padding:20px，border:1px solid#3c9。若同时出现多个aaa-10，最终以最后一个为准，前面的将被删除。

在本申请实施例中，可以通过建立样式类名与CSS属性名称缩写之间的映射关系，以作为CSS属性映射集合M，该CSS属性映射集合M中的所有CSS属性使用一个对象包括并保存为一个JSON文件，该JSON文件在后续处理步骤中实时被读取用于解析CSS属性。另外还制定以下解析规则：

fs-10的10解析为10px，fs-10e解析为10em，fs-10r解析为10rem，fs-10p解析为10％。像margin、padding、border、background等连写属性，它们的属性值都是一连串空格间隔开的字符串，例如border:1px solid#3c9，在HTML结构中编写时使用下划线_表示空格，例如b-1_solid_3c9。当然还可根据CSS属性的特性制定更多的解析规则，该解析机制标记为BX。

220、获取待处理超文本标记语言文件以及映射关系。

例如，可以获取开发阶段在HTML文件中编写HTML结构并编写每个结构的原类(即样式类名)，以获得待处理的HTML文件。

230、根据待处理超文本标记语言文件的文本内容，生成抽象语法树。

例如，可以通过NodeJS的glob模块找出所有符合规则的HTML文件，再通过NodeJS的fs模块的readFileSync函数读取这些HTML文件得到内容C，使用NodeJS的svelte模块将C解析为抽象语法树AST。

240、遍历抽象语法树，确定目标样式类名。

例如，可以遍历AST每个子节点SAST并对其做单独处理，找出SAST中所有type为Attribute且name为class的节点(类名属性节点)，并提取其value的data值，该值就是原类集合的文本值，将提取到的data值标记为S，解析S从中提取出所有由M演化出来的类名。例如：如图1c所示，可以将data子节点的值“mt-20fs-20c-666”作为目标样式类名。

具体地，div标签的原类集合是main，h1标签的原类集合是fs-50与c-f66，p标签的原类集合是mt-20、fs-20和c-666。因此，可以将这些原类集合按照抽象语法树扫描的顺序组成数组结构(类名数组)，如[“main”，“fs-50c-f66”，“mt-20，fs-20c-666”]。该数组结构可以以classes变量形式，存储待处理的HTML文件的原类信息，每个HTML标签对应数组中一个原类集合(子集合)，目标样式类名可以视为这些子集合的文本值。

250、根据映射关系，将对应同一目标样式类名的标识和目标样式属性进行组合，生成目标对象。

例如，可以将目标样式类名根据M生成对应CSS属性及其值，再将这些CSS属性组成一个完整的CSS规则X。

具体地，可以将类名数组传入FormatFile函数，该函数用于解析这些原类的规则，解析完毕会生成对应CSS属性及其值，再将这些CSS属性组成一个完整的CSS规则，最后将这些CSS规则组成一个完整的文件内容。FormatFile函数主要是基于M将原类集合转换为实体的CSS规则。

由于原类集合可能存在过长的可能，导致最终输出的HTML结构过于繁琐累赘，因此在转换原类集合时使用一个指定长度随机字符串代替映射的类名，生成指定长度随机字符串的函数封装为RandomId。在处理CSS属性值时，使用前文的标记为BX的解析机制，在此封装为FormatValue函数。在处理时无法在M中找到对应原类，则认为该原类无效，放弃处理。根据上述原理，最终将HTML结构中的原类处理为以下JavaScript对象(目标对象)，对应代码中的fileContent变量。例如，可以将JavaScript对象标记为G，G的文件内容如图1d所示。

以此，通过上述步骤，可以得到当前HTML文件内部使用了哪些样式，这些样式均可通过G反映出来。

260、根据目标对象，将待处理超文本标记语言文件中的目标样式类名替换为标识，得到目标超文本标记语言文件。

例如，可以通过NodeJs的fs模块的readFileSync函数读取HTML文件，基于G将扫描出来的类名全部替换为G中对应类名。例如main对应1n8co7svqi，fs-50c-f66对应i8qrc9kvhw，mt-20fs-20c-666对应zrww29wsnq。其实就是检测primitives字段再将其替换再HTML结构中对应类名，得到目标HTML文件。

以此，可以简化目标HTML文件的文件内容，使文件体积更小，同时也可以模糊源码，增加源码被破解的难度。当然，原文件的HTML结构不会发生变化，这个处理会生成新的HTML文件。

270、将任一标识以及与任一标识对应的目标样式属性进行组合，生成目标映射关系。

例如，可以单独处理G，从中提取指定长度随机字符串的类名与该类名对应rules字段，将其以rule{}的形式组合起来，生成一份对应HTML文件的CSS文件(目标映射关系)。对于rules为空数组的类名直接跳过，不做任何处理。

280、将目标映射关系以外联的形式链接到目标超文本标记语言文件中，得到目标层叠样式表。

例如，可以文件内容中的类名对应目标HTML文件中的类名(随机字符串表征的标识)，再将该CSS文件以外联的形式链接到HTML文件中，将链接后的CSS文件作为目标层叠样式表。最终生成如图1e所示的CSS文件。如图1e所示，该CSS文件可以记录指向目标样式类名的标识(随机字符串)以及相应的目标样式属性的映射关系。

以此，开发时只需编写HTML文件，而CSS文件是在构建阶段以动态扫描与动态分析的形式生成一份对应CSS文件。以同样方式将所有HTML文件遍历并处理完毕，就会得到每个HTML文件对应CSS文件。

本申请实施例在开发阶段，根据CSS属性的特性创建一个简单明了的CSS属性映射集合M，开发网站时编写网页的HTML结构而无需编写CSS样式，编写完毕在HTML结构中输入M的规则，这些规则可根据设计图获取的样式信息编写。在构建阶段，通过NodeJS的glob模块找出所有符合规则的HTML文件，再通过NodeJS的fs模块的readFileSync函数读取这些HTML文件得到内容C，使用NodeJS的svelte模块将C解析为抽象语法树AST，遍历AST每个子节点SAST并对其做单独处理，找出SAST中所有type为Attribute且name为class的节点并提取其value的data值，标记为S，解析S从中提取出所有由M演化出来的类名，将这些类名根据M生成对应CSS属性及其值，再将这些CSS属性组成一个完整的CSS规则X，此时S可能在全局中存在相同的情况，因此封装一个随机生成固定长度字符串的函数代替S，标记为H，将H指向X，当遍历整个AST完毕就可得到整个文件的由H指向X的对象，以该对象生成一个CSS文件(该文件对应目标HTML文件)，遍历所有HTML文件就能生成对应CSS文件，在生产阶段通过指定规则处理它们的对应关系即可。

由上可知，本申请实施例在开发阶段无需编写CSS文件，CSS文件其实是以原类的形式存放在HTML文件中，在构建阶段通过预设规则将这些原类编译为CSS文件并重新链接到该HTML文件中，而该HTML文件中的原类也被模糊化处理，无法被入侵破解或识别。在开发阶段简化处理CSS的流程与编辑，通过更短更简单的规则完成CSS样式的注入，使得开发人员无需花大量时间维护CSS代码。相比常规CSS编写更便利，开发人员可自行制定规则与解析方案，随时能做到任意方向的整合。另外原类在上述表达中只指明一个CSS属性及其值，做个扩展还能让一个原类指明多个CSS属性及其值，使得原类包括更多CSS样式效果。

为了更好地实施以上方法，本申请实施例还提供一种层叠样式表的生成装置，该层叠样式表的生成装置具体可以集成在电子设备中，该电子设备可以为终端、服务器等设备。其中，终端可以为手机、平板电脑、智能蓝牙设备、笔记本电脑、个人电脑等设备；服务器可以是单一服务器，也可以是由多个服务器组成的服务器集群。

比如，在本实施例中，将以层叠样式表的生成装置具体集成在服务器为例，对本申请实施例的方法进行详细说明。

例如，如图3所示，该层叠样式表的生成装置可以包括获取单元310、确定单元320以及生成单元330，如下：

(一)获取单元310

用于获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，样式类名为超文本标记语言文件中指向层叠样式表的类名，样式属性为层叠样式表的属性。

在一些实施方式中，获取单元310还可以用于：

获取样式属性的初始属性名称；

从初始属性名称中提取部分字段，得到目标属性名称；

(二)确定单元320

用于根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名。

在一些实施方式中，确定单元320具体可以用于：

遍历抽象语法树，确定类名属性节点；

在一些实施方式中，确定单元320还可以用于：

按照遍历抽象语法树的顺序，将目标样式类名组成类名集合。

(三)生成单元330

用于根据映射关系，由目标样式类名生成目标对象，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识。

在一些实施方式中，生成单元330具体可以用于：

根据映射关系，获取目标样式类名对应的目标样式属性；

在一些实施方式中，述指向目标样式类名的标识为随机字符串。

生成单元330，还用于根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。

在一些实施方式中，生成单元330具体可以用于：

在一些实施方式中，目标对象包括对应目标样式类名的基础类型字段，根据目标对象，将待处理超文本标记语言文件中的目标样式类名替换为标识，得到目标超文本标记语言文件，包括：

若检测到目标字段，将目标字段替换为标识，得到目标超文本标记语言文件。

在一些实施方式中，根据对象以及目标超文本标记语言文件，生成目标层叠样式表，包括：

从目标对象中，提取标识以及与标识对应的目标样式属性；

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。

由此，本申请实施例可以通过将目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以生成基于待处理超文本标记语言文件格式的目标层叠样式表。以此，开发时仅需编写待处理超文本标记语言文件，即可以通过该替换操作生成相应的目标层叠样式表，以提升开发效率。

相应的，本申请实施例还提供一种计算机设备，该计算机设备可以为终端或服务器，该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机、个人数字助理(Personal Digital Assistant，PDA)等终端设备。

如图4所示，图4为本申请实施例提供的计算机设备的结构示意图，该计算机设备400包括有一个或者一个以上处理核心的处理器410、有一个或一个以上计算机可读存储介质的存储器420及存储在存储器420上并可在处理器上运行的计算机程序。其中，处理器410与存储器420电性连接。本领域技术人员可以理解，图中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

处理器410是计算机设备400的控制中心，利用各种接口和线路连接整个计算机设备400的各个部分，通过运行或加载存储在存储器420内的软件程序和/或模块，以及调用存储在存储器420内的数据，执行计算机设备400的各种功能和处理数据，从而对计算机设备400进行整体监控。

在本申请实施例中，计算机设备400中的处理器410会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器420中，并由处理器410来运行存储在存储器420中的应用程序，从而实现各种功能：

获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，样式类名为超文本标记语言文件中指向层叠样式表的类名，样式属性为层叠样式表的属性；根据待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；根据映射关系，由目标样式类名生成目标对象，目标对象携带有目标样式类名对应的目标样式属性、以及指向目标样式类名的标识；根据目标对象，将目标样式类名替换为标识，以生成目标层叠样式表。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

可选的，如图4所示，计算机设备400还包括：触控显示屏430、射频电路440、音频电路450、输入单元460以及电源470。其中，处理器410分别与触控显示屏430、射频电路440、音频电路450、输入单元460以及电源470电性连接。本领域技术人员可以理解，图4中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

触控显示屏430可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏430可以包括显示面板和触控面板。其中，显示面板可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-EmittingDiode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并生成相应的操作指令，且操作指令执行对应程序。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器410，并能接收处理器410发来的命令并加以执行。触控面板可覆盖显示面板，当触控面板检测到在其上或附近的触摸操作后，传送给处理器410以确定触摸事件的类型，随后处理器410根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中，可以将触控面板与显示面板集成到触控显示屏430而实现输入和输出功能。但是在某些实施例中，触控面板与显示面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏430也可以作为输入单元460的一部分实现输入功能。

射频电路440可用于收发射频信号，以通过无线通信与网络设备或其他计算机设备建立无线通讯，与网络设备或其他计算机设备之间收发信号。

音频电路450可以用于通过扬声器、传声器提供用户与计算机设备之间的音频接口。音频电路450可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路450接收后转换为音频数据，再将音频数据输出处理器410处理后，经射频电路440以发送给比如另一计算机设备，或者将音频数据输出至存储器420以便进一步处理。音频电路450还可能包括耳塞插孔，以提供外设耳机与计算机设备的通信。

输入单元460可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

电源470用于给计算机设备400的各个部件供电。可选的，电源470可以通过电源管理系统与处理器410逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源470还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管图4中未示出，计算机设备400还可以包括摄像头、传感器、无线保真模块、蓝牙模块等，在此不再赘述。

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

由上可知，本实施例提供的计算机设备可以通过将目标样式类名替换为目标对象携带的、指向目标样式类名的标识，可以生成基于待处理超文本标记语言文件格式的目标层叠样式表。以此，开发时仅需编写待处理超文本标记语言文件，即可以通过该替换操作生成相应的目标层叠样式表，以提升开发效率。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行本申请实施例所提供的任一种层叠样式表的生成方法中的步骤。例如，该计算机程序可以执行如下步骤：

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的计算机程序，可以执行本申请实施例所提供的任一种层叠样式表的生成方法中的步骤，因此，可以实现本申请实施例所提供的任一种层叠样式表的生成方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种层叠样式表的生成方法、装置、计算机设备和存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

1.一种层叠样式表的生成方法，其特征在于，包括：

获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，所述样式类名为超文本标记语言文件中指向层叠样式表的类名，所述样式属性为层叠样式表的属性；

根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；

根据所述映射关系，由所述目标样式类名生成目标对象，所述目标对象携带有所述目标样式类名对应的目标样式属性、以及指向所述目标样式类名的标识；

根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表。

2.如权利要求1所述的层叠样式表的生成方法，其特征在于，所述获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件之前，还包括：

获取所述样式属性的初始属性名称；

从所述初始属性名称中提取部分字段，得到目标属性名称；

根据所述目标属性名称以及所述样式类名，创建所述样式类名与样式属性的映射关系。

3.如权利要求1所述的层叠样式表的生成方法，其特征在于，所述根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名，包括：

根据所述待处理超文本标记语言文件的文本内容，生成抽象语法树；

遍历所述抽象语法树，确定类名属性节点；

将所述类名属性节点的节点值对应的样式类名，确定为目标样式类名。

4.如权利要求3所述的层叠样式表的生成方法，其特征在于，所述根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名之后，还包括：

按照遍历所述抽象语法树的顺序，将所述目标样式类名组成类名集合。

5.如权利要求1所述的层叠样式表的生成方法，其特征在于，所述根据所述映射关系，由所述目标样式类名生成目标对象，包括：

根据映射关系，获取所述目标样式类名对应的目标样式属性；

将所述目标样式类名、以及所述目标样式类名对应的所述目标样式属性进行组合，生成初始对象；

将所述初始对象中的所述目标样式类名转换为指向所述目标样式类名的标识，得到目标对象。

6.如权利要求4所述的层叠样式表的生成方法，其特征在于，所述指向所述目标样式类名的标识为随机字符串。

7.如权利要求1所述的层叠样式表的生成方法，其特征在于，所述根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表，包括：

根据所述目标对象，将所述待处理超文本标记语言文件中的所述目标样式类名替换为所述标识，得到目标超文本标记语言文件；

根据所述目标对象以及所述目标超文本标记语言文件，生成目标层叠样式表。

8.如权利要求7所述的层叠样式表的生成方法，其特征在于，所述目标对象包括对应所述目标样式类名的基础类型字段，所述根据所述目标对象，将所述待处理超文本标记语言文件中的所述目标样式类名替换为所述标识，得到目标超文本标记语言文件，包括：

根据所述目标对象，在所述待处理超文本标记语言文件中检测与所述基础类型字段匹配的目标字段；

若检测到所述目标字段，将所述目标字段替换为所述标识，得到目标超文本标记语言文件。

9.如权利要求7所述的层叠样式表的生成方法，其特征在于，所述根据所述对象以及所述目标超文本标记语言文件，生成目标层叠样式表，包括：

从所述目标对象中，提取所述标识以及与所述标识对应的所述目标样式属性；

将所述标识以及与所述标识对应的所述目标样式属性进行组合，生成目标映射关系；

将所述目标映射关系与所述目标超文本标记语言文件进行关联，得到目标层叠样式表。

10.一种层叠样式表的生成装置，其特征在于，包括：

获取单元，用于获取样式类名与样式属性的映射关系、以及待处理超文本标记语言文件，所述样式类名为超文本标记语言文件中指向层叠样式表的类名，所述样式属性为层叠样式表的属性；

确定单元，用于根据所述待处理超文本标记语言文件的类名属性节点的节点值，确定目标样式类名；

生成单元，用于根据所述映射关系，由所述目标样式类名生成目标对象，所述目标对象携带有所述目标样式类名对应的目标样式属性、以及指向所述目标样式类名的标识；

生成单元，还用于根据所述目标对象，将所述目标样式类名替换为所述标识，以生成目标层叠样式表。

11.一种计算机设备，其特征在于，包括处理器和存储器，所述存储器存储有多条指令；所述处理器从所述存储器中加载指令，以执行如权利要求1～9任一项所述的层叠样式表的生成方法中的步骤。

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1～9任一项所述的层叠样式表的生成方法中的步骤。