Methods, apparatus, computer equipment, and storage media for generating cascading style sheets.

Abstract

This application discloses a method, apparatus, computer device, and storage medium for generating cascading style sheets (CSS). The embodiments of this application obtain the mapping relationship between style class names and style attributes, and the Hypertext Markup Language (HTML) file to be processed. Based on the node values ​​of the class name attribute nodes in the HTML file, a target style class name is determined. According to the mapping relationship, a target object is generated from the target style class name. The target object carries the target style attribute corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate the target CSS. In this application embodiment, by replacing the target style class name with the identifier carried by the target object pointing to the target style class name, a target CSS based on the HTML file format to be processed can be generated, thereby improving development efficiency.

Description

Technical Field

[0001] This application relates to the field of computer technology, and specifically to methods, apparatus, computer devices, and storage media for generating cascading style sheets. Background Technology

[0002] CSS (Cascading Style Sheets) is a programming language used to style HTML (Hypertext Markup Language) or XML (Extensible Markup Language). It is mainly used in the styling of web pages on the Internet. It can not only statically modify web pages, but also dynamically modify web pages in conjunction with JavaScript.

[0003] In existing technologies, as time goes by and requirements iterate, web page content will increase, which means that the Cascading Style Sheets (CSS) code for rendering web page styles becomes very cumbersome. Developers need to spend a lot of time and effort writing CSS, which is inefficient. Summary of the Invention

[0004] This application provides a method, apparatus, computer device, and storage medium for generating cascading style sheets, which can improve the efficiency of generating cascading style sheets.

[0005] This application provides a method for generating cascading style sheets, including: obtaining a mapping relationship between style class names and style attributes, and a Hypertext Markup Language (HTML) file to be processed, wherein the style class name is the class name pointing to the cascading style sheet in the HTML file, and the style attribute is an attribute of the cascading style sheet; determining a target style class name based on the node value of the class name attribute node in the HTML file to be processed; generating a target object from the target style class name according to the mapping relationship, wherein the target object carries a target style attribute corresponding to the target style class name and an identifier pointing to the target style class name; and replacing the target style class name with the identifier based on the target object to generate a target cascading style sheet.

[0006] This application embodiment also provides a cascading style sheet generation apparatus, comprising: an acquisition unit, configured to acquire a mapping relationship between style class names and style attributes, and a Hypertext Markup Language (HTML) file to be processed, wherein the style class name is a class name in the HTML file that points to the cascading style sheet, and the style attribute is an attribute of the cascading style sheet; a determination unit, configured to determine a target style class name based on the node value of the class name attribute node in the HTML file to be processed; a generation unit, configured to generate a target object from the target style class name according to the mapping relationship, wherein the target object carries a target style attribute corresponding to the target style class name and an identifier pointing to the target style class name; the generation unit is further configured to replace the target style class name with the identifier based on the target object to generate a target cascading style sheet.

[0007] This application also provides a computer device, including a processor and a memory, wherein the memory stores a plurality of instructions; the processor loads instructions from the memory to execute the steps in any of the cascading style sheet generation methods provided in this application.

[0008] This application also provides a computer-readable storage medium storing a plurality of instructions adapted for loading by a processor to execute steps in any of the cascading style sheet generation methods provided in this application.

[0009] This application embodiment can obtain the mapping relationship between style class names and style attributes, and the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name pointing to the Cascading Style Sheets (CSS) in the HTML file, and the style attribute is the attribute of the CSS. Based on the node value of the class name attribute node in the HTML file to be processed, the target style class name is determined. Based on the mapping relationship, a target object is generated from the target style class name. The target object carries the target style attribute corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate the target CSS.

[0010] In this application, by replacing the target style class name with an identifier carried by the target object that points to the target style class name, a target cascading style sheet based on the Hypertext Markup Language (HTML) file format to be processed can be generated. Therefore, during development, only the HTML file to be processed needs to be written, and the corresponding target cascading style sheet can be generated through this replacement operation, thereby improving development efficiency.

[0011] Furthermore, by replacing the target style class name in the hypertext markup language file to be processed with the identifier carried by the target object that points to the target style class name, an association can be established between the identifier in the replaced hypertext markup language file and the target style attribute carried by the target object. By adjusting this association, the style attribute corresponding to the hypertext markup language file to be processed can be freely adjusted, so as to quickly modify the webpage style and improve the efficiency of webpage style modification. Attached Figure Description

[0012] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1aThis is a schematic diagram illustrating a scenario of the method for generating cascading style sheets provided in an embodiment of this application.

[0014] Figure 1b This is a flowchart illustrating the method for generating cascading style sheets provided in an embodiment of this application;

[0015] Figure 1c This is a schematic diagram of the abstract syntax tree provided in the embodiments of this application;

[0016] Figure 1d This is a schematic diagram of the target object provided in the embodiments of this application;

[0017] Figure 1e This is a schematic diagram of the target cascading style sheet provided in an embodiment of this application;

[0018] Figure 2 This is a flowchart illustrating a method for generating cascading style sheets according to another embodiment of this application;

[0019] Figure 3 This is a schematic diagram of the structure of the cascading style sheet generation device provided in the embodiments of this application;

[0020] Figure 4 This is a schematic diagram of the structure of the computer device provided in the embodiments of this application. Detailed Implementation

[0021] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0022] Before providing a detailed explanation of the embodiments of this application, some terms involved in the embodiments of this application will be explained.

[0023] Before providing a detailed explanation of the embodiments of this application, some terms involved in the embodiments of this application will be explained.

[0024] Hypertext Markup Language (HTML) is a markup language that includes a series of tags. These tags unify the format of documents on the web, connecting scattered Internet resources into a logical whole. An HTML file can refer to descriptive text composed of HTML commands, which can specify text, graphics, animations, sounds, tables, links, etc.

[0025] Cascading Style Sheets (CSS) refers to a computer language used to style HTML (Hypertext Markup Language) or XML (Extensible Markup Language) documents. CSS can not only statically format web pages, but also dynamically format various elements of a web page in conjunction with various scripting languages. CSS provides a style description for HTML markup language, defining how elements within it are displayed.

[0026] This application provides a method, apparatus, computer device, and storage medium for generating cascading style sheets.

[0027] Specifically, the device for generating the cascading style sheet can be integrated into an electronic device, such as a terminal or server. The terminal can be a mobile phone, tablet, smart Bluetooth device, laptop, or personal computer (PC); the server can be a single server or a server cluster consisting of multiple servers.

[0028] In some embodiments, the cascading style sheet generation apparatus may also be integrated into multiple electronic devices. For example, the cascading style sheet generation apparatus may be integrated into multiple servers, and the cascading style sheet generation method of this application may be implemented by multiple servers.

[0029] In some embodiments, the server may also be implemented as a terminal.

[0030] For example, refer to Figure 1a In some embodiments, a scenario diagram of a cascading style sheet (CSS) generation system is provided, which can implement a method for generating CSS. This CSS generation system may include a terminal 1000, a server 2000, and a network 3000, and the terminal and server can interact with each other via the network.

