A cascading style sheet generation method and device, computer equipment and storage medium

Abstract

The application belongs to the front-end development field and relates to a cascading style sheet generation method, which comprises the following steps: when it is detected that closed HTML tag data appears in a target HTML file, the closed HTML tag data is extracted; a local database is read, and a replaceable code set is obtained in the local database, the replaceable code set comprising replaceable style codes; based on a preset correspondence relationship, replaceable style codes corresponding to the closed HTML tag data are obtained in the replaceable code set; a preset cascading style sheet is obtained in the local database, the preset cascading style sheet carrying at least default style codes and an active area; the replaceable style codes are embedded into the active area of the preset cascading style sheet to obtain a target cascading style sheet; and the target cascading style sheet is output. The application realizes the process of automatically converting an HTML document into a CSS document, and can greatly improve accuracy and improve the development efficiency of a project.

Description

TECHNICAL FIELD

[0001] The present application relates to the front-end development field, and in particular to a cascading style sheet generation method and device, computer equipment and a storage medium. BACKGROUND

[0002] Web front-end development evolved from web page making. With the development of Internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, have significant interactive effects, and are more powerful. With the rapid development of web2.0 development technology, developers pay more and more attention to the efficiency of front-end development. More and more web systems separate front-end and back-end. How to quickly and efficiently write and encapsulate front-end interactive components with good performance becomes a key problem.

[0003] A cascading style sheet generation method is provided. After writing a page file with an html structure, the cascading style sheet is written according to the class style name of the tag element in the HTML file and the design draft, so as to generate the cascading style sheet.

[0004] However, the traditional cascading style sheet generation method is generally not intelligent. The class style name of the tag element in the HTML file and the design draft are compared to write the cascading style sheet, which increases the workload of developers and increases the resource investment for development. At the same time, due to the fact that spelling errors and nesting errors are more likely to occur during the comparison process, the processing accuracy and efficiency are greatly reduced. SUMMARY

[0005] Based on the above, to solve the problem of low processing accuracy and efficiency of the traditional cascading style sheet generation scheme.

[0006] The present application provides a cascading style sheet generation method, which adopts the technical scheme as follows:

[0007] When it is detected that the closed HTML tag data appears in the target HTML file, the closed HTML tag data is extracted;

[0008] The local database is read, and a replaceable code set is obtained in the local database. The replaceable code set includes replaceable style codes;

[0009] Based on a preset correspondence, a replaceable style code corresponding to the closed HTML tag data is obtained in the replaceable code set;

[0010] A preset cascading style sheet is obtained in the local database. The preset cascading style sheet at least carries default style codes and an active area;

[0011] The replaceable style code is embedded into an active area of the preset Cascading Style Sheet to obtain a target Cascading Style Sheet.

[0012] The target Cascading Style Sheet is outputted.

[0013] To solve the above technical problems, the embodiment of the present application further provides a Cascading Style Sheet generation device, which adopts the technical scheme as follows:

[0014] The label extraction module is configured to extract closed HTML label data when detecting that the closed HTML label data appears in the target HTML file.

[0015] The code set acquisition module is configured to read a local database, and obtain a replaceable code set in the local database, wherein the replaceable code set comprises replaceable style codes.

[0016] The replaceable code acquisition module is configured to obtain, based on a preset correspondence relationship, a replaceable style code corresponding to the closed HTML label data in the replaceable code set.

[0017] The Cascading Style Sheet module is configured to obtain a preset Cascading Style Sheet in the local database, wherein the preset Cascading Style Sheet carries at least default style codes and an active area.

[0018] The target style sheet acquisition module is configured to embed the replaceable style code into the active area of the preset Cascading Style Sheet to obtain a target Cascading Style Sheet.

[0019] The target style sheet output module is configured to output the target Cascading Style Sheet.

[0020] To solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the technical scheme as follows:

[0021] The computer device comprises a memory and a processor, and a computer program is stored on the computer readable storage medium, and the computer program is executed by the processor to realize the steps of the Cascading Style Sheet generation method.

[0022] To solve the above technical problems, the embodiment of the present application further provides a computer readable storage medium, which adopts the technical scheme as follows:

[0023] A computer program is stored on the computer readable storage medium, and the computer program is executed by the processor to realize the steps of the Cascading Style Sheet generation method.

[0024] The present invention provides a method for generating a cascading style sheet. When a closed HTML tag data is detected in a target HTML file, the closed HTML tag data is extracted; a local database is read, and a replaceable code set is obtained in the local database, wherein the replaceable code set includes replaceable style codes; the replaceable style code corresponding to the closed HTML tag data is obtained from the replaceable code set based on a preset correspondence; a preset cascading style sheet is obtained in the local database, wherein the preset cascading style sheet carries at least a default style code and an active area; the replaceable style code is embedded into the active area of ​​the preset cascading style sheet to obtain a target cascading style sheet; and the target cascading style sheet is output. By performing an extraction operation on the obtained target HTML data, replaceable style codes are obtained, and based on the replaceable style codes, a target cascading style sheet corresponding to a CSS file is converted, thereby realizing a process of automatically converting an HTML document into a CSS document, which can greatly improve accuracy and enhance project development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the drawings described below are some embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0026] Figure 1 This is a flowchart of the implementation of the cascading style sheet generation method provided in the first embodiment of the present invention;

