css 缩写: 浅谈css代码的简化缩写

现在很多人所用的CSS代码都很冗赘,其实很多都可以简化缩写的。
这次就根据自己所知道的来跟大家谈谈有关CSS代码的简化缩写问题。
 
1、所有CSS代码只要用一个style标记就可以了,没必要每段都加一个,简直是多余。例如: 
body{background:url("") repeat fixed!important;}
 
.bodybg{background:url("") no repeat no scroll!important;}
 
可以简化合并为:
 
body{background:url("") repeat fixed!important;}
.bodybg{background:url("") no repeat no scroll!important;}
 
像更改博客各部分背景,更改博客各部分字体颜色,更改模版宽度,鼠标,滚动条等CSS代码都可以合并到一个style标记里。
2、颜色:16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
 
黑色#000000可以缩写为#000;
白色#ffffff可以缩写为#fff;
红色#ff0000可以缩写为#f00;
蓝色#0000ff可以缩写为#00f;
#336699可以缩写为#369。
 
一些常见常用的颜色比如黑色,白色,红色,蓝色,绿色,黄色等如果大家记不住其代码的话可以用相应的英语black,white,red,blue,green,yellow等来表示。
3、对同一个标识进行多属性控制的时候可以把几个属性放在一个大括号里,不同属性中间用分号隔开。例如大背景和滚动条:
 
body {background:url("") repeat fixed!important;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}
 
可以简化合并为:
 
body {background:url("") repeat fixed!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}
4、对多标识进行相同属性控制的时候也可以合并在一起,各标识间用逗号隔开。例如:
.bodytop{background:#transparent;}
.bodybg{background:#transparent;}
 
可以简化合并为:
 
.bodytop,.bodybg{background:#transparent;}
.bodytop{display:none;}
.bodyBottom{display:none;}
 
可以简化合并为:
 
.bodytop,.bodyBottom{display:none;}
.feeds .text a{color:#000;}
.feeds .function a{color:#000;} 
可以简化合并为: .feeds .text a,.feeds .function a{color:#000} 举这么多例子只是为了让大家更清楚明了一点,具体大家得根据自己的情况来简化缩写代码。 像现在很多人博客上发的首页透明模版的代码: .logo{background:#transparent}.banner{background:#transparent}.menu{background:#transparent}.bodyBg{background:#transparent}.bodyBottom{background:#transparent}.feeds .up{background:#transparent}.feeds .down{background:#transparent}.feeds .function{background:#transparent}.feeds .page{background:#transparent}.links .up{background:#transparent}.links .down{background:#transparent}.links .mid{background:#transparent}.photo .mid{background:#transparent}.label .mid{background:#transparent}. 本文链接http://www.cxybl.com/html/wyzz/CSS/20130904/40043.html

时间: 2024-09-13 03:15:20

css 缩写: 浅谈css代码的简化缩写的相关文章

浅谈CSS对SEO的影响:细节关注成败

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 "CSS对于SEO的影响到底有多大"有一天在群里和大家讨论的时候,我提出这个问题,我原来的打算是他们在我不是很完善的思路上给予补充,可是却 惊讶的发现很多人的观点是:CSS对于SEO有什么影响?没有啊..我觉的影响SEO的HTML代码才对,甚至有人直接否认这个论点.以下我说说我对CSS影响SEO的解释,大家可以继续探讨此论

安全专家浅谈恶意代码的研究分析(1)

[51CTO.com 专家特稿]国外著名的某安全公司指出:2007年互联网上传播的有记载的新型恶意程序(包括病毒,蠕虫,木马等)数目达2,227,415个,同2006年的结果(535,131个)相比翻升了四倍,恶意软件总数量达到354GB.许多反病毒专家 认为这些恶意软件的急速增加已经达到了一种很极 端的情况.恶意软件的 快速发展.广泛传播,以及新型化. 复杂化,使得展示出更强的破坏性和更多样的传播方式.2008年安全公司对于恶意软件的分析研究也将面临更大的挑战.叶子在本篇文章中将带领大家初步了

浅谈CSS编程的OOCSS和SMACSS设计模式

真心觉得写出 CSS 并不难,但是要写出可被维护的 CSS 比其他程式语言都还难.所幸已经有许多大师级的人物,提出许多设计模式和思维,借由站在巨人的肩膀上可以让事情事半功倍.这篇文章就来说说 OOCSS.SMACSS 和撰写 CSS 时应该注意的规范. (本文的例子用的是 SCSS 语法) OOCSS OOCSS 不是什么新技术,只是一种撰写 CSS 的设计模式,或者可以说是一种「道德规范」,大致上我觉得重点只有两个: 减少对 HTML 结构的依赖 增加 CSS class 重复性的使用 减少对

入门者来看:浅谈CSS和XHTML及Web标准

css|web|web标准|xhtml 这里简单介绍一下CSS和XHTML 当然也要谈到WEB标准设计 网站标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM).ECMAScript等.这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECM

网页制作知识:浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

DIV CSS制作网页之浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

浅谈CSS在IE6、7、8中的差别

CSS在Internet Explorer 6, 7 和8中的差别,相信对你有所帮助. 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额.在网站开发社区,这个数字要小很多,统计显示大概只有40%. 这些统计中比较有趣的部分是,IE6.IE7.IE8之间的数值很接近,这防止了单个Microsoft的浏览器占居统治地位--与过去的情况相反.根据这些令人遗憾的统计结果,在为客户

浅谈CSS编码与组织技巧

如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你的样式表就组织清晰了,随写

段正淳的css笔记(6)-浅谈css框架开发

个人总结了在开发css框架中的一点经验,献丑了.希望大家的讨论能使我们共同进步.:) 1.css框架 中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等--前端开发工程师的职位也诞生了.近几年在web开发中,有个非常火的词--"框架".YUI.JQuery.Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器.为什么呢?因为框架是包含工具.函数库.约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序