1.本技术涉及计算机
技术领域：
：，尤其涉及一种样式编辑方法及其设备、页面显示方法以及计算机设备。
背景技术：
：：2.css(cascadingstylesheets，层叠样式表)是一种用于描述网页样式的计算机语言，开发人员可以通过编写css代码，以实现对网页样式的编辑。随着功能的加入、规模的增加，网页的css代码的代码冗余度往往也随之增加，导致css代码的运维成本上升。技术实现要素：3.有鉴于此，实有必要提供一种样式编辑方法及其设备、页面显示方法以及计算机设备，能够有效减少css文件的代码量。4.第一方面，本技术实施例提供一种样式编辑方法，所述样式编辑方法包括：5.当利用开发工具创建html文件时，提供css声明模板，其中，所述css声明模板包括若干原子类以及每个原子类相关的预设css属性，所述css声明模板包含了所有预设css属性的原子类；所述若干原子类包括第一原子类集合和第二原子类集合，所述第一原子类集合中每一原子类相关的预设css属性为多条；所述第二原子类中每一原子类相关的预设css属性为一条；6.响应用户的输入触发生成html文件，其中，所述html文件中包含与页面的dom元素相对应的标签，所述标签中的class值为所述若干原子类中一者的名称或者多者的名称组合；以及7.监听所述html文件并当监听到所述class值发生变化时，根据所述class值生成包含所述class值对应的原子类的样式表以作为所述html文件所引用的css声明文件。8.第二方面，本技术实施例提供一种样式编辑设备，所述样式编辑设备包括：9.存储器，用于存储程序指令；以及10.处理器，用于执行所述程序指令以实现如上所述的样式编辑方法。11.第三方面，本技术实施例提供一种页面显示方法，所述页面显示方法包括：12.加载html文件，其中，所述html文件包含引用的css声明文件的名称；13.根据所述css声明文件的名称获取css声明文件，其中，所述css声明文件包括若干原子类以及每个原子类相关的预设css属性，所述若干原子类包括第一原子类集合和第二原子类集合，所述第一原子类集合中每一原子类相关的预设css属性为多条；所述第二原子类中每一原子类相关的预设css属性为一条；14.解析所述html文件各标签的class值得到相应的原子类，其中，所述class值为所述若干原子类中一者的名称或者多者的名称组合，所述html文件的标签对应目标页面的dom元素；15.根据解析出的原子类名称或者原子类名称组合从所述css声明文件中调用相对应的原子类对所对应的dom元素进行编辑；以及16.显示所述目标页面。17.第四方面，本技术实施例提供一种计算机设备，所述计算机设备包括：18.存储器，用于存储程序指令；以及19.处理器，用于执行所述程序指令以实现如上所述的页面显示方法。20.上述样式编辑方法及其设备、页面显示方法以及计算机设备，开发人员可以对所有预设css属性的属性值进行判断，根据属性值是否为数值型将预设css属性划分为两类，并根据划分好的预设css属性形成css声明模板。其中，由于数值型属性值的预设css属性的数量较多，因此，将属性值连续的多个预设css属性与同一原子类相关联。通过原子类实现具有数值的样式指令，能够有效减少数值型属性值的预设css属性的数量。同时，将非数值型属性值的预设css属性与原子类一一对应关联，原子类的名称为相应预设css属性的属性值，能够极大降低css声明模板的代码的复杂度，使得css声明模板的代码为有限原子类的集合，并降低css声明模板的代码的运维成本，有效提升css声明模板的代码的可维护性。21.开发人员参照自定义的原子类编写html文件，由于所有预设css属性的原子类都自定义好了，且原子类具有统一性，能够形成统一的书写规范，从而能够简便、易行、快速地编写样式。同时，也不会出现同样的预设css属性在css声明模板中重复声明，因此能够有效避免多人协作开发样式时发生样式冲突，从而提高网页页面的开发速度，保持页面设计的一致性。当增加页面效果的复杂程度时，css声明模板的代码量都会保持在较小的体积下，不会急剧增多，也能够加快网页页面的渲染速度。当页面越复杂时，效果越明显。22.由于不是每个html文件都需要用到css声明模板中声明的所有原子类，因此，监听html文件中的class值并生成相应的css声明文件，可以极大减少css声明文件中声明的原子类的数量，从而形成一份数量极其有限的css声明文件，有效提升css声明文件代码的可维护性，降低css声明文件代码的运维成本。同时，当html文件中的原子类发生增加、修改、删除等变化时，能够自动更新css声明文件，而不需要修改css声明模板，从而降低css声明模板代码的复杂度。附图说明23.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。24.图1为本技术实施例提供的样式编辑方法的流程图。25.图2为本技术实施例提供的样式编辑系统的内部结构示意图。26.图3为本技术实施例提供的页面显示方法的流程图。27.图4为本技术实施例提供的计算机设备的内部结构示意图。28.本技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。具体实施方式29.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本技术，并不用于限定本技术。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。30.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的规划对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，换句话说，描述的实施例根据除了这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，还可以包含其他内容，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于只清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。31.需要说明的是，在本技术中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者多个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本技术要求的保护范围之内。32.请结合参看图1，其为本技术实施例提供的样式编辑方法的流程图。当前端页面开发人员创建用于对页面进行样式编辑的html文件时，样式编辑方法利用开发工具对html文件进行监听，并生成相应的css声明文件。样式编辑方法具体包括如下步骤。33.步骤s102，当利用开发工具创建html文件时，提供css声明模板。当开发人员利用开发工具创建html文件时，开发工具提供css声明模板。其中，css声明模板为预先设定好的模板文件。css声明模板包括若干原子类以及每个原子类相关的预设css属性。css声明模板包含了所有预设css属性的原子类。开发人员可以参照css声明模板中的原子类，对html文件进行编辑。34.预设css属性为现有层叠样式表(cascadingstylesheets，css)囊括的所有属性。在本实施例中，从实现效果的角度预先将所有属性划分为若干大类。其中，实现效果的角度包括但不限于实现布局、实现文本渲染等角度。大类包括但不限于布局(layout)、弹性盒子和网格(flexboxandgrid)、间距(spacing)、大小(sizing)、版面设计(typography)、背景(backgrounds)、边框(borders)、效果(effects)、滤镜(filters)、表格(tables)、变换(transforms)、过渡和动画(transitionsandanimations)、交互(interactivity)等。其中，每一预设css属性与一个大类相对应。即是说，所有大类包括的所有预设css属性覆盖现有层叠样式表囊括的所有属性。35.预设css属性包括属性值，属性值用于表示预设css属性的效果。所有预设css属性中，部分预设css属性的属性值采用数值的形式进行表示，即属性值为数值型；部分预设css属性的属性值采用文字的形式进行表示，即属性值为非数值型。36.举例来说，用于表示文本对齐(text-align)的预设css属性包括四个，四个预设css属性的属性值分别为：左对齐(left)、居中对齐(center)、右对齐(right)、两端对齐(justified)。相应地，预设css属性分别为text-align-left、text-align-center、text-align-right、text-align-justified。用于表示行距(leading)的预设css属性包括若干个，预设css属性的属性值以像素的形式进行表示，若干个预设css属性的属性值包括多个，如8px、12px、15px等。相应地，预设css属性分别为leading-8px、leading-12px、leading-15px。因此，用于表示文本对齐的预设css属性的属性值为数值型，用于表示行距的预设css属性的属性值为非数值型。37.若干原子类包括第一原子类集合和第二原子类集合，第一原子类集合中每一原子类相关的预设css属性为多条，第二原子类中每一原子类相关的预设css属性为一条。具体地，第一原子类集合中的每一原子类相关的预设css属性的属性值为数值型。第二原子类集合中的每一原子类相关的预设css属性的属性值为非数值型。38.可以理解的是，预先设定css声明模板时，可以根据预设css属性的属性值对预设css属性进行分类，并自定义用于表示样式的原子类。当预设css属性的属性值为数值型时，将属性值连续的多个预设css属性与同一原子类相关联；当预设css属性的属性值不是数值型时，将一个预设css属性与一个原子类一一关联。39.举例来说，用于表示文本对齐(text-align)的预设css属性的属性值为非数值型，将每一预设css属性均与一个原子类相关联，则用于表示文本对齐的原子类包括四个，分别对应的预设css属性为：text-align-left、text-align-center、text-align-right、text-align-justified。40.当预设css属性的属性值为数值型时，用于表示同一样式的预设css属性的数量较多，若直接将每一预设css属性均与一个原子类相关联，则会导致原子类的数量较多，不利于降低css声明模板的代码量。因此，将属性值连续的多个预设css属性与同一原子类相关联。其中，预设像素值可以为4px。举例来说，用于表示行距(leading)的预设css属性的属性值以像素的形式进行表示，属性值分别与0px至任意数值相对应。若预设像素值为4px，则将属性值连续的四个预设css属性与同一原子类相关联。即，将leading-0px、leading-1px、leading-2px以及leading-3px四个预设css属性与同一原子类相关联；将leading-4px、leading-5px、leading-6px以及leading-7px四个预设css属性与同一原子类相关联；将leading-8px、leading-9px、leading-10px以及leading-11px四个预设css属性与同一原子类相关联，并以此类推将预设css属性与原子类进行关联。41.在一些可行的实施例中，预设像素值可以为3px、5px或者其它数值，预设像素值也可以根据实际情况进行设置，在此不做限定。42.在另一些可行的实施例中，若数值型属性值以其它形式进行表示时，可以按照其它形式的预设值将属性值连续的多个预设css属性与同一原子类相关联。43.在本实施例中，第一原子类集合中的原子类包括若干子原子类集合，若干子原子类集合中的每个原子类的名称包括标识字段和等级字段。第二原子类集合中的每一原子类的名称仅包括标识字段。其中，一部分若干原子类的标识字段用相关的预设css属性的名称表示，等级字段对应相关的预设css属性的属性值范围；另一部分若干原子类的标识字段用相关的预设css属性的属性值表示。即是说，子原子类集合中的原子类名称的标识字段用相关的预设css属性的名称表示，等级字段对应相关的预设css属性的属性值范围。第二原子类集合中的每一原子类名称的标识字段用相关的预设css属性的属性值表示。44.举例来说，第一原子类集合中的某一子原子类集合中，原子类的名称分别为leading-1、leading-2、leading-3。其中，leading为标识字段，1、2、3为等级字段。可以理解的是，同一子原子类集合中所有原子类的标识字段相同，原子类的名称采用键值对的方式表示。相应地，与该子原子类集合中所有原子类相关的预设css属性用于表示行距(leading)。用于表示行距(leading)的预设css属性包括leading-0px、leading-1px、leading-2px、leading-3px、leading-4px、leading-5px、leading-6px、leading-7px、leading-8px、leading-9px、leading-10px以及leading-11px。其中，预设css属性的名称均为leading，属性值范围包括0-3px、4-7px、8-11px。可以理解的是，等级字段1与属性值范围0-3px相对应，等级字段2与属性值范围4-7px相对应，等级字段3与属性值范围8-11px相对应。45.举例来说，第二原子类集合中某些原子类的名称分别为left、center、right、justified。其中，标识字段包括left、center、right、justified。即是说，原子类的标识字段用表示文本对齐(text-align)的预设css属性的属性值表示。46.在本实施例中，若干原子类中每个原子类相关的预设css属性是固定的。47.步骤s104，响应用户的输入触发生成html文件。其中，html文件中包含与页面的dom(文件对象模型，documentobjectmodel)元素相对应的标签。html文件通过标签定义class的值。标签中的class值为若干原子类中一者的名称或者多者的名称组合。48.开发人员可以根据实际页面版式需求直接参照css声明模板中的原子类在html文件中输入相应的原子类。可以理解的是，一旦css声明模板中的原子类自定义好之后，所有的开发人员都可以直接参照自定义好的原子类编辑html文件，无需每次在编辑html文件之前都重复对预设css属性对应的原子类进行自定义。49.举例来说，开发人员在html文件中输入的语句为：《pclass＝"left"》soistartedtowalkintothewater...《/p》。其中，《p》为与dom元素相对应的标签，标签中class值为left，即class值为一个原子类的名称。50.步骤s106，监听html文件并当监听到class值发生变化时，根据class值生成包含class值对应的原子类的样式表以作为html文件所引用的css声明文件。可以理解的是，css声明文件中的原子类为html文件中包含的原子类。即，css声明文件中的原子类与html文件包含的原子类相对应。在本实施例中，监听每一html文件，并为每一html文件都生成对应的css声明文件，即，每一html文件均对应一个css声明文件。其中，css声明文件中原子类的数量少于css声明模板中原子类的数量。51.在本实施例中，class值的变化包括但不限于增加、修改、删除等。举例来说，html文件中原有的语句为：《divclass＝"shadow-smbg-whiterounded-lg"》shadow-sm《/div》。该html文件通过《div》标签定义class值为shadow-sm、bg-white、rounded-lg，即class值为三个原子类的名称组合。则页面中相应生成的dom元素包括背景白色、圆角、边缘带阴影的边框。当需要替换背景色时，开发人员只需要把html文件中的bg-white修改为对应的背景色即可。如，将背景色修改为红色，则将bg-white修改为bg-red。当需要加重阴影效果时，开发人员只需要将shadow-sm调整为shadow-lg。当不需要圆角效果时，开发人员只需要删除rounded-lg即可。上述操作都将改变class值，则css声明文件中的原子类也会相应改变。52.上述实施例中，开发人员可以对所有预设css属性的属性值进行判断，根据属性值是否为数值型将预设css属性划分为两类，并根据划分好的预设css属性形成css声明模板。其中，由于数值型属性值的预设css属性的数量较多，因此，将属性值连续的多个预设css属性与同一原子类相关联。通过原子类实现具有数值的样式指令，能够有效减少数值型属性值的预设css属性的数量。同时，将非数值型属性值的预设css属性与原子类一一对应关联，原子类的名称为相应预设css属性的属性值，能够极大降低css声明模板的代码的复杂度，使得css声明模板的代码为有限原子类的集合，并降低css声明模板的代码的运维成本，有效提升css声明模板的代码的可维护性。53.开发人员参照自定义的原子类编写html文件，由于所有预设css属性的原子类都自定义好了，且原子类具有统一性，能够形成统一的书写规范，从而能够简便、易行、快速地编写样式。同时，也不会出现同样的预设css属性在css声明模板中重复声明，因此能够有效避免多人协作开发样式时发生样式冲突，从而提高网页页面的开发速度，保持页面设计的一致性。当增加页面效果的复杂程度时，css声明模板的代码量都会保持在较小的体积下，不会急剧增多，也能够加快网页页面的渲染速度。当页面越复杂时，效果越明显。54.由于不是每个html文件都需要用到css声明模板中声明的所有原子类，因此，监听html文件中的class值并生成相应的css声明文件，可以极大减少css声明文件中声明的原子类的数量，从而形成一份数量极其有限的css声明文件，有效提升css声明文件代码的可维护性，降低css声明文件代码的运维成本。同时，当html文件中的原子类发生增加、修改、删除等变化时，能够自动更新css声明文件，而不需要修改css声明模板，从而降低css声明模板代码的复杂度。55.请结合参看图2，其为本技术实施例提供的样式编辑系统的内部结构示意图。样式编辑系统20包括存储器21和处理器22。存储器21用于存储程序指令，处理器22用于执行程序指令以实现上述样式编辑方法。56.其中，处理器22在一些实施例中可以是一中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器或其它数据处理芯片，用于运行存储器21中存储的程序指令。57.存储器21至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器21在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘。存储器21在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘、智能存储卡(smartmediacard，smc)、安全数字(securedigital，sd)卡、闪存卡(flashcard)等。进一步地，存储器21还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器21不仅可以用于存储安装于计算机设备的应用软件及各类数据，例如实现样式编辑方法的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。58.请结合参看图3，其为本技术实施例提供的页面显示方法的流程图。页面显示方法用于根据html文件生成相应的目标页面。页面显示方法具体包括如下步骤。59.步骤s302，加载html文件。其中，html文件包含引用的css声明文件的名称。可以理解的是，html文件包含的引用的css声明文件为根据该html文件生成的声明文件。60.步骤s304，根据css声明文件的名称获取css声明文件。其中，css声明文件包括若干原子类以及每个原子类相关的预设css属性。若干原子类包括第一原子类集合和第二原子类集合，第一原子类集合中每一原子类相关的预设css属性为多条；第二原子类中每一原子类相关的预设css属性为一条。61.步骤s306，解析html文件各标签的class值得到相应的原子类。其中，class值为若干原子类中一者的名称或者多者的名称组合。html文件的标签对应目标页面的dom元素。62.步骤s308，根据解析出的原子类名称或者原子类名称组合从css声明文件中调用相对应的原子类对所对应的dom元素进行编辑。63.举例来说，若html文件中的语句包括：《pclass＝"left"》soistartedtowalkintothewater...《/p》，则解析该语句的class值得到的原子类为left。从css声明文件中调用原子类left对标签《p》所对应的dom元素进行编辑。dom元素包括对齐方式为左对齐的文本：“soistartedtowalkintothewater...”。64.步骤s310，显示目标页面。其中，目标页面包括html文件中与所有标签一一对应的dom元素。65.请结合参看图4，其为本技术实施例提供的计算机设备的内部结构示意图。计算机设备10包括存储器11和处理器12。存储器11用于存储程序指令，处理器12用于执行程序指令以实现上述页面显示方法。66.其中，处理器12在一些实施例中可以是一中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器或其它数据处理芯片，用于运行存储器11中存储的程序指令。67.存储器11至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘。存储器11在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘、智能存储卡(smartmediacard，smc)、安全数字(securedigital，sd)卡、闪存卡(flashcard)等。进一步地，存储器11还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于计算机设备的应用软件及各类数据，例如实现页面显示方法的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。68.显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘且本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。69.以上所列举的仅为本技术较佳实施例而已，当然不能以此来限定本技术之权利范围，因此依本技术权利要求所作的等同变化，仍属于本技术所涵盖的范围。当前第1页12当前第1页12
技术领域：
：，尤其涉及一种样式编辑方法及其设备、页面显示方法以及计算机设备。
背景技术：
：：2.css(cascadingstylesheets，层叠样式表)是一种用于描述网页样式的计算机语言，开发人员可以通过编写css代码，以实现对网页样式的编辑。随着功能的加入、规模的增加，网页的css代码的代码冗余度往往也随之增加，导致css代码的运维成本上升。技术实现要素：3.有鉴于此，实有必要提供一种样式编辑方法及其设备、页面显示方法以及计算机设备，能够有效减少css文件的代码量。4.第一方面，本技术实施例提供一种样式编辑方法，所述样式编辑方法包括：5.当利用开发工具创建html文件时，提供css声明模板，其中，所述css声明模板包括若干原子类以及每个原子类相关的预设css属性，所述css声明模板包含了所有预设css属性的原子类；所述若干原子类包括第一原子类集合和第二原子类集合，所述第一原子类集合中每一原子类相关的预设css属性为多条；所述第二原子类中每一原子类相关的预设css属性为一条；6.响应用户的输入触发生成html文件，其中，所述html文件中包含与页面的dom元素相对应的标签，所述标签中的class值为所述若干原子类中一者的名称或者多者的名称组合；以及7.监听所述html文件并当监听到所述class值发生变化时，根据所述class值生成包含所述class值对应的原子类的样式表以作为所述html文件所引用的css声明文件。8.第二方面，本技术实施例提供一种样式编辑设备，所述样式编辑设备包括：9.存储器，用于存储程序指令；以及10.处理器，用于执行所述程序指令以实现如上所述的样式编辑方法。11.第三方面，本技术实施例提供一种页面显示方法，所述页面显示方法包括：12.加载html文件，其中，所述html文件包含引用的css声明文件的名称；13.根据所述css声明文件的名称获取css声明文件，其中，所述css声明文件包括若干原子类以及每个原子类相关的预设css属性，所述若干原子类包括第一原子类集合和第二原子类集合，所述第一原子类集合中每一原子类相关的预设css属性为多条；所述第二原子类中每一原子类相关的预设css属性为一条；14.解析所述html文件各标签的class值得到相应的原子类，其中，所述class值为所述若干原子类中一者的名称或者多者的名称组合，所述html文件的标签对应目标页面的dom元素；15.根据解析出的原子类名称或者原子类名称组合从所述css声明文件中调用相对应的原子类对所对应的dom元素进行编辑；以及16.显示所述目标页面。17.第四方面，本技术实施例提供一种计算机设备，所述计算机设备包括：18.存储器，用于存储程序指令；以及19.处理器，用于执行所述程序指令以实现如上所述的页面显示方法。20.上述样式编辑方法及其设备、页面显示方法以及计算机设备，开发人员可以对所有预设css属性的属性值进行判断，根据属性值是否为数值型将预设css属性划分为两类，并根据划分好的预设css属性形成css声明模板。其中，由于数值型属性值的预设css属性的数量较多，因此，将属性值连续的多个预设css属性与同一原子类相关联。通过原子类实现具有数值的样式指令，能够有效减少数值型属性值的预设css属性的数量。同时，将非数值型属性值的预设css属性与原子类一一对应关联，原子类的名称为相应预设css属性的属性值，能够极大降低css声明模板的代码的复杂度，使得css声明模板的代码为有限原子类的集合，并降低css声明模板的代码的运维成本，有效提升css声明模板的代码的可维护性。21.开发人员参照自定义的原子类编写html文件，由于所有预设css属性的原子类都自定义好了，且原子类具有统一性，能够形成统一的书写规范，从而能够简便、易行、快速地编写样式。同时，也不会出现同样的预设css属性在css声明模板中重复声明，因此能够有效避免多人协作开发样式时发生样式冲突，从而提高网页页面的开发速度，保持页面设计的一致性。当增加页面效果的复杂程度时，css声明模板的代码量都会保持在较小的体积下，不会急剧增多，也能够加快网页页面的渲染速度。当页面越复杂时，效果越明显。22.由于不是每个html文件都需要用到css声明模板中声明的所有原子类，因此，监听html文件中的class值并生成相应的css声明文件，可以极大减少css声明文件中声明的原子类的数量，从而形成一份数量极其有限的css声明文件，有效提升css声明文件代码的可维护性，降低css声明文件代码的运维成本。同时，当html文件中的原子类发生增加、修改、删除等变化时，能够自动更新css声明文件，而不需要修改css声明模板，从而降低css声明模板代码的复杂度。附图说明23.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。24.图1为本技术实施例提供的样式编辑方法的流程图。25.图2为本技术实施例提供的样式编辑系统的内部结构示意图。26.图3为本技术实施例提供的页面显示方法的流程图。27.图4为本技术实施例提供的计算机设备的内部结构示意图。28.本技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。具体实施方式29.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本技术，并不用于限定本技术。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。30.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的规划对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，换句话说，描述的实施例根据除了这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，还可以包含其他内容，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于只清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。31.需要说明的是，在本技术中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者多个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本技术要求的保护范围之内。32.请结合参看图1，其为本技术实施例提供的样式编辑方法的流程图。当前端页面开发人员创建用于对页面进行样式编辑的html文件时，样式编辑方法利用开发工具对html文件进行监听，并生成相应的css声明文件。样式编辑方法具体包括如下步骤。33.步骤s102，当利用开发工具创建html文件时，提供css声明模板。当开发人员利用开发工具创建html文件时，开发工具提供css声明模板。其中，css声明模板为预先设定好的模板文件。css声明模板包括若干原子类以及每个原子类相关的预设css属性。css声明模板包含了所有预设css属性的原子类。开发人员可以参照css声明模板中的原子类，对html文件进行编辑。34.预设css属性为现有层叠样式表(cascadingstylesheets，css)囊括的所有属性。在本实施例中，从实现效果的角度预先将所有属性划分为若干大类。其中，实现效果的角度包括但不限于实现布局、实现文本渲染等角度。大类包括但不限于布局(layout)、弹性盒子和网格(flexboxandgrid)、间距(spacing)、大小(sizing)、版面设计(typography)、背景(backgrounds)、边框(borders)、效果(effects)、滤镜(filters)、表格(tables)、变换(transforms)、过渡和动画(transitionsandanimations)、交互(interactivity)等。其中，每一预设css属性与一个大类相对应。即是说，所有大类包括的所有预设css属性覆盖现有层叠样式表囊括的所有属性。35.预设css属性包括属性值，属性值用于表示预设css属性的效果。所有预设css属性中，部分预设css属性的属性值采用数值的形式进行表示，即属性值为数值型；部分预设css属性的属性值采用文字的形式进行表示，即属性值为非数值型。36.举例来说，用于表示文本对齐(text-align)的预设css属性包括四个，四个预设css属性的属性值分别为：左对齐(left)、居中对齐(center)、右对齐(right)、两端对齐(justified)。相应地，预设css属性分别为text-align-left、text-align-center、text-align-right、text-align-justified。用于表示行距(leading)的预设css属性包括若干个，预设css属性的属性值以像素的形式进行表示，若干个预设css属性的属性值包括多个，如8px、12px、15px等。相应地，预设css属性分别为leading-8px、leading-12px、leading-15px。因此，用于表示文本对齐的预设css属性的属性值为数值型，用于表示行距的预设css属性的属性值为非数值型。37.若干原子类包括第一原子类集合和第二原子类集合，第一原子类集合中每一原子类相关的预设css属性为多条，第二原子类中每一原子类相关的预设css属性为一条。具体地，第一原子类集合中的每一原子类相关的预设css属性的属性值为数值型。第二原子类集合中的每一原子类相关的预设css属性的属性值为非数值型。38.可以理解的是，预先设定css声明模板时，可以根据预设css属性的属性值对预设css属性进行分类，并自定义用于表示样式的原子类。当预设css属性的属性值为数值型时，将属性值连续的多个预设css属性与同一原子类相关联；当预设css属性的属性值不是数值型时，将一个预设css属性与一个原子类一一关联。39.举例来说，用于表示文本对齐(text-align)的预设css属性的属性值为非数值型，将每一预设css属性均与一个原子类相关联，则用于表示文本对齐的原子类包括四个，分别对应的预设css属性为：text-align-left、text-align-center、text-align-right、text-align-justified。40.当预设css属性的属性值为数值型时，用于表示同一样式的预设css属性的数量较多，若直接将每一预设css属性均与一个原子类相关联，则会导致原子类的数量较多，不利于降低css声明模板的代码量。因此，将属性值连续的多个预设css属性与同一原子类相关联。其中，预设像素值可以为4px。举例来说，用于表示行距(leading)的预设css属性的属性值以像素的形式进行表示，属性值分别与0px至任意数值相对应。若预设像素值为4px，则将属性值连续的四个预设css属性与同一原子类相关联。即，将leading-0px、leading-1px、leading-2px以及leading-3px四个预设css属性与同一原子类相关联；将leading-4px、leading-5px、leading-6px以及leading-7px四个预设css属性与同一原子类相关联；将leading-8px、leading-9px、leading-10px以及leading-11px四个预设css属性与同一原子类相关联，并以此类推将预设css属性与原子类进行关联。41.在一些可行的实施例中，预设像素值可以为3px、5px或者其它数值，预设像素值也可以根据实际情况进行设置，在此不做限定。42.在另一些可行的实施例中，若数值型属性值以其它形式进行表示时，可以按照其它形式的预设值将属性值连续的多个预设css属性与同一原子类相关联。43.在本实施例中，第一原子类集合中的原子类包括若干子原子类集合，若干子原子类集合中的每个原子类的名称包括标识字段和等级字段。第二原子类集合中的每一原子类的名称仅包括标识字段。其中，一部分若干原子类的标识字段用相关的预设css属性的名称表示，等级字段对应相关的预设css属性的属性值范围；另一部分若干原子类的标识字段用相关的预设css属性的属性值表示。即是说，子原子类集合中的原子类名称的标识字段用相关的预设css属性的名称表示，等级字段对应相关的预设css属性的属性值范围。第二原子类集合中的每一原子类名称的标识字段用相关的预设css属性的属性值表示。44.举例来说，第一原子类集合中的某一子原子类集合中，原子类的名称分别为leading-1、leading-2、leading-3。其中，leading为标识字段，1、2、3为等级字段。可以理解的是，同一子原子类集合中所有原子类的标识字段相同，原子类的名称采用键值对的方式表示。相应地，与该子原子类集合中所有原子类相关的预设css属性用于表示行距(leading)。用于表示行距(leading)的预设css属性包括leading-0px、leading-1px、leading-2px、leading-3px、leading-4px、leading-5px、leading-6px、leading-7px、leading-8px、leading-9px、leading-10px以及leading-11px。其中，预设css属性的名称均为leading，属性值范围包括0-3px、4-7px、8-11px。可以理解的是，等级字段1与属性值范围0-3px相对应，等级字段2与属性值范围4-7px相对应，等级字段3与属性值范围8-11px相对应。45.举例来说，第二原子类集合中某些原子类的名称分别为left、center、right、justified。其中，标识字段包括left、center、right、justified。即是说，原子类的标识字段用表示文本对齐(text-align)的预设css属性的属性值表示。46.在本实施例中，若干原子类中每个原子类相关的预设css属性是固定的。47.步骤s104，响应用户的输入触发生成html文件。其中，html文件中包含与页面的dom(文件对象模型，documentobjectmodel)元素相对应的标签。html文件通过标签定义class的值。标签中的class值为若干原子类中一者的名称或者多者的名称组合。48.开发人员可以根据实际页面版式需求直接参照css声明模板中的原子类在html文件中输入相应的原子类。可以理解的是，一旦css声明模板中的原子类自定义好之后，所有的开发人员都可以直接参照自定义好的原子类编辑html文件，无需每次在编辑html文件之前都重复对预设css属性对应的原子类进行自定义。49.举例来说，开发人员在html文件中输入的语句为：《pclass＝"left"》soistartedtowalkintothewater...《/p》。其中，《p》为与dom元素相对应的标签，标签中class值为left，即class值为一个原子类的名称。50.步骤s106，监听html文件并当监听到class值发生变化时，根据class值生成包含class值对应的原子类的样式表以作为html文件所引用的css声明文件。可以理解的是，css声明文件中的原子类为html文件中包含的原子类。即，css声明文件中的原子类与html文件包含的原子类相对应。在本实施例中，监听每一html文件，并为每一html文件都生成对应的css声明文件，即，每一html文件均对应一个css声明文件。其中，css声明文件中原子类的数量少于css声明模板中原子类的数量。51.在本实施例中，class值的变化包括但不限于增加、修改、删除等。举例来说，html文件中原有的语句为：《divclass＝"shadow-smbg-whiterounded-lg"》shadow-sm《/div》。该html文件通过《div》标签定义class值为shadow-sm、bg-white、rounded-lg，即class值为三个原子类的名称组合。则页面中相应生成的dom元素包括背景白色、圆角、边缘带阴影的边框。当需要替换背景色时，开发人员只需要把html文件中的bg-white修改为对应的背景色即可。如，将背景色修改为红色，则将bg-white修改为bg-red。当需要加重阴影效果时，开发人员只需要将shadow-sm调整为shadow-lg。当不需要圆角效果时，开发人员只需要删除rounded-lg即可。上述操作都将改变class值，则css声明文件中的原子类也会相应改变。52.上述实施例中，开发人员可以对所有预设css属性的属性值进行判断，根据属性值是否为数值型将预设css属性划分为两类，并根据划分好的预设css属性形成css声明模板。其中，由于数值型属性值的预设css属性的数量较多，因此，将属性值连续的多个预设css属性与同一原子类相关联。通过原子类实现具有数值的样式指令，能够有效减少数值型属性值的预设css属性的数量。同时，将非数值型属性值的预设css属性与原子类一一对应关联，原子类的名称为相应预设css属性的属性值，能够极大降低css声明模板的代码的复杂度，使得css声明模板的代码为有限原子类的集合，并降低css声明模板的代码的运维成本，有效提升css声明模板的代码的可维护性。53.开发人员参照自定义的原子类编写html文件，由于所有预设css属性的原子类都自定义好了，且原子类具有统一性，能够形成统一的书写规范，从而能够简便、易行、快速地编写样式。同时，也不会出现同样的预设css属性在css声明模板中重复声明，因此能够有效避免多人协作开发样式时发生样式冲突，从而提高网页页面的开发速度，保持页面设计的一致性。当增加页面效果的复杂程度时，css声明模板的代码量都会保持在较小的体积下，不会急剧增多，也能够加快网页页面的渲染速度。当页面越复杂时，效果越明显。54.由于不是每个html文件都需要用到css声明模板中声明的所有原子类，因此，监听html文件中的class值并生成相应的css声明文件，可以极大减少css声明文件中声明的原子类的数量，从而形成一份数量极其有限的css声明文件，有效提升css声明文件代码的可维护性，降低css声明文件代码的运维成本。同时，当html文件中的原子类发生增加、修改、删除等变化时，能够自动更新css声明文件，而不需要修改css声明模板，从而降低css声明模板代码的复杂度。55.请结合参看图2，其为本技术实施例提供的样式编辑系统的内部结构示意图。样式编辑系统20包括存储器21和处理器22。存储器21用于存储程序指令，处理器22用于执行程序指令以实现上述样式编辑方法。56.其中，处理器22在一些实施例中可以是一中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器或其它数据处理芯片，用于运行存储器21中存储的程序指令。57.存储器21至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器21在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘。存储器21在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘、智能存储卡(smartmediacard，smc)、安全数字(securedigital，sd)卡、闪存卡(flashcard)等。进一步地，存储器21还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器21不仅可以用于存储安装于计算机设备的应用软件及各类数据，例如实现样式编辑方法的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。58.请结合参看图3，其为本技术实施例提供的页面显示方法的流程图。页面显示方法用于根据html文件生成相应的目标页面。页面显示方法具体包括如下步骤。59.步骤s302，加载html文件。其中，html文件包含引用的css声明文件的名称。可以理解的是，html文件包含的引用的css声明文件为根据该html文件生成的声明文件。60.步骤s304，根据css声明文件的名称获取css声明文件。其中，css声明文件包括若干原子类以及每个原子类相关的预设css属性。若干原子类包括第一原子类集合和第二原子类集合，第一原子类集合中每一原子类相关的预设css属性为多条；第二原子类中每一原子类相关的预设css属性为一条。61.步骤s306，解析html文件各标签的class值得到相应的原子类。其中，class值为若干原子类中一者的名称或者多者的名称组合。html文件的标签对应目标页面的dom元素。62.步骤s308，根据解析出的原子类名称或者原子类名称组合从css声明文件中调用相对应的原子类对所对应的dom元素进行编辑。63.举例来说，若html文件中的语句包括：《pclass＝"left"》soistartedtowalkintothewater...《/p》，则解析该语句的class值得到的原子类为left。从css声明文件中调用原子类left对标签《p》所对应的dom元素进行编辑。dom元素包括对齐方式为左对齐的文本：“soistartedtowalkintothewater...”。64.步骤s310，显示目标页面。其中，目标页面包括html文件中与所有标签一一对应的dom元素。65.请结合参看图4，其为本技术实施例提供的计算机设备的内部结构示意图。计算机设备10包括存储器11和处理器12。存储器11用于存储程序指令，处理器12用于执行程序指令以实现上述页面显示方法。66.其中，处理器12在一些实施例中可以是一中央处理器(centralprocessingunit，cpu)、控制器、微控制器、微处理器或其它数据处理芯片，用于运行存储器11中存储的程序指令。67.存储器11至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是计算机设备的内部存储单元，例如计算机设备的硬盘。存储器11在另一些实施例中也可以是计算机设备的外部存储设备，例如计算机设备上配备的插接式硬盘、智能存储卡(smartmediacard，smc)、安全数字(securedigital，sd)卡、闪存卡(flashcard)等。进一步地，存储器11还可以既包括计算机设备的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于计算机设备的应用软件及各类数据，例如实现页面显示方法的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。68.显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘且本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。69.以上所列举的仅为本技术较佳实施例而已，当然不能以此来限定本技术之权利范围，因此依本技术权利要求所作的等同变化，仍属于本技术所涵盖的范围。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