[0027] Figure 2 This is a flowchart of the implementation of the closed tag determination method provided in the first embodiment of the present invention;

[0028] Figure 3 yes Figure 2 A flowchart for implementing step S202;

[0029] Figure 4 yes Figure 2 Another implementation flow chart of step S202;

[0030] Figure 5 This is a flowchart of the method for obtaining a compatible cascading style sheet provided in the first embodiment of the present invention;

[0031] Figure 6 This is a schematic diagram of the structure of a cascading style sheet generating device provided in the second embodiment of the present invention;

[0032] Figure 7 2 is a schematic structural diagram of a closed label determination device provided in a second embodiment of the present invention;

[0033] Figure 8 is a structural schematic diagram of one embodiment of the computer device according to the present application. DETAILED DESCRIPTION

[0034] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description herein is for describing particular embodiments only and is not intended to be limiting of the application; the use herein of terms such as "comprise" and "comprising", and "have" and "having", and any variations thereof, is intended to cover a non-exclusive inclusion; the use herein of terms such as "first", "second", and the like, is intended to distinguish between similar objects unless the context indicates otherwise.

[0035] Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase that in various places in the specification are not necessarily all referring to the same embodiment, nor are they necessarily mutually exclusive of one another. It is expressly understood that the embodiments described herein are merely examples from a whole class of comparable embodiments which those skilled in the art will readily appreciate. It is also expressly understood that the terms "an embodiment", "one embodiment", "some embodiments", and "another embodiment" as used herein, and in the claims, mean "at least one embodiment".

[0036] In order to make the technical personnel in the art better understand the scheme of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings.

[0037] The method for generating a cascading style sheet provided by the embodiment of the present application extracts target attribute data from the obtained target HTML data, and converts the target attribute data into a target cascading style sheet corresponding to a CSS file, so as to realize the process of automatically converting an HTML document into a CSS document, and greatly improve the accuracy and the development efficiency of a project.

[0038] Embodiment one

[0039] Figure 1 An implementation flowchart of the method for generating a cascading style sheet provided by the embodiment one of the present application is shown, and only the parts related to the present application are shown for the convenience of description.

[0040] In step S101, when it is detected that the closing HTML tag data appears in the target HTML file, the closing HTML tag data is extracted.

[0041] In the embodiment of the present application, the target HTML file refers to the HTML file being written by the user.

[0042] In the embodiment of the present application, the closed HTML tag data refers to the data from the current start tag to the first end tag in the target HTML file, as the closed HTML tag data. For example, when the current start tag is <div class＝"imgbox">when the HTML file appears the first end tag as , the <div class＝"imgbox">to is considered as the closed HTML tag data.

[0043] In step S102, the local database is read to obtain the replaceable code set including replaceable style codes.

[0044] In the embodiment of the present application, the local database pre-stores the replaceable code set.

[0045] In the embodiment of the present application, the replaceable style code is the code to determine the difference of styles presented by different cascading style sheets, and the difference of replaceable style codes is the fundamental reason for the difference of styles of each page based on the preset cascading style. Since the difference of display styles between each page in different websites is different, the code amount of the fixed style code in the preset cascading style should be determined according to the difference of display styles between each page, which is not limited herein.

[0046] In step S103, the replaceable style code corresponding to the closed HTML tag data is obtained from the replaceable code set based on the preset correspondence.

[0047] In the embodiment of the present application, when the closed HTML tag data is extracted, the replaceable style code corresponding to the closed HTML tag data is searched from the replaceable code set according to the preset correspondence, and the replaceable style code searched in this step corresponds to the webpage style required for presenting the data content. In addition, the data type in this step can be the actual content type of the data content, such as the picture type, audio type and text type, or the source type of the data content or the data type defined according to the division standard of each data type preset by the user, which should be determined according to the actual situation, which is not limited herein.

[0048] In step S104, the preset cascading style sheet is obtained from the local database, which carries at least the default style code and the active area.

[0049] In the embodiment of the present application, the preset layer style sheet is equivalent to a layer style sheet which has not been completely written. The fixed content code contained in each layer style sheet can be extracted to generate a preset layer style according to actual conditions. The preset layer style contains an active area in which corresponding code content can be written according to the style difference between different pages. Thus, the preset layer style can be used for different pages with different display styles by editing the active area in the preset layer style.

[0050] In the embodiment of the present application, the replaceable style code is the code which determines the style difference of different layer style sheets. Thus, the difference of the replaceable style code is the fundamental reason for the style difference of different pages based on the preset layer style. Since the display style difference between different pages in different websites is different, the code amount of the fixed style code in the preset layer style should be determined according to the difference between the display styles of different pages in actual conditions, which is not limited here.

[0051] In step S105, the replaceable style code is embedded into the active area of the preset layer style sheet to obtain a target layer style sheet.

[0052] In the embodiment of the present application, the replaceable style code is embedded into the active area of the layer style sheet template, which is actually edited into the active area of the layer style template to form the layer style sheet required by the page presentation data content.