[0031] The server is used to obtain the mapping relationship between style class names and style attributes, as well as the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name in the HTML file that points to the Cascading Style Sheets (CSS), and the style attributes are the attributes of the CSS. Based on the node value of the class name attribute node in the HTML file to be processed, the target style class name is determined. According to the mapping relationship, a target object is generated from the target style class name. The target object carries the target style attribute corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate the target CSS.

[0032] The terminal is used to obtain the target cascading style sheet from the server and generate a webpage based on the target cascading style sheet.

[0033] The following sections provide detailed descriptions of each example. It should be noted that the order of the following embodiments is not intended to limit the preferred order of the embodiments.

[0034] In this embodiment, a method for generating cascading style sheets is provided, such as... Figure 1b As shown, the specific process of generating this cascading style sheet can be described as follows:

[0035] 110. Obtain the mapping relationship between style class names and style attributes, as well as the hypertext markup language file to be processed.

[0036] In this context, the style class name is the class name that points to the Cascading Style Sheet in the Hypertext Markup Language file, and the style properties are the properties of the Cascading Style Sheet.

[0037] In HTML (Hypertext Markup Language) files, there are many tags (elements). An element refers to all the code from the start tag to the end tag. `class` is an attribute in HTML tags used to define the class name of an element. The `class` attribute can be used to specify the style class name of an element; typically, it can be used to point to a class in a stylesheet.

[0038] Optionally, the style class name can be the original class. The original class can refer to the smallest unit of class name in the HTML file. For example, the style class name can be the class name for fs-50 and c-f66 carried by the h1 tag, and the class name for mt-20, fs-20, and c-666 carried by the p tag.

[0039] Style properties refer to CSS properties, which specify the properties of a selector, such as font, color, and text properties. For example, style properties can include font-size, font-weight, line-height, margin, padding, and border. Furthermore, style properties can have corresponding values, which can be legal values ​​or common numerical values ​​with units, such as 25px (25 pixels) or color values.

[0040] For example, a mapping relationship can be pre-established between all commonly used style class names in the HTML file and all commonly used style properties in the Cascading Style Sheets, so that each smallest unit of class name in the HTML file can correspond to a CSS property and its value.

[0041] Optionally, since CSS property values ​​are widely defined, to reduce the amount of data required for establishing mapping relationships and improve efficiency, mapping relationships can be established separately for the style properties corresponding to class names and their values. For example, taking the style class name fs-50, it cannot be predefined as font-size:50px. Instead, by analyzing the composition of fs-50, where fs on the left corresponds to the CSS property name font-size and 50 on the right corresponds to the property value 50px, these can be dynamically concatenated during parsing. This allows for parsing using a single dictionary, reducing the amount of data required for mapping relationships and improving efficiency.

[0042] Optionally, to facilitate reading in subsequent steps, before step 110, the mapping relationship between style class names and style properties can be encapsulated into an object and saved as a JSON file. This JSON file will be read in real time in subsequent steps to parse CSS properties.

[0043] Optionally, to facilitate parsing the mapping relationship between style class names and style properties from the encapsulated object, the following parsing rules can be set before step 110: 10 in fs-10 is parsed as 10px, fs-10e as 10em, fs-10r as 10rem, and fs-10p as 10%. For properties like margin, padding, border, and background, whose values ​​are strings separated by spaces, such as border:1px solid#3c9, underscores (_) are used to represent spaces in HTML, for example, b-1_solid_3c9. Of course, more parsing rules can be defined based on the characteristics of CSS properties. This parsing mechanism can be encapsulated into the FormatValue function for subsequent steps.

[0044] The `Format` function is a member function that converts data of any type into a string through formatting operations. In practical applications, different `Format` functions, such as `FormatFile` and `FormatValue`, can be written based on actual needs.

[0045] In some implementations, style attribute names can be abbreviated to establish a mapping between style class names and style attributes, enabling the creation of more concise and readable cascading style sheets and improving the efficiency of writing cascading style sheets. Specifically, before obtaining the mapping between style class names and style attributes, and the hypertext markup language file to be processed, the following steps are also included:

[0046] Get the initial property name of the style property;

[0047] Extract some fields from the initial attribute name to obtain the target attribute name;

[0048] Create a mapping relationship between style class names and style properties based on the target property name and style class name.

[0049] The initial property name can refer to the original name of the CSS property, such as font-size, font-weight, line-height, margin, padding, border, etc.

[0050] You can abbreviate the original names of CSS properties to obtain the corresponding target property names. For example, you can extract the first letter as the target property name, such as abbreviating margin to m, margin-left (left margin) to ml, margin-right (right margin) to mr, margin-top (top margin) to mt, margin-bottom (bottom margin) to mb, padding to p, padding-left (left inner margin) to pl, padding-right (right inner margin) to pr, padding-top (top inner margin) to pt, padding-bottom (bottom inner margin) to pb, font-size to fs, and color (text color) to c, etc. For example, taking the style class name fs-50 as an example, you can establish a mapping relationship between fs-50 and its corresponding target property name fs and property value 50px.

[0051] Optionally, the target property name corresponding to the initial property name can be determined by random characters. For example, "aaa" can represent margin, "bbb" can represent padding, and "ccc" can represent border. The corresponding forms are aaa-10, bbb-20, and ccc-1_solid_3c9, which represent margin: 10px, padding: 20px, and border: 1px solid#3c9, respectively. If multiple "aaa-10" appear, the last one will be used, and the previous ones will be deleted.

[0052] 120. Determine the target style class name based on the node value of the class name attribute node of the hypertext markup language file to be processed.

[0053] In this context, a class name attribute node can refer to an attribute node whose name is "class". For example, if the hypertext markup language file to be processed is represented in the form of an abstract syntax tree, then a class name attribute node can refer to a node in that abstract syntax tree where type is "attribute" and name is "class". The node value can refer to the value of the node.

[0054] The target style class name can refer to the style class name in the hypertext markup language file to be processed.

[0055] For example, you can get the node type of all nodes through the nodeType (node ​​type) property of the Node object, then get the node name of all nodes with the attribute as the node type through the nodeName (node ​​name) property, and finally get the node value of the node whose node name is the class through the nodeValue (node ​​attribute) property. By parsing the obtained node values, you can determine the style class name corresponding to each node value, and use this as the target style class name.

[0056] In some implementations, the Hypertext Markup Language (HTML) file to be processed can be converted into an abstract syntax tree (AST) to quickly and accurately locate class name attribute nodes. Specifically, the target style class name is determined based on the node values ​​of the class name attribute nodes in the HTML file to be processed, including:

[0057] Generate an abstract syntax tree based on the text content of the Hypertext Markup Language file to be processed;

[0058] Traverse the abstract syntax tree to determine the class name attribute node;

[0059] The style class name corresponding to the node value of the class name attribute node is determined as the target style class name.

[0060] The text content of the Hypertext Markup Language (HTML) file to be processed may include the code of the HTML file.

