CN106126733A - 一种更换css样式的方法及系统 - Google Patents

Abstract

本发明公开了一种更换CSS样式的方法，包括：将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；接收用户的更换CSS样式指令；根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；加载所述CSS样式文件；该方法在系统实现一些更换主题样式或换肤的功能的时候，只用重新加载需要改变的CSS样式文件就可以，不用再重新刷新页面，或加载重复的CSS样式，节省用户流量和服务器带宽，减少不必要的数据下载，提高系统的运行和响应速度，并且页面样式的设置也更加多变和灵活；本发明公开了一种更换CSS样式的系统。

Description

一种更换CSS样式的方法及系统

技术领域

本发明涉及计算机技术领域，特别涉及一种更换CSS样式的方法及系统。

背景技术

为了提高用户使用产品时的体验，平时上网时，会看到很多具有换肤功能的网页，如一些导航网站、qq邮箱的切换主题、qq空间切换主题等，甚至到一些客户端软件，操作系统，都具备了切换主题即换肤功能；

但是，现有的换肤功能在更换用户关心的内容时，还需要将其他用户不需要切换的内容也同时进行下载，例如该用户想要更新该主题样式的字体，需要将该主题的其他样式以及新的字体样式都进行下载；这样就会造成用户在换肤时需要重新刷新页面，或加载重复的css样式，增加了不必要的数据下载，是系统的运行和响应时间变长。这样的处理模式会浪费用户流量以及服务器带宽，降低用户体验。因此，如何提高页面换肤的灵活性和多变性，提高系统效率，是本领域技术人员需要解决的技术问题。

发明内容

本发明的目的是提供一种更换CSS样式的方法及系统，更换CSS样式时只用重新加载需要改变的CSS样式文件，不用再重新刷新页面或加载重复的CSS样式，节省用户流量和服务器带宽，减少不必要的数据下载，提高系统的运行和响应速度，并且页面样式的设置也更加多变和灵活。

为解决上述技术问题，本发明提供一种更换CSS样式的方法，包括：

将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

接收用户的更换CSS样式指令；

根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；

加载所述CSS样式文件。

其中，将CSS样式按照类别进行分类，并写入对应的CSS类别文件中，包括：

将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置。

其中，接收用户的更换CSS样式指令，包括：

接收用户更换指令，进入CSS样式页面；

接收用户对CSS样式文件的选择指令。

其中，还包括：

定期对CSS类别文件的类别进行修改；

定期对CSS类别文件中的CSS样式文件进行修改。

本发明还提供一种更换CSS样式的系统，包括：

分类模块，用于将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

接收模块，用于接收用户的更换CSS样式指令；

加载模块，用于根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；加载所述CSS样式文件。

其中，所述分类模块具体为将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置的模块。

其中，所述接收模块包括：

第一接收单元，用于接收用户更换指令，进入CSS样式页面；

第二接收单元，用于接收用户对CSS样式文件的选择指令。

其中，还包括：

修改模块，用于定期对CSS类别文件的类别进行修改；定期对CSS类别文件中的CSS样式文件进行修改。

本发明所提供的更换CSS样式的方法，包括：将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；接收用户的更换CSS样式指令；根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；加载所述CSS样式文件；

可见，该方法将CSS样式进行分类存储，在系统实现一些更换主题样式或换肤的功能的时候，只用重新加载需要改变的CSS类别对应的CSS样式文件就可以完成对该类别的更换，不用再重新刷新页面，或加载重复的CSS样式，节省用户流量和服务器带宽，减少不必要的数据下载，提高系统的运行和响应速度，并且页面样式的设置也更加多变和灵活；本发明还提供了一种更换CSS样式的系统，具有上述有益效果，在此不再赘述。

附图说明

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

图1为本发明实施例所提供的更换CSS样式的方法的流程图；

图2为本发明实施例所提供的更换CSS样式的系统的结构框图。

具体实施方式

本发明的核心是提供一种更换CSS样式的方法及系统，更换CSS样式时只用重新加载需要改变的CSS样式文件，不用再重新刷新页面或加载重复的CSS样式，节省用户流量和服务器带宽，减少不必要的数据下载，提高系统的运行和响应速度，并且页面样式的设置也更加多变和灵活。

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