[0053] In step S106, the target layer style sheet is outputted.

[0054] In the embodiment of the present application, a layer style sheet generation method is provided. When a closed HTML tag data is detected in a target HTML file, the closed HTML tag data is extracted. A local database is read to obtain a replaceable code set in the local database, the replaceable code set including replaceable style code. The replaceable style code corresponding to the closed HTML tag data is obtained from the replaceable code set based on a preset correspondence. A preset layer style sheet is obtained from the local database, the preset layer style sheet carrying at least default style code and an active area. The replaceable style code is embedded into the active area of the preset layer style sheet to obtain a target layer style sheet. The target layer style sheet is outputted. The replaceable style code is obtained by extracting the target HTML data. The target layer style sheet corresponding to the CSS file is converted based on the replaceable style code, so as to realize the process of automatically converting the HTML document into the CSS document, which can greatly improve the accuracy and the development efficiency of the project.

[0055] With reference to the above description, the present application is further illustrated by the following examples. Figure 2Fig. 1 shows a flow chart of the implementation of the method for judging the closed tag according to the first embodiment of the present application. For the convenience of illustration, only the part related to the present application is shown.

[0056] As some optional implementation manners of the first embodiment, before the step S101, the method further comprises steps S201, S202, S203 and S204.

[0057] In the step S201, when the user edits the target HTML file, the preset node parser collects the HTML tag data of the target HTML file.

[0058] In the embodiment of the present application, when the target HTML file starts to be edited, it is considered that the user edits the target HTML file.

[0059] In the embodiment of the present application, the preset node parser is a JavaScript running environment based on Chrome V8 engine, and the node parser is preset with the event driving of "the target HTML file is edited" and the event driving of "the end tag appears".

[0060] In the embodiment of the present application, the listening operation refers to the operation of collecting the content of the target HTML file in real time after the target HTML file starts to be edited.

[0061] In the step S202, it is judged whether the HTML tag data satisfies the closed tag condition.

[0062] In the embodiment of the present application, the HTML document and the HTML element are marked by the HTML tag. The HTML tag is composed of a start tag and an end tag. The start tag is the element name surrounded by brackets. The end tag is the slash and the element name surrounded by brackets. Some HTML elements do not have end tags, such as Note: the English translation of the start tag is start tag or opening tag, and the English translation of the end tag is end tag or closing tag.

[0063] In the embodiment of the present application, it can be judged whether the closed tag condition is satisfied by judging whether the end tag appears. As an example, as described above <div class＝"imgbox"> ... When the top " " does not appear, it is judged that the closed tag condition is not satisfied. When the top " " appears, it is judged that the closed tag condition is satisfied. It should be understood that the example of how to judge whether the end tag appears is only for the convenience of understanding, and is not used to limit the embodiment of the present application.

[0064] In step S203, if the HTML tag data satisfies the closing tag condition, it is determined that the closing HTML tag data appears in the target HTML file, and the HTML tag data is taken as the closing HTML tag data.

[0065] In step S204, if the HTML tag data does not satisfy the closing tag condition, the acquisition of the HTML tag data of the target HTML file is continued.

[0066] In the embodiment of the present application, whether the closing HTML tag data appears in the target HTML file is determined by judging whether the ending tag appears, which is simple in implementation and effectively improves the processing efficiency of the system in detecting the target HTML file.

[0067] Continuing to refer to Figure 3 , an implementation flowchart of step S202 in Figure 2 is shown, only the parts related to the present application are shown for the convenience of description.

[0068] As some optional implementation manners of the first embodiment of the present application, the above step S202 specifically includes: step S301, step S302, step S303 and step S304.

[0069] In step S301, the closing tag set is acquired in the local database.

[0070] In the embodiment of the present application, the local database pre-stores a tag set based on html code, which is used to identify whether a tag set corresponding to the closing tag set in the local database appears in the above HTML tag data, as an example, for example, the tag set of " ". <div class＝"***">" and " It should be understood that the above example of the closing tag set is only for the convenience of understanding, and is not used to limit the embodiment of the present application.

[0071] In step S302, it is determined whether a tag corresponding to the HTML tag data exists in the closing tag set.

[0072] In the embodiment of the present application, the closing tag set is pre-set in the local database, and the closing tag set is used to determine whether the HTML tag data satisfies the closing tag condition, which is simple in implementation and can effectively improve the processing efficiency of the system.

[0073] In step S303, if a tag corresponding to the HTML tag data does not exist in the closing tag set, the acquisition of the HTML tag data of the target HTML file is continued.

[0074] In step S304, if there is a tag corresponding to the HTML tag data in the closed tag set, it is determined whether the HTML tag data satisfies the closed tag format.

[0075] In the embodiment of the present application, the closed tag format refers to the top-grade tag. As an example, as described above, when the top-grade "" does not appear, it is determined that the closed tag condition is not satisfied, and when the top-grade "" appears, it is determined that the closed tag condition is satisfied.