[0061] An Abstract Syntax Tree (AST) is an abstract syntax tree obtained by parsing the code of a Hypertext Markup Language (HTML) file. It's a tree-like representation of the abstract syntactic structure of the HTML file, with each node representing a structure within the file. For example, Asttokens can be used to convert string objects into nodes on an AST. The AST provides node class definitions, utility functions, and classes, including functions for traversing and modifying the AST. Asttokens can be used to analyze and process HTML files. Asttokens is a tool for maintaining text and tokenized forms, and for tagging AST nodes with tokenization information.

[0062] Optionally, an attribute node can refer to an attribute node on the abstract syntax tree (AST), which is a type of node on the AST. A class name attribute node can refer to a node on the AST where type is attribute and name is class.

[0063] For example, the `readFileSync` function can be used to read the contents of a Hypertext Markup Language (HTML) file, parse the code of the file content into an Abstract Syntax Tree (AST), and traverse each child node of the AST. During the traversal, the node type and node name of all nodes are obtained through `nodeType` and `nodeName`, such as... Figure 1c As shown, by obtaining the node type "type:"Attribute" and node name "name:"class" corresponding to the class in the abstract syntax tree on the left side of the diagram, and based on the obtained node type and node name, the class name attribute node is determined from all nodes. Then, the node value of the class name attribute node is extracted, and the style class name corresponding to the class name attribute node is determined by parsing the node value. The node value of the class name attribute node can be the value of the data child node under the value child node of that node. For example... Figure 1c As shown, the code snippet on the right side of the diagram is a concrete representation of a node in the abstract syntax tree on the left. Figure 1c The value child node of the class name attribute node can include multiple child nodes such as start, end, type, raw, and data. The value of the data child node, "mt-20fs-20c-666", can be used as the target style class name.

[0064] Optionally, the hypertext markup language file to be processed may include multiple sub-files. These multiple sub-files can be traversed, and for each sub-file, the following steps are performed: generating an abstract syntax tree based on the text content of the hypertext markup language file to be processed; traversing the abstract syntax tree to determine the class name attribute node; and determining the style class name corresponding to the node value of the class name attribute node as the target style class name.

[0065] In some implementations, the target style class names can be combined into a set of class names according to the order of traversing the syntax tree. This facilitates the sequential invocation of target style class names in subsequent steps. Furthermore, the target object is generated from this set of class names, ensuring that the target style attributes and identifiers pointing to the target style class names in the target object are arranged in the order of traversing the abstract syntax tree. This improves the accuracy and efficiency of replacing target style class names with identifiers. Specifically, after determining the target style class name based on the node value of the class name attribute node in the Hypertext Markup Language file to be processed, the process further includes:

[0066] The class name set is composed of the target style class names, following the order of traversing the abstract syntax tree.

[0067] The class name set can refer to a collection of target style class names. This class name set can be an ordered data structure, such as an array or a queue.

[0068] For example, if target style class names such as fs-50, c-f66, mt-20, fs-20, and c-666 are determined in sequence during the traversal of the abstract syntax tree, then these target style class names can be combined into a set of class names [fs-50, c-f66, mt-20, fs-20, c-666].

[0069] Optionally, to facilitate the extraction of any target style class name from the class name set, the class name set can be in array form. If the class name set is in array form, then the class name set can also be called a class name array.

[0070] For example, a class name array can include multiple subsets. The target style class name can be considered as the text value of these subsets, and each subset corresponds to an HTML tag. Subsets can be grouped into categories based on their corresponding HTML tags. For instance, the subset of the div tag is main, the subsets of the h1 tag are fs-50 and c-f66, and the subsets of the p tag are mt-20, fs-20, and c-666. These subsets are arranged into an array structure ["main", "fs-50c-f66", "mt-20, fs-20c-666"] according to the order of the abstract syntax tree scan. The subsets within the quotation marks represent subsets corresponding to the same HTML tag.

[0071] Optionally, the collection of class names can be stored as a `classes` variable (a variable of the class) for later use. For example, by using `const classes = sat.map(v => v.value.data)`, after traversing the abstract syntax tree in order, the style class names of all class name attribute nodes can be extracted to obtain the `classes` variable.

[0072] 130. Based on the mapping relationship, generate the target object from the target style class name.

[0073] The target object carries the target style attribute corresponding to the target style class name, as well as an identifier pointing to the target style class name. The target object can refer to an object derived from the target style class name. For example, in object-oriented programming, a computer program can be viewed as a collection of objects, where each object can contain data and functions that manipulate that data.

[0074] The identifier pointing to the target style class name can refer to an identifier that can be used to represent the target style class name. For example, an identifier with a preset mapping relationship to the target style class name can be obtained as the identifier pointing to the target style class name, or the target style class name can be abbreviated, or an identifier pointing to the target style class name can be randomly generated.

[0075] For example, the collection of class names containing the target style class name can be converted into the target object of the entity, so as to convert the basic type into a referenceable object, which is convenient for subsequent steps to call.

[0076] Optionally, the target object can be a CSS syntax rule.

[0077] CSS syntax rules refer to the rules for applying styles to elements of a specified type. For example, a CSS syntax rule can consist of two basic parts: a selector and a declaration block. The selector determines which elements to apply styles to; the declaration block defines the corresponding styles. It is enclosed in a pair of curly braces and consists of one or more declarations, each of which consists of a property and a value, separated by a colon.

[0078] In some implementations, a target object can be generated from an identifier pointing to the same target style class name and a target style attribute. This allows for quick retrieval of the identifier and target object corresponding to the same target style class name based on the target object, improving processing efficiency. Specifically, generating a target object from the target style class name according to the mapping relationship includes:

[0079] Based on the mapping relationship, obtain the target style attribute corresponding to the target style class name;

[0080] Combine the target style class name and the target style property corresponding to the target style class name to generate the initial object;

[0081] The target style type in the initial object is converted into an identifier pointing to the target style class name to obtain the target object.

[0082] Among them, the target style attribute can refer to the style attribute corresponding to the target style class name.

[0083] For example, the target style class name can be extracted by parsing the node value of the class name attribute node. Based on the mapping relationship, the CSS property name and its value corresponding to each target style class name are obtained. A selector A is generated for each target style class name to indicate the element to be selected by the rule. A CSS property name and its value corresponding to each target style class name are treated as a declaration B. All declarations corresponding to each target style class name are enclosed in {} to form a declaration block. Finally, the rule A{B} corresponding to each target style class name is obtained, where A represents the selector corresponding to any target style class name, B represents the declaration corresponding to that target style class name, and {B} represents the declaration block composed of the declarations corresponding to that target style class name. All the rules corresponding to the target style class names can then form the initial CSS syntax rules (initial object). Finally, the target style class names (selectors) in the obtained initial CSS syntax rules are converted into random strings (identifiers) to obtain the CSS syntax rules.

[0084] Optionally, an identifier pointing to the target style class name can be generated first, and then combined to obtain the target object. Specifically, based on the mapping relationship, the target object is generated from the target style class name, including:

[0085] Based on the mapping relationship, obtain the target style attribute corresponding to the target style class name;

[0086] Generate an identifier pointing to the target style class name;

[0087] The identifier and the target style attribute corresponding to the same target style class name are combined to generate a target object.

[0088] Optionally, the identifiers of the target style class names corresponding to the same HTML tag can be the same. In this way, the style attributes of the same HTML tag can be obtained at once, improving the processing efficiency of the style of the same HTML tag.

[0089] Optionally, declarations corresponding to the target style class names of the same HTML tag can be grouped into a declaration block. For example, taking the h1 tag corresponding to fs-50 and c-f66 as an example, i8qrc9kvhw can be used as an identifier pointing to fs-50 and c-f66, and rules corresponding to the h1 tag can be generated:

[0090] “i8qrc9kvhw”:

[0091] {"primitives":"fs-50c-f66",

[0092] “rules”:[

[0093] "font-size:50px",

[0094] "color:#f666" ]

[0096] }, where {} represents a declaration block, and primitives can be used to store the target style class name for easy retrieval of the corresponding field in the HTML file.

[0097] Optionally, the identifier pointing to the target style class name is a selector.

[0098] Optionally, if the target style class names form an array of class names, the array of class names can be split into multiple target style class names arranged in the order of traversing the abstract syntax tree, and then step 130 can be executed.

[0099] Alternatively, the target style class names can be extracted sequentially according to the order of multiple target style class names in the array, and for each extracted target style class name, the steps can be performed to obtain the target style attribute corresponding to the target style class name based on the mapping relationship, and the steps can generate an identifier pointing to the target style class name. Then, the identifiers and target style attributes corresponding to the same target style class name can be combined to generate a target object.

[0100] For example, the mechanism used to compose CSS syntax rules from CSS property names and their values ​​of target style class names can be encapsulated into the `FormatFile` function. This function calls the `classes` variable corresponding to the set of class names, such as `const fileContent = FormatFile(classes)`, converting the `classes` variable into the entity's CSS syntax rules. For instance, using `["main", "fs-50c-f66", "mt-20, fs-20c-666"]`, we can first obtain the set of class names corresponding to each HTML tag (i.e., the target style class names within the quotation marks), then split them based on spaces into `main`, `fs-50`, `c-f66`, `mt-20`, `fs-20`, and `c-666`, and further split each set of class names based on the hyphen (-) to obtain the corresponding target style properties, outputting something like... Figure 1d The attribute values ​​shown are then converted to the target style category as follows: Figure 1d The random string (identifier) ​​shown will be output as follows: Figure 1d The CSS syntax rule shown is as follows. In this CSS syntax rule, the target style class name corresponding to the same HTML tag is represented by the same identifier, such as... Figure 1d In the code, i8qrc9kvhw is the identifier corresponding to fs-50c-f66. Then, a rule is formed by the target style attributes corresponding to the same HTML tag. This allows for the quick replacement of the target style class name corresponding to the same HTML tag.

[0101] In some implementations, a random string can be used as the identifier to improve the efficiency of identifier generation. The identifier pointing to the target style class name is a random string.

[0102] For example, for each target style class name, a random string of a specified length can be used to replace the target style class name.

[0103] Alternatively, a random string of a certain length can be generated using the RandomId function. The RandomId function can be used to generate random floating-point numbers, integers, and strings.

[0104] 140. Based on the target object, replace the target style class name with the identifier to generate the target cascading style sheet.

[0105] The target cascading style sheet can refer to the style sheet associated with the hypertext markup language file to be processed.

[0106] For example, to improve the accuracy and efficiency of replacing target style class names with identifiers, we can traverse each node in the abstract syntax tree and determine whether the node is a class name attribute node. If it is, we can replace the target style class name corresponding to the class name attribute node with the corresponding identifier. After traversing the abstract syntax tree, we can simultaneously replace all target style class names and obtain the replaced abstract syntax tree, which can then be used to generate target cascading styles.

[0107] Understandably, by replacing the target style class name in the Hypertext Markup Language (HTML) file being processed, a CSS file based on the HTML structure of the HTML file can be generated. This simplifies the content of the final HTML file, reducing its size. Furthermore, by replacing the target style class name with an identifier, the target style class name in the HTML file is obfuscated, improving the data security of the HTML file.

[0108] In some implementations, the target style class name is replaced with an identifier based on the target object to generate the target cascading style sheet, including:

[0109] Based on the target object, replace the target style class name in the hypertext markup language file to be processed with the identifier to obtain the target hypertext markup language file;

[0110] Generate the target cascading style sheet based on the target object and the target hypertext markup language file.

[0111] For example, based on the association between the target style class name and the target style property carried by the target object, as well as the identifier pointing to the target style class name, the target style property can be associated with the identifier in the target hypertext markup language file, so that the associated target style property is used as the target cascading style sheet. In this way, after writing the HTML file, a CSS file associated with the HTML file can be generated.

[0112] In some implementations, automatic replacement of target style class names can be achieved by detecting the basic type field corresponding to the target style class name in the hypertext markup language file to be processed and performing a replacement operation one by one. Specifically, the target object includes the basic type field corresponding to the target style class name. Based on the target object, the target style class name in the hypertext markup language file to be processed is replaced with an identifier to obtain the target hypertext markup language file, including:

[0113] Based on the target object, detect the target field that matches the basic type field in the hypertext markup language file to be processed;

[0114] If a target field that matches the basic type field is detected, the target field is replaced with the identifier to obtain the target hypertext markup language file.

[0115] The basic type field can refer to the primitive type field (Primitives field), which can be used to store the target style class name. For example, the basic type field in the target object can be represented as "primitives": "fs-50c-f66", where fs-50c-f66 is the basic type field.

[0116] For example, the `readFileSync` function can be used to read an HTML file and replace all fields that are identical to basic type fields with their corresponding identifiers. For instance, `main` can be replaced with `1n8co7svqi`, `fs-50c-f66` with `i8qrc9kvhw`, and `mt-20fs-20c-666` with `zrww29wsnq` to obtain the target HTML file.

[0117] In some implementations, target mapping relationships and Hypertext Markup Language (HTML) files can be associated to generate target cascading style sheets, thereby quickly generating cascading style sheets based on the HTML file structure. Specifically, generating a target cascading style sheet based on the target object and the target HTML file includes:

[0118] Extract the identifier and the corresponding target style attributes from the target object;

[0119] Combine the identifier and the target style attribute corresponding to the identifier to generate a target mapping relationship;

[0120] The target mapping relationship is associated with the target hypertext markup language file to obtain the target cascading style sheet.

[0121] The target mapping relationship can refer to the mapping relationship consisting of each identifier and the target style attribute corresponding to that identifier.