请参考图1，图1为本发明实施例所提供的更换CSS样式的方法的流程图；该方法可以包括：

S100、将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

其中，现有技术中每次更换主题或者换肤时必须将整个CSS类型进行整体更换，其页面的各种设置是配套进行的，例如粉色公主系，即字体为甜美的幼圆型，颜色为粉色，背景图为城堡等各个类别进行适应性配合，并最终形成一个粉色公主系的皮肤或者主题；但当用户想变成淡蓝色公主系时，需要在皮肤或主题中查找淡蓝色系的，即字体为甜美的幼圆型，颜色为淡蓝色，背景图为城堡等，然后更换所有的内容；这里就会出现其是字体和背景图都不需要进行更换，这样势必会浪费用户的流量及服务器带宽，增加不必要的数据下载，使系统运行和响应时间变慢；且用户不一定可以找得到只改了颜色的皮肤或主题，降低用户体验。

该步骤将CSS样式按类分离设计是对CSS样式进行一定的分类，分类后不同的样式写在不同的CSS文件中。

例如可以对字体、颜色、背景图、界面结构等样式进行一些简单的分类，在实现不同样式主题的时候可以在不同的主题下在实现不同的字体、颜色、背景图和界面结构的样式文件。比如：主题A中的样式文件就可以命名为A_font.css、A_color.css、A_bg.css、A_struct.css；主题B中的样式文件就可以命名为B_font.css、B_color.css、B_bg.css、B_struct.css等主题样式文件。分类的规则和种类的划分细节可以根据实际需要进行制定，这里字体、颜色、背景图、界面结构仅为举例，并不对分类内容进行限定。

进一步，为了方便用户对每一类中的样式文件进行选择，可选的，将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置。

其中，在不同的主题中如有一个选择器title,对于不同主题的_font.css文件只对title这个选择器设置不同的字体，对于不同主题的_color.css文件只对title这个选择器设置不同的颜色，对于不同主题的_bg.css文件只对title这个选择器设置不同的背景图，这样分离出不同的CSS样式。

举例描述：首先分A和B两种主题样式，在两种主题样式中有同样的选择器(.title)。

A主题样式中想要实现的样式：