[0076] With reference to the foregoing description of the embodiment of the present application, the following describes another implementation flowchart of step S202 in the embodiment of the present application. Figure 4 , shows Figure 2 The following describes another implementation flowchart of step S202 in the embodiment of the present application.

[0077] In some optional implementation manners of the embodiment one, the step S202 specifically includes: a step S401, a step S402 and a step S403; the step S203 specifically includes: a step S404; and the step S204 specifically includes: a step S405.

[0078] In step S401, the HTML tag data is traversed, and when the start format appears, a mark data is inserted into the stack.

[0079] In the embodiment of the present application, the start format refers to the start tag format of the html code, and as an example, the start format can be "" <t>It should be understood that the examples of the start format are only for the convenience of understanding and do not limit the embodiments of the present application.

[0080] In the embodiments of the present application, the stack is a linear list with limited operations. The linear list is limited to insert and delete operations at the end of the list. This end is called the top of the stack, and the other end is called the bottom of the stack. Inserting a new element into a stack is also called pushing, entering or stacking, which is to place the new element above the top element of the stack to become the new top element. Deleting an element from a stack is also called popping or unstacking, which is to delete the top element of the stack so that the adjacent element becomes the new top element.

[0081] In the embodiments of the present application, the mark data is only used to mark the existing elements in the stack.

[0082] In step S402, when the end format appears, a mark data in the stack is deleted.

[0083] In the embodiments of the present application, the end format refers to the end tag format of the html code. As an example, the end format can be< / t> It should be understood that the examples of the end format herein are only for facilitating understanding, and are not used to limit the embodiment of the present application.

[0084] In step S403, when the HTML tag data is traversed, it is determined whether the number of the mark data in the stack is zero.

[0085] In the embodiment of the present application, the stack is a special linear table allowing insertion and deletion operations at the same end. The end allowing insertion and deletion operations is referred to as the stack top, and the other end is referred to as the stack bottom; the stack bottom is fixed, and the stack top is floating; when the number of elements in the stack is zero, it is referred to as an empty stack. The insertion is generally referred to as push, and the deletion is referred to as pop. The stack is also referred to as a first-in-last-out table.

[0086] In step S404, if the number of the mark data in the stack is zero, it is determined that the closed HTML tag data appears in the target HTML file, and the HTML tag data is taken as the closed HTML tag data.

[0087] In step S405, if the number of the mark data in the stack is not zero, the collection of the HTML tag data of the target HTML file is continued.

[0088] In the embodiment of the present application, in order to avoid the case that the preset closed tag set in the local database is incomplete, and thus the accuracy of judging the closed tag condition is reduced, the HTML tag data is judged by using the stack to determine whether the closed tag condition is met, and the closed tag set does not need to be preset in the local database, so that the implementation is more simple and easy to operate, and the processing efficiency of the system is greatly improved.

[0089] In some optional implementation forms of the first embodiment of the present application, the identity mark is marked in the replaceable style code to uniquely represent the replaceable style code.

[0090] The preset corresponding relationship is a corresponding relationship between the closed HTML tag data and the identity mark.

[0091] In the embodiment of the present application, the identity mark is marked in the replaceable style code to uniquely represent the identity of the replaceable style code, and the content of the corresponding record in the corresponding relationship is a mapping relationship between the data type and the identity mark. When the target replaceable style code corresponding to the data type is searched according to the corresponding relationship, the replaceable style code can be represented by the identity mark, the target identity mark corresponding to the data type is searched in the corresponding relationship, and the target replaceable style code marked with the target identity mark is searched and obtained in the replaceable code set. Since the identity mark is more concise than the replaceable style code, the embodiment ensures the efficiency of searching the target replaceable style code corresponding to the data type.

[0092] With reference to Figure 5 FIG. 4 shows an implementation flowchart of the compatible cascading style sheet acquisition method provided by the first embodiment of the present application. For the convenience of description, only the parts related to the present application are shown.

[0093] In some optional implementation forms of the first embodiment of the present application, the step S105 specifically includes steps S501, S502 and S503.

[0094] In step S501, the format content in the preset cascading style sheet is modified into a compatible format.

[0095] In the embodiment of the present application, the compatible format refers to the current popular CSS preprocessor language, for example, the formats such as LESS and SASS. It should be understood that the examples of the compatible format are only for the convenience of understanding, and are not used to limit the embodiments of the present application.

[0096] In actual application, the format modification in the preset cascading style sheet can be completed by setting the format attribute of the configuration file config to the corresponding compatible format.

[0097] In step S502, the parent code of each level in the preset cascading style sheet is deleted and modified into a nested form to obtain a compatible cascading style sheet.

[0098] In step S503, the replaceable style code is embedded into the active area of the compatible cascading style sheet to obtain the target cascading style sheet.

[0099] In the embodiments of the present application, the format content of the configuration file and the code form are modified, so that the two CSS pre-processing languages LESS and SASS which are currently popular are compatible, and the adaptive range of the present scheme is improved, and the compatibility of the present technical scheme is effectively improved.