[0122] For example, you can extract each random string representing the target style class name from the target object, along with the corresponding `rules` field. This `rules` field includes the target style attributes corresponding to the target style class name. For instance, the `rules` field could be represented as "rule": ["font-size:50px", "color:#f666"], where the fields in [] are the target style attributes. These can be combined in the form of `rule{}` to generate a mapping relationship: `i8qrc9kvhw{font-size:50px;color:#f666;}`, where `i8qrc9kvhw` represents the random string representing the target style class name. The mapping relationships corresponding to all the random strings representing the target style class names form a CSS file (target mapping relationship) corresponding to the HTML file. Class names where `rules` is an empty array are skipped without any processing. This CSS file is then linked to the target HTML file as an external link to obtain the target CSS file (target cascading style sheet) linked to the target HTML file. Figure 1e As shown, the target CSS file can record the identifier (random string) pointing to the target style class name and the mapping relationship of the corresponding target style property. In this way, during development, only the HTML file needs to be written. A corresponding CSS file can be generated by constructing the mapping relationship and dynamically scanning and analyzing the HTML file, which can improve the efficiency of writing CSS files.

[0123] Optionally, the target mapping relationship is associated with the target Hypertext Markup Language file via an external link. An external link can refer to using `link` or `@import` to include a CSS file. A CSS file linked via an external link is a separate file that can be applied to multiple pages. When making changes, a specific area can be modified, allowing the style to be changed simultaneously across multiple pages. Compared to inline or page-level links, this eliminates the need to modify each page individually, improving development efficiency and performance.

[0124] The Cascading Style Sheets (CSS) generation scheme provided in this application can be applied to various scenarios. For example, taking web page creation as an example, the following steps are taken: First, the mapping relationship between style class names and style attributes is obtained, along with the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name pointing to the CSS in the HTML file, and the style attributes are the attributes of the CSS. Based on the node values ​​of the class name attribute nodes in the HTML file to be processed, the target style class name is determined. Then, based on the mapping relationship, a target object is generated from the target style class name. The target object carries the target style attributes corresponding to the target style class name and an identifier pointing to the target style class name. Finally, based on the target object, the target style class name is replaced with the identifier to generate the target CSS.

[0125] The solution provided in this application generates a target cascading style sheet based on the format of the Hypertext Markup Language (HTML) file to be processed by replacing the target style class name with an identifier carried by the target object that points to the target style class name. Therefore, during development, only the HTML file to be processed needs to be written, and the corresponding target cascading style sheet can be generated through this replacement operation, thus improving development efficiency.

[0126] Furthermore, by replacing the target style class name in the hypertext markup language file to be processed with the identifier carried by the target object that points to the target style class name, an association can be established between the identifier in the replaced hypertext markup language file and the target style attribute carried by the target object. By adjusting this association, the style attribute corresponding to the hypertext markup language file to be processed can be freely adjusted, so as to quickly modify the webpage style and improve the efficiency of webpage style modification.

[0127] Therefore, the cascading style sheet generation method of this application embodiment has a wide range of applications. Whether the development is based on design drawings or not, it can quickly build a cascading style sheet for a web page element by writing the target style class name. Unlike UI frameworks that require the introduction of heavy and cumbersome cascading style sheet support files, which need to be compiled before use, the compilation of the target style class name can be edited immediately after writing and saving, resulting in better real-time performance, simplification, and lightweight nature.

[0128] The method described in the above embodiments will be further described in detail below.

[0129] In this embodiment, the method of this application embodiment will be described in detail using an application to a design drawing development website as an example.

[0130] like Figure 2 As shown, the specific process of generating a cascading style sheet is as follows:

[0131] 210. Based on the initial property name of the style property and the style class name, create a mapping relationship between the style class name and the style property.

[0132] HTML tags can carry style classes. For example, the `h1` tag can carry the class names `fs-50` and `c-f66`, and the `p` tag can carry the class names `mt-20`, `fs-20`, and `c-666`. Because the values ​​are broadly defined, there's no need to explicitly define their corresponding values. Taking `fs-50` as an example, it cannot be pre-defined as `font-size: 50px`. Instead, by analyzing the components of `fs-50`, where `fs` on the left corresponds to `font-size` and `50` on the right corresponds to `50px`, these components are dynamically concatenated during parsing. This solves the problem of pre-defining atomic class names and their values ​​for CSS properties, allowing for parsing using a dictionary.

[0133] Therefore, these atomic class names (style class names) can be given a name called the original class. In this embodiment of the application, the original class represents the smallest unit of class name, corresponding to a CSS property and its value.

[0134] For example, you can specify the names of CSS properties (style properties) in the mapping relationship based on the abbreviation of CSS property names. For example, you can abbreviate margin to m, margin-left (left margin) to ml, margin-right (right margin) to mr, margin-top (top margin) to mt, margin-bottom (bottom margin) to mb, padding to p, padding-left (left inner margin) to pl, padding-right (right inner margin) to pr, padding-top (top inner margin) to pt, padding-bottom (bottom inner margin) to pb, font-size to fs, and color (text color) to c, etc.

[0135] For example, you can randomly assign CSS property names to the mapping relationship. For instance, `aaa` represents margin, `bbb` represents padding, and `ccc` represents border. The corresponding formats would be `aaa-10`, `bbb-20`, and `ccc-1_solid_3c9`, representing `margin: 10px`, `padding: 20px`, and `border: 1px solid#3c9`, respectively. If multiple `aaa-10` values ​​appear, the last one will be used, and the previous ones will be deleted.

[0136] In this embodiment, a mapping relationship between style class names and CSS property name abbreviations can be established as a CSS property mapping set M. All CSS properties in this CSS property mapping set M are included in an object and saved as a JSON file. This JSON file is read in real time in subsequent processing steps to parse the CSS properties. The following parsing rules are also defined:

[0137] The 10 in `fs-10` is interpreted as 10px, `fs-10e` as 10em, `fs-10r` as 10rem, and `fs-10p` as 10%. Properties like `margin`, `padding`, `border`, and `background` are consecutive strings of spaces, such as `border:1px solid#3c9`. In HTML, underscores `_` represent spaces, e.g., `b-1_solid_3c9`. Of course, more parsing rules can be defined based on the characteristics of CSS properties; this parsing mechanism is marked as BX.

[0138] 220. Obtain the hypertext markup language file to be processed and its mapping relationship.

[0139] For example, you can obtain the HTML structure written in the HTML file during the development phase and the original class (i.e., style class name) of each structure to obtain the HTML file to be processed.

[0140] 230. Generate an abstract syntax tree based on the text content of the Hypertext Markup Language file to be processed.

[0141] For example, you can use NodeJS's glob module to find all HTML files that match the rules, then use NodeJS's fs module's readFileSync function to read these HTML files to get the content C, and use NodeJS's svelte module to parse C into an abstract syntax tree (AST).

[0142] 240. Traverse the abstract syntax tree to determine the target style class name.

[0143] For example, we can traverse each child node SAST of the AST and process them individually, find all nodes in SAST with type "Attribute" and name "class" (class name attribute nodes), and extract their value's data value. This value is the text value of the original class set. We label the extracted data value as S, and parse S to extract all class names evolved from M. For example: Figure 1c As shown, the value of the data child node "mt-20fs-20c-666" can be used as the target style class name.

