怎么制作css自定义主页风格。

html-css015

怎么制作css自定义主页风格。,第1张

所谓的自定义css风格,我知道的有两种方法,

第一种就是制作几种css风格,然后可以让用户选择,当他选择其中一种后,在页面内调用那种css,然后刷新页面,将该css名称储存至cookie中,这样下次登录的时候还是上次选择的那种。

还一种就是用户通过表单来自定义css中的细节,然后提交表单后,由后台程序生成一个自定义的css样式,那个页面就会调用这个生成的css,用户数据可以保存至cookie中,也可以保存至数据库中,方便下次调用。

其实两种方法只是实现起来不同,本质是一样的。

CSS即层叠样式表(Cascading Style Sheets),是一种用来表现HTML或XML等文件样式的计算机语言。

CSS样式主要包含以下三种类型:

1、行内样式(内嵌样式):结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中。

例:<标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记>

2、内部样式(内联样式):写在HTML页面内部,存放于head标记当中,样式写在style标记内。

例:<style>选择器 {属性名:属性值;属性名:属性值;......}</style>

3、外部样式(外联样式):写在css文件内。

例:<link type="text/css" rel="stylesheet" href="css/main.css" />

扩展资料:

使用CSS样式的优点:

CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大,并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML或XML文件中移出,并将它们保留在一个样式表中有诸多优点,如降低文件大小、节省网络带宽以及易于维护等。

此外,站点的表现信息和核心内容相分离,使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。

CSS简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。

只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。这就避免了一个个网页的修改,大大减少了工作量。

参考资料来源:百度百科-CSS

学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事。同时也会避免网页在不同浏览器之间的差异。于是又开始学习了XHTML代码,并且不断的去摸索着XHTML的结构的特点。会写CSS了,也懂得XHTML结构的重要性并能灵活应用的时候,是不是就可以了呢。也许这时我们就会发现其实样式的管理同样非常的重要。

大家也许都已经有了自己的管理方式,因为所要应用的网页类型的不同可能管理的思路也不一样,这里我只是把我的样式管理做一个整理。算是给大家提供一个可以参考与研究的范例,给对于没有形成自己的管理方式的朋友们提供一个参照范本。

我的样式管理是针对于单一项目、单一的风格体系的网站,一般这样的网站都是中小型的网站,风格是上一致的。对于大型网站,或是风格差异很大的'网站体系是不适用的。我们在做样式之前首先要想到样式的易维护性。一旦需要修改就必需要快速方便,修改工作的成本是很高的,所以我们要尽量避免这样的工作所占用时间的扩大。那我们就有必要把样式与结构代码分开。下面看一下我的目录分配方法:

其中,[images] 是存放xHTML中出现的图片,[jonStyle]我统称之为主题包,在样式包中包括了[CSS]、[img]、[js]分别存放CSS样式表、样式表中所引用的图片、网页中所用的JS。这里存放图片的[img]与外面的[images]虽然都是存放图片的,但是这里的图片的性质却是不一样的。[img]是CSS中所引用的图片,所有的图片的显示与否都与CSS样式有关,他的归属性是,[img]里的图片是归属于CSS的,而不是XHTML的。而CSS是不会引用[images]中的图片。[images]中的图片只归属于xHTML,xHTML也不要直接使用[img]中的图片。

这里把[js]也放在了[jonStyle]文件夹中也许会有人觉得不妥,我的考虑是这样的:行为与样式本都是使得这个XHTML的结构能多姿多彩。当我们需要更换皮肤的时候,也有可通这个行为也是需要更换的。比如:在第一套方案中,某个区块的内容是要上下滚动的,然而在第二套方案中,这个区块就需要左右滚动。那么这个行为也需要与样工一起更换。当然实际应用的时候不一定是这么简单理由。

基本上大的结构是这这样的。那么样式表的结构又是怎么样的呢?我是这样来划分的:样式包中有一个base.css(基本共用样式)module.css(模块样式)forms.css (表单样式)mend.css(补丁样式)print.css(打印样式)

其中base.css是一个基本的样式,也就是所有网页的共性样式,这个样式与module.css配合基本上可以显示正常的页面。表单的划分,也可以有利于对不同地方的表单的样式管理。WEB标准涉及兼容性,所以需要有样式补丁当然还有针对性的这里就不一一列举。最后一个的打印样式,是提供给打印设置使用的。

我通过这样的划分,在对于维护与网站的样工更新上,就显得非常的容易,基本上可以在不需要程序人员的参与下就可以完成对网站的皮肤的更换。如果一个网站同时具备很多个主题包,那么只要简单的在XHTML中更换主题包的名称就可以使用不同的样式。这与网站的程序相配合将可以做出非常好的,具有很强扩展性的应用网站来!