[0100] In summary, the application provides a cascading style sheet generation method, when a closed HTML tag data is detected in a target HTML file, the closed HTML tag data is extracted; a local database is read, a replaceable code set is obtained in the local database, the replaceable code set comprises replaceable style codes; based on a preset correspondence, a replaceable style code corresponding to the closed HTML tag data is obtained in the replaceable code set; a preset cascading style sheet is obtained in the local database, the preset cascading style sheet at least carries a default style code and an active area; the replaceable style code is embedded into the active area of the preset cascading style sheet to obtain a target cascading style sheet; and the target cascading style sheet is output. The target attribute data is obtained by performing the extraction operation on the obtained target HTML data, and the target cascading style sheet corresponding to the CSS file is converted based on the target attribute data, so that the process of automatically converting the HTML document into the CSS document is realized, the accuracy is greatly improved, and the development efficiency of the project is improved. Meanwhile, whether the closed HTML tag data appears in the target HTML file is judged by judging whether the end tag appears, the processing efficiency of the system in detecting the target HTML file is effectively improved, the closed tag set is preset in the local database, and the closed tag set is used to judge whether the HTML tag data satisfies the closed tag condition, the processing efficiency of the system is effectively improved, in order to avoid the set missing of the preset closed tag set in the local database, the accuracy of judging the closed tag condition is reduced, the stack mode is used to judge whether the HTML tag data satisfies the closed tag condition, the closed tag set in the local database is not needed, the implementation mode is more simple and easy to operate, and the processing efficiency of the system is greatly improved; by modifying the format content and code form of the configuration file, the two CSS preprocessing languages LESS and SASS which are currently popular are compatible, the adaptive range of the scheme is improved, and the compatibility of the technical scheme is effectively improved.

[0101] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by a computer program instructing related hardware, the computer program can be stored in a computer readable storage medium, and the program can include the processes of the above-mentioned embodiments when executed. The storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0102] It should be understood that although the steps in the flowcharts of the accompanying drawings are shown in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0103] Example 2

[0104] Further references Figure 6 , as mentioned above Figure 1 The present application provides a cascading style sheet generation device, which is similar to the Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0105] like Figure 6 As shown, the cascading style sheet generation device 100 provided in the second embodiment of the present invention includes: a code set acquisition module 101, a code set acquisition module 102, a replacement code acquisition module 103, a cascading style sheet module 104, a target style sheet acquisition module 105, and a target style sheet output module 106. Among them:

[0106] The tag extraction module 101 is configured to extract the closed HTML tag data when detecting the closed HTML tag data in the target HTML file;

[0107] A code set acquisition module 102 is configured to read a local database and acquire a replaceable code set from the local database, wherein the replaceable code set includes replaceable style codes;

[0108] A replacement code acquisition module 103 is configured to acquire, from the replaceable code set based on a preset correspondence, a replaceable style code corresponding to the closed HTML tag data;

[0109] A cascading style sheet module 104 is configured to obtain a preset cascading style sheet from the local database, wherein the preset cascading style sheet carries at least a default style code and an active area;

[0110] a target style sheet acquisition module 105 , configured to embed the replaceable style code into the active area of ​​the preset cascading style sheet to acquire a target cascading style sheet; and

[0111] The target style sheet output module 106 is configured to output the target cascading style sheet.

[0112] In the embodiment of the present application,

[0113] In the embodiment of the present application, the target HTML file refers to the HTML file being edited by the user.

[0114] In the embodiment of the present application, the closing HTML tag data refers to the data from the current start tag to the first end tag appearing in the target HTML file, which is the closing HTML tag data. For example, when the current start tag is <div class＝"imgbox">when the HTML file appears the first end tag as , the data from the current start tag to the first end tag appearing in the target HTML file is considered as the closing HTML tag data. <div class＝"imgbox">to

[0115] In the embodiment of the present application, the local database pre-stores the replaceable code set.

[0116] In the embodiment of the present application, the replaceable style code is the code that determines the difference in style presented by different cascading style sheets, and thus the difference in replaceable style code is the root cause of the difference in style between pages based on the preset cascading style. Since the difference in display style between pages varies in different websites, the amount of fixed style code in the preset cascading style should be determined according to the actual difference in display style between pages, which is not limited herein.

[0117] In the embodiment of the present application, when the closing HTML tag data is extracted, the replaceable style code corresponding to the closing HTML tag data is searched in the replaceable code set according to the preset correspondence, and the replaceable style code searched in this step corresponds to the webpage style required for presenting the data content. In addition, the data type in this step can be the actual content type of the data content, such as image type, audio type, and text type, or the source type of the data content or the data type defined according to the user's preset division standard of the data type, which should be determined according to the actual situation, which is not limited herein.

[0118] In the embodiment of the present application, the preset cascading style sheet is equivalent to a cascading style sheet that has not been completely edited, and the fixed content code contained in each cascading style sheet can be extracted according to the actual situation to generate the preset cascading style, and the preset cascading style contains an active area in which the corresponding code content can be edited according to the difference in style between different pages, so that the preset cascading style can be applied to pages with different display styles by editing the active area in the preset cascading style.