[0144] Specifically, the primitive class set for the `div` tag is `main`, the primitive class set for the `h1` tag is `fs-50` and `c-f66`, and the primitive class set for the `p` tag is `mt-20`, `fs-20`, and `c-666`. Therefore, these primitive class sets can be arranged into an array structure (an array of class names) according to the order of the abstract syntax tree scan, such as `["main", "fs-50c-f66", "mt-20, fs-20c-666"]`. This array structure can store the primitive class information of the HTML file to be processed in the form of a `classes` variable. Each HTML tag corresponds to a primitive class set (subset) in the array, and the target style class name can be regarded as the text value of these subsets.

[0145] 250. Based on the mapping relationship, combine the identifiers and target style attributes that correspond to the same target style class name to generate the target object.

[0146] For example, the target style class name can be used to generate corresponding CSS properties and their values ​​based on M, and then these CSS properties can be combined into a complete CSS rule X.

[0147] Specifically, an array of class names can be passed to the FormatFile function, which parses the rules of these original classes. After parsing, it generates corresponding CSS properties and their values, then combines these CSS properties into a complete CSS rule, and finally combines these CSS rules into a complete file content. The FormatFile function mainly uses M to convert the collection of original classes into CSS rules of entities.

[0148] Because the original class collection might be excessively long, leading to an overly complex and cumbersome final HTML structure, a random string of a specified length is used to replace the mapped class name when converting the original class collection. The function that generates this random string is encapsulated as `RandomId`. When processing CSS property values, the parsing mechanism marked as `BX` is used, encapsulated here as the `FormatValue` function. If a corresponding original class cannot be found in `M` during processing, the original class is considered invalid and processing is abandoned. Based on the above principles, the original classes in the HTML structure are ultimately processed into the following JavaScript objects (target objects), corresponding to the `fileContent` variable in the code. For example, the JavaScript object can be marked as `G`, and the file content of `G` is as follows: Figure 1d As shown.

[0149] Therefore, by following the steps above, we can determine which styles are used within the current HTML file, and these styles can all be reflected by G.

[0150] 260. Based on the target object, replace the target style class name in the hypertext markup language file to be processed with the identifier to obtain the target hypertext markup language file.

[0151] For example, you can use the `readFileSync` function of Node.js's `fs` module to read an HTML file, and then replace all the scanned class names with their corresponding class names in `G`. For instance, `main` corresponds to `1n8co7svqi`, `fs-50c-f66` to `i8qrc9kvhw`, and `mt-20fs-20c-666` to `zrww29wsnq`. Essentially, it detects the `primitives` field and replaces it with the corresponding class names in the HTML structure to obtain the target HTML file.

[0152] This simplifies the content of the target HTML file, reducing its size, and also obscures the source code, increasing the difficulty of cracking it. Of course, the original HTML structure remains unchanged; this process generates a new HTML file.

[0153] 270. Combine any identifier and the target style attribute corresponding to any identifier to generate a target mapping relationship.

[0154] For example, class G can be processed separately, extracting a random string of a specified length containing the class name and its corresponding rules field. These are then combined in the form of rules{} to generate a CSS file (target mapping) corresponding to the HTML file. Class names with empty rules arrays are skipped without any processing.

[0155] 280. Link the target mapping relationship to the target hypertext markup language file in the form of an external link to obtain the target cascading style sheet.

[0156] For example, class names in the CSS file can be mapped to class names in the target HTML file (identifiers represented by random strings). This CSS file can then be linked to the HTML file as an external link, using the linked CSS file as the target Cascading Style Sheet. The final result will look like... Figure 1e The CSS file shown. Figure 1e As shown, this CSS file can record the identifier (random string) pointing to the target style class name and the mapping relationship of the corresponding target style property.

[0157] Therefore, during development, only HTML files need to be written, while CSS files are generated dynamically during the build phase through scanning and analysis. By iterating through and processing all HTML files in the same way, a corresponding CSS file for each HTML file will be obtained.

[0158] In the development phase of this application embodiment, a simple and clear CSS property mapping set M is created based on the characteristics of CSS properties. When developing a website, the HTML structure of the webpage is written without writing CSS styles. After the HTML structure is completed, the rules of M are entered into the HTML structure. These rules can be written based on the style information obtained from the design drawings. During the build phase, the NodeJS glob module is used to find all HTML files that match the rules. Then, the readFileSync function of the NodeJS fs module is used to read these HTML files to obtain the content C. The NodeJS svelte module is used to parse C into an abstract syntax tree (AST). Each child node SAST of the AST is traversed and processed individually. All nodes in the SAST with type Attribute and name class are found and their data values ​​are extracted and marked as S. S is parsed to extract all class names evolved from M. These class names are used to generate corresponding CSS properties and their values ​​according to M. These CSS properties are then combined into a complete CSS rule X. Since S may have the same case globally, a function that randomly generates a fixed-length string is encapsulated to replace S and marked as H. H is set to point to X. When the entire AST is traversed, the object of H pointing to X of the entire file can be obtained. A CSS file (corresponding to the target HTML file) is generated from this object. Traversing all HTML files can generate the corresponding CSS file. In the production phase, their correspondence can be handled by specifying rules.

[0159] As can be seen from the above, this embodiment of the application eliminates the need to write CSS files during the development phase. The CSS files are actually stored in the HTML file as primitive classes. During the build phase, these primitive classes are compiled into CSS files using preset rules and relinked to the HTML file. The primitive classes in the HTML file are also obfuscated, making them impossible to hack, crack, or identify. This simplifies the CSS processing and editing process during development, injecting CSS styles through shorter and simpler rules, freeing developers from spending significant time maintaining CSS code. Compared to conventional CSS writing, it is more convenient, allowing developers to define their own rules and parsing schemes, enabling integration in any direction at any time. Furthermore, while the primitive class in the above expression only specifies one CSS property and its value, an extension could allow a primitive class to specify multiple CSS properties and their values, encompassing more CSS style effects.

[0160] To better implement the above methods, this application also provides a cascading style sheet (CSS) generation apparatus. This apparatus can be integrated into an electronic device, such as a terminal or server. The terminal can be a mobile phone, tablet computer, smart Bluetooth device, laptop computer, or personal computer; the server can be a single server or a server cluster consisting of multiple servers.

[0161] For example, in this embodiment, the method of this application embodiment will be described in detail by taking the cascading style sheet generation device as specifically integrated into the server.

[0162] For example, such as Figure 3 As shown, the apparatus for generating the cascading style sheet may include an acquisition unit 310, a determination unit 320, and a generation unit 330, as follows:

[0163] (I) Acquisition Unit 310

[0164] This is used to obtain the mapping relationship between style class names and style properties, as well as the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name in the HTML file that points to the Cascading Style Sheets (CSS), and the style properties are the properties of the CSS.

[0165] In some implementations, the acquisition unit 310 may also be used for:

[0166] Get the initial property name of the style property;

