网站导航免费论文 原创论文 论文搜索 作业答案 网学软件 学术大家 资料中心 会员中心 问题解答 定作论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 设计资源 > DIVCSS技术 > 正文
CSS合并共享之CSS优化
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 佚名 来源: 网络 发布时间: 10/08/22

CSS合并共享之CSS优化

CSS 属性选择器合并共享|CSS优化
这里网学主要是讲的CSS代码优化方面来讲解CSS属性的合并。

DIV CSS代码属性合并好处1、节约CSS代码。从而节约CSS代码或CSS文件字节,从而减少客户浏览器下载时间,使网页打开更加快捷。2、维护更方便。CSS属性选择器分组合并,让代码更加简便,维护更加快捷,以改一而同时改几个CSS选择器样式功能。

什么是CSS 属性选择器合并
CSS 属性选择器合并是指让具有相同属性代码选择器,将他们相同代码提取出来然后合并成一个CSS属性选择器,而他们命名以逗号隔开。如下图:
CSS合并共享
 

DIV+CSS合并用法
1、将不同CSS选择器中各个相同代码(相同代码较多可使用,如果相同代码较少去合并反而造成代码臃肿)提取到一个未命名选择器里如"{""}"内。
如下演示代码
CSS代码集
假如以上3个在一个页面里不同地方使用声明的样式选择器内的样式前部分相同,但是唯一(或有点不同),这个时候我们就为了方便以后修改维护及节约代码我们就可以将这3个CSS选择器合并。

2、提取相同样式“border:1px solid #000; height:24px; width:100px; ”并新建一个没有命名的选择器如下代码:
{border:1px solid #000; height:24px; width:100px; }
然后将三个样式命名以小写“逗号”+空格隔开放到各个新建无名选择器前如下:
 

CSS优化后代码
同时将那3个相同提取出来的去掉如下代码:

div css优化后代码
 

这样合并就完成,对比以前的
未优化CSS代码
感觉是否简单多了。

当然CSS代码合并共享选择器,如果CSS代码少不能体现出来,如果代码多复杂将会体现出来他的优势。同时如果一个网站多个页面公用一个CSS样式,要求网站内的背景栏目标题字体颜色、内容背景样式要改变几处将达到整站样式改变,使用此方法将各个不同CSS选择器中样式分别提取出来合并组合成一个新的共享CSS选择器,即可实现改变一处将改变整个如栏目背景、文字样式、颜色等样式,这样将体现CSS优化优越性能。 copyright myeducs.cn 网学

浏览:
版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
湘ICP备09003080号