[0119] ​In the embodiment of the present application, the replaceable style code is the code that determines the difference in style presented by different cascading style sheets, and therefore the difference in replaceable style code is the root cause of the difference in style of each page based on the preset cascading style. Since the difference in display style between each page in different websites varies, the amount of fixed style code in the preset cascading style should be determined according to the difference in display style between each page in actual situation, which is not specifically limited here.

[0120] In the embodiment of the present application, the replaceable style code is embedded in the active area of the cascading style sheet template, which is actually editing the replaceable style code to the active area of the cascading style template, and then forming the cascading style sheet required by the page presentation data content.

[0121] In the embodiment of the present application, a cascading style sheet generation device is provided, comprising: a label extraction module 101 configured to extract closed HTML label data when detecting the appearance of the closed HTML label data in a target HTML file; a code set acquisition module 102 configured to read a local database, and acquire a replaceable code set in the local database, the replaceable code set comprising replaceable style code; a replaceable code acquisition module 103 configured to acquire replaceable style code corresponding to the closed HTML label data in the replaceable code set based on a preset correspondence; a cascading style sheet module 104 configured to acquire a preset cascading style sheet in the local database, the preset cascading style sheet carrying at least default style code and an active area; a target style sheet acquisition module 105 configured to embed the replaceable style code into the active area of the preset cascading style sheet to acquire a target cascading style sheet; and a target style sheet output module 106 configured to output the target cascading style sheet. By performing extraction operation on the acquired target HTML data, target attribute data is obtained, and the target attribute data is converted into a target cascading style sheet corresponding to a CSS file, thereby realizing the process of automatically converting an HTML document into a CSS document, which can greatly improve accuracy and improve the development efficiency of the project.

[0122] With reference to Figure 7 , a structure schematic diagram of a closed label judgment device provided by the second embodiment of the present application is shown, only the part related to the present application is shown for the convenience of description.

[0123] In some optional implementation manners of the second embodiment of the present application, as shown in Figure 7 , the cascading style sheet generation device 100 further comprises a start acquisition sub-module 107, a condition judgment sub-module 108, a closed determination sub-module 109, and a first continuous acquisition sub-module 110. Wherein:

[0124] The starting collecting sub-module 107 is configured to start the preset node parser to collect the HTML tag data of the target HTML file when the user edits the target HTML file.

[0125] The condition judging sub-module 108 is configured to judge whether the HTML tag data satisfies the closing tag condition.

[0126] The closing determining sub-module 109 is configured to determine that the closing HTML tag data appears in the target HTML file if the HTML tag data satisfies the closing tag condition, and take the HTML tag data as the closing HTML tag data.

[0127] The first continuing collecting sub-module 110 is configured to continue collecting the HTML tag data of the target HTML file if the HTML tag data does not satisfy the closing tag condition.

[0128] In the embodiment of the present application, when the target HTML file is started to be edited, it is considered that the user edits the target HTML file.

[0129] In the embodiment of the present application, the preset node parser is a JavaScript runtime environment based on Chrome V8 engine, and the node parser is preset with the event driving of "the target HTML file is edited" and the event driving of "the end tag appears".

[0130] In the embodiment of the present application, the listening operation refers to the operation of collecting the content of the target HTML file in real time after the target HTML file is started to be edited.

[0131] In the embodiment of the present application, the HTML document and the HTML element are marked by the HTML tag, and the HTML tag is composed of a start tag and an end tag. The start tag is an element name surrounded by brackets, and the end tag is a slash and an element name surrounded by brackets. Some HTML elements do not have end tags, such as Note: the English translation of the start tag is start tag or opening tag, and the English translation of the end tag is end tag or closing tag.

[0132] In the embodiment of the present application, whether the closing tag condition is satisfied can be judged by judging whether the end tag appears. As an example, as described above, <div class＝"imgbox"> ... when the top-level "" does not appear, it is determined that the closing tag condition is not satisfied, and when the top-level "" appears, it is determined that the closing tag condition is satisfied. It should be understood that the example of how to judge whether the end tag appears is only for the convenience of understanding, and is not used to limit the embodiment of the present application.

[0133] In the embodiment of the present invention, whether closing HTML tag data appears in the target HTML file is determined by determining whether an end tag appears. This is simple to implement and effectively improves the processing efficiency of the system in detecting the target HTML file.

[0134] In some optional implementations of the second embodiment of the present invention, the condition determination submodule 106 includes: a tag set acquisition submodule, a tag determination submodule, a second continuous acquisition submodule, and a format determination submodule.

[0135] A tag set acquisition submodule, configured to acquire a closed tag set from the local database;

[0136] A tag determination submodule, configured to determine whether there is a tag corresponding to the HTML tag data in the closed tag set;

[0137] a second continuous collection submodule, configured to continue collecting the HTML tag data of the target HTML file if no tag corresponding to the HTML tag data exists in the closed tag set;

[0138] The format determination submodule is configured to determine whether the HTML tag data satisfies a closed tag format if a tag corresponding to the HTML tag data exists in the closed tag set.

[0139] In the embodiment of the present invention, by presetting a closing tag set in a local database and using the closing tag set to determine whether HTML tag data meets the closing tag condition, the implementation is simple and can effectively improve the processing efficiency of the system.