[0167] Extract some fields from the initial attribute name to obtain the target attribute name;

[0168] Create a mapping relationship between style class names and style properties based on the target property name and style class name.

[0169] (II) Determine Unit 320

[0170] Used to determine the target style class name based on the node value of the class name attribute node of the Hypertext Markup Language file to be processed.

[0171] In some implementations, the determining unit 320 may specifically be used for:

[0172] Generate an abstract syntax tree based on the text content of the Hypertext Markup Language file to be processed;

[0173] Traverse the abstract syntax tree to determine the class name attribute node;

[0174] The style class name corresponding to the node value of the class name attribute node is determined as the target style class name.

[0175] In some implementations, the determining unit 320 may also be used for:

[0176] The target style class names are grouped into a set of class names in the order of traversing the abstract syntax tree.

[0177] (III) Generation Unit 330

[0178] It is used to generate a target object from the target style class name according to the mapping relationship. The target object carries the target style attribute corresponding to the target style class name and an identifier pointing to the target style class name.

[0179] In some implementations, the generation unit 330 may specifically be used for:

[0180] Based on the mapping relationship, obtain the target style attribute corresponding to the target style class name;

[0181] Combine the target style class name and the target style property corresponding to the target style class name to generate the initial object;

[0182] The target style type in the initial object is converted into an identifier pointing to the target style class name to obtain the target object.

[0183] In some implementations, the identifier pointing to the target style class name is a random string.

[0184] The generation unit 330 is also used to replace the target style class name with an identifier based on the target object to generate the target cascading style sheet.

[0185] In some implementations, the generation unit 330 may specifically be used for:

[0186] Based on the target object, replace the target style class name in the hypertext markup language file to be processed with the identifier to obtain the target hypertext markup language file;

[0187] Generate the target cascading style sheet based on the target object and the target hypertext markup language file.

[0188] In some implementations, the target object includes a base type field corresponding to the target style class name. Based on the target object, the target style class name in the hypertext markup language file to be processed is replaced with an identifier to obtain the target hypertext markup language file, including:

[0189] Based on the target object, detect the target field that matches the basic type field in the hypertext markup language file to be processed;

[0190] If the target field is detected, replace the target field with the identifier to obtain the target hypertext markup language file.

[0191] In some implementations, a target cascading style sheet is generated based on the object and the target Hypertext Markup Language file, including:

[0192] Extract the identifier and the corresponding target style attributes from the target object;

[0193] Combine the identifier and the target style attribute corresponding to the identifier to generate a target mapping relationship;

[0194] The target mapping relationship is associated with the target hypertext markup language file to obtain the target cascading style sheet.

[0195] In practice, each of the above units can be implemented as an independent entity or can be arbitrarily combined to be implemented as the same or several entities. For the specific implementation of each of the above units, please refer to the previous method embodiments, which will not be repeated here.

[0196] Therefore, this embodiment of the application can generate a target cascading style sheet based on the Hypertext Markup Language (HTML) file format to be processed by replacing the target style class name with an identifier carried by the target object that points to the target style class name. Thus, during development, only the HTML file to be processed needs to be written, and the corresponding target cascading style sheet can be generated through this replacement operation, thereby improving development efficiency.

[0197] Accordingly, this application also provides a computer device, which can be a terminal or a server. The terminal can be a smartphone, tablet computer, laptop computer, touch screen, game console, personal computer, personal digital assistant (PDA) and other terminal devices.

[0198] like Figure 4 As shown, Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. The computer device 400 includes a processor 410 with one or more processing cores, a memory 420 with one or more computer-readable storage media, and a computer program stored in the memory 420 and executable on the processor. The processor 410 is electrically connected to the memory 420. Those skilled in the art will understand that the computer device structure shown in the figure does not constitute a limitation on the computer device, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0199] The processor 410 is the control center of the computer device 400. It connects various parts of the computer device 400 through various interfaces and lines. By running or loading software programs and / or modules stored in the memory 420, and calling data stored in the memory 420, it performs various functions of the computer device 400 and processes data, thereby monitoring the computer device 400 as a whole.

[0200] In this embodiment, the processor 410 in the computer device 400 loads the instructions corresponding to the processes of one or more applications into the memory 420 according to the following steps, and the processor 410 runs the applications stored in the memory 420 to achieve various functions:

[0201] The process involves obtaining the mapping relationship between style class names and style properties, as well as the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name in the HTML file that points to the Cascading Style Sheets (CSS), and the style properties are the properties of the CSS. Based on the node values ​​of the class name property nodes in the HTML file to be processed, the target style class name is determined. According to the mapping relationship, a target object is generated from the target style class name. The target object carries the target style properties corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate the target CSS.

[0202] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0203] Optional, such as Figure 4 As shown, the computer device 400 also includes: a touch screen display 430, a radio frequency circuit 440, an audio circuit 450, an input unit 460, and a power supply 470. The processor 410 is electrically connected to the touch screen display 430, the radio frequency circuit 440, the audio circuit 450, the input unit 460, and the power supply 470. Those skilled in the art will understand that... Figure 4 The computer device structure shown does not constitute a limitation on the computer device and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0204] The touch display screen 430 can be used to display a graphical user interface (GUI) and receive operation commands generated by the user interacting with the GUI. The touch display screen 430 may include a display panel and a touch panel. The display panel can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces of the computer device. These graphical user interfaces can be composed of graphics, text, icons, video, and any combination thereof. Optionally, the display panel can be configured using a liquid crystal display (LCD), organic light-emitting diode (OLED), or other similar technologies. The touch panel can be used to collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel), generate corresponding operation commands, and execute the corresponding program according to the operation commands. Optionally, the touch panel may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch location and the signal generated by the touch operation, transmitting the signal to the touch controller. The touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 410. It can also receive and execute commands from the processor 410. The touch panel can cover the display panel. When the touch panel detects a touch operation on or near it, it transmits the information to the processor 410 to determine the type of touch event. Subsequently, the processor 410 provides corresponding visual output on the display panel based on the type of touch event. In this embodiment, the touch panel and display panel can be integrated into the touch display screen 430 to achieve input and output functions. However, in some embodiments, the touch panel and display panel can be implemented as two independent components to achieve input and output functions. That is, the touch display screen 430 can also be used as part of the input unit 460 to achieve input functions.

[0205] The radio frequency circuit 440 can be used to transmit and receive radio frequency signals to establish wireless communication with network devices or other computer devices, and to transmit and receive signals with network devices or other computer devices.

[0206] Audio circuitry 450 can be used to provide an audio interface between a user and a computer device via a speaker and a microphone. Audio circuitry 450 can convert received audio data into electrical signals and transmit them to the speaker, where the speaker converts them into sound signals for output. Conversely, the microphone converts collected sound signals into electrical signals, which are then received by audio circuitry 450, converted back into audio data, and then processed by processor 410 before being transmitted via radio frequency circuitry 440 to, for example, another computer device, or output to memory 420 for further processing. Audio circuitry 450 may also include an earphone jack to facilitate communication between peripheral headphones and the computer device.