.title{font-family:Tahoma；color:red；background-color:#00ff00；}

A主题按类分离实现的样式：

A_font.css文件中：

.title{font-family:Tahoma；}

A_color.css文件中：

.title{color:red；}

A_bg.css文件中：

.title{background-color:#00ff00；}

B主题样式中想要实现的样式：

.title{font-family:NSimsun；color:white；background-color:#ff0000；}

B主题按类分离实现的样式：

B_font.css文件中：

.title{font-family:NSimsun；}

B_color.css文件中：

.title{color:white；}

B_bg.css文件中：

.title{background-color:#ff0000；}

这样就对CSS样式进行按类分离了，在不同的主题和分离的文件中对同选择器进行样式设置。

在设置样式的时候，如果一开始界面的样式全部是A样式，如果想换成B样式中文字的颜色，只用重新加载B_color.css文件，也不用设置选择器，B样式中的颜色会覆盖A样式中的颜色。

S110、接收用户的更换CSS样式指令；

其中，该步骤为用户选择需要更换的CSS样式的内容。

具体过程可以是：接收用户更换指令，进入CSS样式页面；接收用户对CSS样式文件的选择指令。

用户确认进行换肤或者主题，即接收到用户的更换指令(如该更换指令可以是点击更换按钮，或选择进入更换页面)；在CSS样式页面中用户可以选择想要更换的CSS内容。

S120、根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；

S130、加载所述CSS样式文件。

其中，根据用户选择的更换的内容确定其对应的后台CSS样式文件，加载CSS样式文件即完成了对指定CSS样式的更换。

下面通过具体例子说明上述过程：

首先用户访问网站页面，加载默认CSS样式文件(主题A样式包括1.css、2.css、3.css、4.css、5.css)，页面加载成功以后将可以看到更换主题或换肤设置按钮或页面，用户点击设置按钮或进入页面，设置对应的主题B样式中的3.css和4.css文件，文件加载成功以后将会覆盖主题A样式中3.css和4.css文件中的样式，主题A样式中的1.css、2.css和5.css文件中的样式继续保留原来的样式。不同主题下的样式可以任意组合搭配，搭配不同的CSS样式分类使样式的搭配更加灵活多变，页面样式更加绚丽。

基于上述技术方案，本发明实施例提供的更换CSS样式的方法，在更换主题或换肤的时候可以只加载对应的CSS文件内容，不用重新加载其他的CSS样式，加载的样式文件内容会覆盖原来对应主题的样式，大大减少重新加载样式文件的大小节省流量和加快加载速度，提高系统的效应速度；且CSS样式按类分离设计也可以加大主题样式设置的灵活性，不在是更换一种样式就字体、颜色、图片、结构一起更换，可以自定义更换哪一种样式，使样式的设置更加灵活多变。

基于上述技术方案，该方法还包括：

定期对CSS类别文件的类别进行修改；

定期对CSS类别文件中的CSS样式文件进行修改。

其中，根据CSS的发展以及用户对于皮肤或者主题更换细节的增多，需要对CSS类别进行增加或者删除或者改动等操作，同样的对于每种类别下的CSS样式也需要进行样式种类的更新，例如增加，删除等。

通过定期的修改操作，可以保证CSS类别及CSS样式可以满足用户的实际需求，增强用户体验。

本发明实施例提供了更换CSS样式的方法，节省用户流量和服务器带宽，减少不必要的数据下载，提高系统的运行和响应速度，并且页面样式的设置也更加多变和灵活。

下面对本发明实施例提供的更换CSS样式的系统进行介绍，下文描述的更换CSS样式的系统与上文描述的更换CSS样式的相互对应参照。

请参考图2，图2为本发明实施例所提供的更换CSS样式的系统的结构框图；该系统可以包括：

分类模块100，用于将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

接收模块200，用于接收用户的更换CSS样式指令；

加载模块300，用于根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；加载所述CSS样式文件。

可选的，所述分类模块100具体为将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置的模块。

可选的，所述接收模块200包括：

第一接收单元，用于接收用户更换指令，进入CSS样式页面；

第二接收单元，用于接收用户对CSS样式文件的选择指令。

基于上述任意技术方案，该系统还包括：

修改模块，用于定期对CSS类别文件的类别进行修改；定期对CSS类别文件中的CSS样式文件进行修改。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本发明所提供的更换CSS样式的方法及系统进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

Claims (8)

1.一种更换CSS样式的方法，其特征在于，包括：

将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

接收用户的更换CSS样式指令；

根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；

加载所述CSS样式文件。

2.如权利要求1所述的更换CSS样式的方法，其特征在于，将CSS样式按照类别进行分类，并写入对应的CSS类别文件中，包括：

将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置。

3.如权利要求2所述的更换CSS样式的方法，其特征在于，接收用户的更换CSS样式指令，包括：

接收用户更换指令，进入CSS样式页面；

接收用户对CSS样式文件的选择指令。

4.如权利要求1至3任一项所述的更换CSS样式的方法，其特征在于，还包括：

定期对CSS类别文件的类别进行修改；

定期对CSS类别文件中的CSS样式文件进行修改。

5.一种更换CSS样式的系统，其特征在于，包括：

分类模块，用于将CSS样式按照类别进行分类，并写入对应的CSS类别文件中；

接收模块，用于接收用户的更换CSS样式指令；

加载模块，用于根据所述更换CSS样式指令从对应的CSS类别文件中确定要更换的CSS样式文件；加载所述CSS样式文件。

6.如权利要求5所述的更换CSS样式的系统，其特征在于，所述分类模块具体为将CSS样式按照类别进行分类，写入对应的CSS类别文件中，并对同一选择器的不同CSS样式进行设置的模块。

7.如权利要求6所述的更换CSS样式的系统，其特征在于，所述接收模块包括：

第一接收单元，用于接收用户更换指令，进入CSS样式页面；

第二接收单元，用于接收用户对CSS样式文件的选择指令。

8.如权利要求5至7任一项所述的更换CSS样式的系统，其特征在于，还包括：

修改模块，用于定期对CSS类别文件的类别进行修改；定期对CSS类别文件中的CSS样式文件进行修改。