[0140] In some optional implementations of the second embodiment of the present invention, the condition determination submodule 106 includes:

[0141] A tag insertion submodule is used to traverse the HTML tag data and insert a tag data into the stack when a start format appears;

[0142] A mark deletion submodule, configured to delete one of the mark data in the stack when an end format appears;

[0143] a tag quantity determination submodule, configured to determine whether the number of the tag data in the stack is zero after traversing the HTML tag data;

[0144] a tag number correct submodule, configured to determine if the number of the tag data in the stack is zero, and use the HTML tag data as the closing HTML tag data;

[0145] a number of mark data in the stack is not zero, the HTML tag data of the target HTML file is continuously collected.

[0146] In the embodiment of the present application, in order to avoid the case that the preset closed tag set in the local database is missing, thereby reducing the accuracy of judging the closed tag condition, the replaceable style code is judged by using the stack mode to determine whether the replaceable style code meets the closed tag condition, without presetting the closed tag set in the local database, the implementation is more simple and easy to operate, and the processing efficiency of the system is greatly improved.

[0147] In some optional implementation modes of the second embodiment of the present application, the replaceable style code is marked with an identity that uniquely represents the replaceable style code.

[0148] The preset corresponding relationship is a corresponding relationship between the closed HTML tag data and the identity.

[0149] The embodiment relatively ensures the efficiency of searching the corresponding target replaceable style code according to the data type.

[0150] In some optional implementation modes of the second embodiment of the present application, the above-mentioned cascading style sheet generation device 100 further comprises a format modification submodule, a compatible style sheet acquisition submodule and a target style sheet acquisition submodule. Wherein:

[0151] The format modification submodule is configured to modify the format content in the preset cascading style sheet into a compatible format.

[0152] The compatible style sheet acquisition submodule is configured to delete the parent code of each level in the preset cascading style sheet and modify it into a nested form to obtain a compatible cascading style sheet.

[0153] The target style sheet acquisition submodule is configured to embed the replaceable style code into the active area of the compatible cascading style sheet to obtain the target cascading style sheet.

[0154] In the embodiment of the present application, by modifying the format content and the code form of the configuration file, the two kinds of CSS preprocessing languages LESS and SASS that are currently popular are compatible, thereby improving the adaptation range of the present scheme and effectively improving the compatibility of the present technical scheme.

[0155] To solve the above technical problems, the embodiment of the present application further provides a computer device. For details, please refer to Figure 8 , Figure 8 The basic structure block diagram of the computer device of the present embodiment is shown in the figure.

[0156] The computer device 8 includes a memory 81, a processor 82, and a network interface 83, which are communicatively connected through a system bus. It should be noted that only the computer device 8 with components 81-83 is shown in the figure, but it should be understood that not all of the shown components are required to be implemented, and more or fewer components can be alternatively implemented. Among them, those skilled in the art can understand that the computer device herein is a device capable of automatically performing numerical calculation and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASICs), field programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0157] The computer device can be a desktop computer, a notebook computer, a palm computer, a cloud server, and the like. The computer device can interact with the user through a keyboard, a mouse, a remote controller, a touchpad, a voice control device, and the like.

[0158] The memory 81 includes at least one type of readable storage medium, including a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the memory 81 can be an internal storage unit of the computer device 8, such as a hard disk or a memory of the computer device 8. In other embodiments, the memory 81 can also be an external storage device of the computer device 8, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, and the like. Of course, the memory 81 can also include both the internal storage unit and the external storage device of the computer device 8. In this embodiment, the memory 81 is generally used to store an operating system and various application software installed in the computer device 8, such as program codes of X methods, etc. In addition, the memory 81 can also be used to temporarily store various data that have been output or will be output.

[0159] The processor 82 may, in some embodiments, be a Central Processing Unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 82 is generally used to control the overall operation of the computer device 8. In the present embodiment, the processor 82 is configured to execute program code stored in the memory 81 or to process data, such as to execute program code of the X method.

[0160] The network interface 83 may include a wireless network interface or a wired network interface, and is generally used to establish a communication connection between the computer device 8 and other electronic devices.

[0161] The present application also provides another embodiment, i.e., to provide a computer readable storage medium storing an X program, which can be executed by at least one processor to make the at least one processor perform the steps of the X method as described above.

[0162] From the above description of the embodiments, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be realized by means of software and necessary general hardware platforms, and of course, they can also be realized by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product, which is stored in a storage medium (such as a ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions to make a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) execute the methods described in the various embodiments of the present application.

[0163] Obviously, the above-described embodiments are only some embodiments of the present application, rather than all the embodiments, and the drawings show the preferred embodiments of the present application, but do not limit the patent scope of the present application. The present application can be realized in many different forms, and conversely, the purpose of providing these embodiments is to make the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions recorded in the foregoing specific embodiments, or make equivalent replacements to some technical features. Any equivalent structure made by referring to the contents of the present application specification and drawings, directly or indirectly applied to other related technical fields, is also within the scope of the patent protection of the present application.

Claims