[0207] The input unit 460 can be used to receive input numbers, characters, or user characteristic information (such as fingerprints, iris, facial information, etc.), and to generate keyboard, mouse, joystick, optical, or trackball signal inputs related to user settings and function control.

[0208] Power supply 470 is used to supply power to various components of computer device 400. Optionally, power supply 470 can be logically connected to processor 410 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. Power supply 470 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0209] although Figure 4 As not shown in the diagram, computer equipment 400 may also include a camera, sensor, wireless fidelity module, Bluetooth module, etc., which will not be described in detail here.

[0210] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0211] As can be seen from the above, the computer device provided in this embodiment can generate a target cascading style sheet based on the Hypertext Markup Language (HTML) file format to be processed by replacing the target style class name with an identifier carried by the target object that points to the target style class name. Therefore, during development, only the HTML file to be processed needs to be written, and the corresponding target cascading style sheet can be generated through this replacement operation, thereby improving development efficiency.

[0212] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0213] Therefore, embodiments of this application provide a computer-readable storage medium storing a plurality of computer programs that can be loaded by a processor to execute steps in any of the cascading style sheet generation methods provided in embodiments of this application. For example, the computer program can execute the following steps:

[0214] The process involves obtaining the mapping relationship between style class names and style properties, as well as the Hypertext Markup Language (HTML) file to be processed. The style class name is the class name in the HTML file that points to the Cascading Style Sheets (CSS), and the style properties are the properties of the CSS. Based on the node values ​​of the class name property nodes in the HTML file to be processed, the target style class name is determined. According to the mapping relationship, a target object is generated from the target style class name. The target object carries the target style properties corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate the target CSS.

[0215] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0216] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0217] Since the computer program stored in the storage medium can execute the steps in any of the cascading style sheet generation methods provided in the embodiments of this application, the beneficial effects that any of the cascading style sheet generation methods provided in the embodiments of this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0218] The foregoing has provided a detailed description of a method, apparatus, computer device, and storage medium for generating cascading style sheets according to embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are only for the purpose of helping to understand the method and core ideas of this application. At the same time, those skilled in the art will recognize that there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for generating cascading style sheets, characterized in that, include: Obtain the mapping relationship between style class names and style attributes, as well as the Hypertext Markup Language file to be processed. The style class name is the class name in the Hypertext Markup Language file that points to the Cascading Style Sheets, and the style attribute is the attribute of the Cascading Style Sheets. The target style class name is determined based on the node value of the class name attribute node of the hypertext markup language file to be processed; Based on the mapping relationship, a target object is generated from the target style class name. The target object carries the target style attribute corresponding to the target style class name and an identifier pointing to the target style class name. Based on the target object, the target style class name is replaced with the identifier to generate a target cascading style sheet and establish an association between the identifier in the replaced hypertext markup language file and the target style attribute carried by the target object. The style attribute corresponding to the hypertext markup language file to be processed is adjusted by adjusting the association. The step of replacing the target style class name with the identifier based on the target object to generate the target cascading style sheet includes: Based on the target object, replace the target style class name in the hypertext markup language file to be processed with the identifier to obtain the target hypertext markup language file; Generate a target cascading style sheet based on the target object and the target hypertext markup language file.

2. The method for generating cascading style sheets as described in claim 1, characterized in that, Before obtaining the mapping relationship between style class names and style attributes, and the hypertext markup language file to be processed, the process also includes: Get the initial attribute name of the style attribute; Extract some fields from the initial attribute name to obtain the target attribute name; Based on the target attribute name and the style class name, create a mapping relationship between the style class name and the style attribute.

3. The method for generating cascading style sheets as described in claim 1, characterized in that, The step of determining the target style class name based on the node value of the class name attribute node of the hypertext markup language file to be processed includes: An abstract syntax tree is generated based on the text content of the Hypertext Markup Language file to be processed. Traverse the abstract syntax tree to determine the class name attribute node; The style class name corresponding to the node value of the class name attribute node is determined as the target style class name.

4. The method for generating cascading style sheets as described in claim 3, characterized in that, After determining the target style class name based on the node value of the class name attribute node of the Hypertext Markup Language file to be processed, the method further includes: The target style class names are grouped into a set of class names according to the order of traversing the abstract syntax tree.

5. The method for generating cascading style sheets as described in claim 1, characterized in that, The step of generating a target object from the target style class name based on the mapping relationship includes: Based on the mapping relationship, obtain the target style attribute corresponding to the target style class name; The target style class name and the target style attribute corresponding to the target style class name are combined to generate an initial object; The target style class name in the initial object is converted into an identifier pointing to the target style class name to obtain the target object.

6. The method for generating cascading style sheets as described in claim 4, characterized in that, The identifier pointing to the target style class name is a random string.

7. The method for generating cascading style sheets as described in claim 1, characterized in that, The target object includes a basic type field corresponding to the target style class name. The step of replacing the target style class name in the hypertext markup language file to be processed with the identifier based on the target object to obtain the target hypertext markup language file includes: Based on the target object, detect the target field that matches the basic type field in the hypertext markup language file to be processed; If the target field is detected, the target field is replaced with the identifier to obtain the target hypertext markup language file.

8. The method for generating cascading style sheets as described in claim 1, characterized in that, The step of generating a target cascading style sheet based on the object and the target hypertext markup language file includes: Extract the identifier and the target style attribute corresponding to the identifier from the target object; The identifier and the target style attribute corresponding to the identifier are combined to generate a target mapping relationship; The target mapping relationship is associated with the target hypertext markup language file to obtain the target cascading style sheet.

9. A device for generating cascading style sheets, characterized in that, include: The acquisition unit is used to acquire the mapping relationship between style class names and style attributes, as well as the Hypertext Markup Language file to be processed. The style class name is the class name in the Hypertext Markup Language file that points to the Cascading Style Sheets, and the style attribute is the attribute of the Cascading Style Sheets. The determining unit is used to determine the target style class name based on the node value of the class name attribute node of the hypertext markup language file to be processed; The generation unit is used to generate a target object from the target style class name according to the mapping relationship. The target object carries a target style attribute corresponding to the target style class name and an identifier pointing to the target style class name. The generation unit is further configured to replace the target style class name with the identifier according to the target object, so as to generate a target cascading style sheet and establish an association between the identifier in the replaced hypertext markup language file and the target style attribute carried by the target object, and adjust the style attribute corresponding to the hypertext markup language file to be processed by adjusting the association. The generation unit is further configured to: Based on the target object, replace the target style class name in the hypertext markup language file to be processed with the identifier to obtain the target hypertext markup language file; Generate a target cascading style sheet based on the target object and the target hypertext markup language file.

10. A computer device, characterized in that, The method includes a processor and a memory, the memory storing multiple instructions; the processor loads instructions from the memory to perform the steps in the method for generating cascading style sheets as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a plurality of instructions adapted for loading by a processor to perform the steps of the method for generating cascading style sheets according to any one of claims 1 to 8.

Images