1. A cascading style sheet generation method characterized by, The method comprises the following steps: extracting the closed HTML tag data when detecting the closed HTML tag data in the target HTML file; reading a local database to obtain a replaceable code set in the local database, the replaceable code set comprising replaceable style codes; obtaining the replaceable style code corresponding to the closed HTML tag data in the replaceable code set based on a preset correspondence; obtaining a preset Cascading Style Sheet in the local database, the preset Cascading Style Sheet carrying at least a default style code and an active area; embedding the replaceable style code into the active area of the preset Cascading Style Sheet to obtain a target Cascading Style Sheet; outputting the target Cascading Style Sheet; before the step of extracting the closed HTML tag data when detecting the closed HTML tag data in the target HTML file, the method further comprises the following steps: starting a preset node parser to collect HTML tag data of the target HTML file when a user writes the target HTML file; judging whether the HTML tag data satisfies a closed tag condition; if the HTML tag data satisfies the closed tag condition, determining that the closed HTML tag data appears in the target HTML file and taking the HTML tag data as the closed HTML tag data; if the HTML tag data does not satisfy the closed tag condition, continuing to collect the HTML tag data of the target HTML file; the step of judging whether the HTML tag data satisfies the closed tag condition specifically comprises the following steps: traversing the HTML tag data, inserting a mark data into a stack when a start format appears; deleting a mark data in the stack when an end format appears; judging whether the number of mark data in the stack is zero when the HTML tag data is traversed completely; if the number of mark data in the stack is zero, determining that the closed HTML tag data appears in the target HTML file and taking the HTML tag data as the closed HTML tag data; if the number of mark data in the stack is not zero, continuing to collect the HTML tag data of the target HTML file.

2. The Cascading Style Sheet generation method of claim 1, wherein, the step of judging whether the HTML tag data satisfies the closed tag condition specifically comprises the following steps: obtaining a closed tag set in the local database; judging whether there is a tag corresponding to the HTML tag data in the closed tag set; if there is no tag corresponding to the HTML tag data in the closed tag set, continuing to collect the HTML tag data of the target HTML file; if there is a tag corresponding to the HTML tag data in the closed tag set, judging whether the HTML tag data satisfies a closed tag format.

3. The method of claim 1, wherein, the replaceable style code is marked with an identity uniquely representing the replaceable style code. The preset corresponding relationship is a corresponding relationship between the closed HTML tag data and the identity.

4. The method of claim 1, wherein, In the step of embedding the replaceable style code into the active area of the preset Cascading Style Sheet, the step of obtaining the target Cascading Style Sheet further comprises: modifying the format content in the preset Cascading Style Sheet into a compatible format; deleting the parent code of each level in the preset Cascading Style Sheet and modifying into a nested form to obtain a compatible Cascading Style Sheet; embedding the replaceable style code into the active area of the compatible Cascading Style Sheet to obtain the target Cascading Style Sheet.

5. A cascading style sheet generation apparatus, characterized by comprising: The device comprises: a tag extraction module configured to extract closed HTML tag data when detecting the closed HTML tag data in a target HTML file; a code set obtaining module configured to read a local database, and obtain a replaceable code set in the local database, the replaceable code set comprising replaceable style code; a replaceable code obtaining module configured to obtain replaceable style code corresponding to the closed HTML tag data from the replaceable code set based on a preset corresponding relationship; a Cascading Style Sheet module configured to obtain a preset Cascading Style Sheet in the local database, the preset Cascading Style Sheet carrying at least default style code and an active area; a target style sheet obtaining module configured to embed the replaceable style code into the active area of the preset Cascading Style Sheet to obtain a target Cascading Style Sheet; and a target style sheet output module configured to output the target Cascading Style Sheet. The device further comprises: a start collecting sub-module configured to start a preset node parser to collect replaceable style code of a target HTML file when a user writes the target HTML file; a condition judging sub-module configured to judge whether the replaceable style code meets a closed tag condition; a condition meeting sub-module configured to, if the replaceable style code meets the closed tag condition, determine that closed HTML tag data appears in the target HTML file, and take the replaceable style code as the closed HTML tag data; a condition deficiency sub-module configured to, if the replaceable style code does not meet the closed tag condition, continue to collect the replaceable style code of the target HTML file; the condition judging sub-module comprises: a mark inserting sub-module configured to traverse the HTML tag data, and insert a mark data into a stack when a start format appears; a mark deleting sub-module configured to delete a mark data from the stack when an end format appears; a mark number judging sub-module configured to judge whether the number of mark data in the stack is zero when the traversal of the HTML tag data is completed; a mark number correctness sub-module configured to, if the number of mark data in the stack is zero, determine that the closed HTML tag data appears in the target HTML file, and take the HTML tag data as the closed HTML tag data; and a mark number deficiency sub-module configured to, if the number of mark data in the stack is not zero, continue to collect the replaceable style code of the target HTML file. The number of tags error sub-module is configured to continue collecting the HTML tag data of the target HTML file if the number of the tag data in the stack is not zero. 6.A computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the cascading style sheet generation method according to any one of claims 1 to 4 when executing the computer program.

7. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the computer program is executed by the processor to implement the steps of the cascading style sheet generation method according to any one of claims 1 to 4.

Images