`
- 浏览:
1003855 次
-
现在很多人所用的CSS代码都很冗赘,其实很多都可以简化缩写的。
这次就根据自己所知道的来跟大家谈谈有关CSS代码的简化缩写问题。
1、所有CSS代码只要用一个style标记就可以了,没必要每段都加一个,简直是多余。例如:
body{background:url("")repeatfixed!important;}
.bodybg{background:url("")norepeatnoscroll!important;}
可以简化合并为:
body{background:url("")repeatfixed!important;}
.bodybg{background:url("")norepeatnoscroll!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("")repeatfixed!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("")repeatfixed!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.texta{color:#000;}
.feeds.functiona{color:#000;}
可以简化合并为:.feeds.texta,.feeds.functiona{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}.calendar.mid{background:#transparent}.callboard.up{background:#transparent}.callboard.down{background:#transparent}.callboard.mid{background:#transparent}.gbook.up{background:#transparent}.gbook.down{background:#transparent}.links.more{background:#transparent}.add.ico{background:#transparent}.add{background:#transparent}其实完全可以缩写为:.logo,.banner,.menu,.bodyBg,.bodyBottom,.feeds.up,.feeds.down,.feeds.function,.feeds.page,.links.up,.links.down,.links.mid,.photo.mid,.label.mid,.calendar.mid,.callboard.up,.callboard.down,.callboard.mid,.gbook.up,.gbook.down,.links.more,.add.ico,.add{background:#transparent}6、背景(backgrounds)背景的属性如下:background-color:#f00;background-image:url("");background-repeat:no-repeat;background-attachment:fixed;background-position:00;可以缩写为一句:background:#f00url("")no-repeatfixed00;语法是:background:colorimagerepeatattachmentposition;7、边框(border)边框的属性如下:border-width:1px;border-style:solid;border-color:#000;可以缩写为一句:border:1pxsolid#000;语法是:border:widthstylecolor;9、字体(fonts)字体的属性如下:font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"LucidaGrande",sans-serif;可以缩写为一句:font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。10、CSS代码不记大小写,换行,空白,只要格式对了就行。CSS缩写对我们做博客好处在于能够简化代码使看的没那么冗赘,而最于做网站却很重要,CSS样式表文件调用的速度跟其文件的大小有关,所以文件越小的话调用速度越快,在某一方面可以提高网站页面的加载速度,而速度是一个网站至关重要的因素。所以做CSS样式表文件的话应尽量缩写简化代码,像一些多余的空格,还有比如我在整体模版六《锁心为你》所提供代码中的加注释等都应尽量删除。下面是CSS缩写性质的列表以及它们所表示的常规性质:Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复Border(边框):边框颜色、边框风格、边框宽度border-bottom(底部边框):底部边框颜色、底部边框样式、底部边框宽度border-left(左侧边框):左侧边框颜色、左侧边框样式、左侧边框宽度border-right(右侧边框):右侧边框颜色、右侧边框样式、右侧边框宽度border-top(顶部边框):顶部边框颜色、顶部边框样式、顶部边框宽度cue(声音提示):前提示、后提示font(字体):字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸list-style(列表样式):列表样式图像、列表样式位置、列表样式类型margin(空白):顶部空白、右侧空白、底部空白、左侧空白outline(大纲):大纲颜色、大纲样式、大纲宽度padding(间隙):顶部间隙、右侧间隙、底部间隙、左侧间隙pause(暂停):后暂停、前暂停附件是一款非常好用的CSS代码编辑器,可以及时显示效果。()
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
eric meyer谈css 示例代码下载,大师的eric meyer谈css示例代码
百度CSS代码百度CSS代码百度CSS代码百度CSS代码百度CSS代码百度CSS代码百度CSS代码百度CSS代码百度CSS代码
HTML+css PPT浅谈.rar
随着互联网的蓬勃发展,信息技术的不断更新,各式各样的网站呈现在大家的眼前。但大部分用HTML做网站的人都曾经遇到过这样的问题:原本在...这是因为在网页文件中没有统一定义字体的大小。若每个文字都单独定义其大小
本篇文章主要介绍了CSS代码重构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合JS.CSS代码集合
svg代码与css代码互相转换,并压缩
css代码添加背景图片常用代码
css文件代码css文件代码css文件代码css文件代码css文件代码css文件代码css文件代码css文件代码css文件代码css文件代码
CSS中是使用4位的数字来表示权重的
JS css代码及教程、JS css代码及教程、JS css代码及教程
压缩工具 网站CSS代码js代码压缩 缩小CSS,js代码文件,加快网站速度
web代码混淆方案.混淆js代码,压缩css代码 什么?右击网页就能看到JS,CSS源代码?!别人抄起来岂不是太容易了? 所以我们要混淆,压缩JS,CSS代码,即防止别人抄走修改,又能节省网络流量
css代码自动生成
学习head first html与css时书上练习的html与css代码 学习head first html与css时书上练习的html与css代码 学习head first html与css时书上练习的html与css代码 学习head first html与css时书上练习的html与css代码 ...
网页CSS简单代码,实现使用CSS代码对网页进行简单布局。
css代码生成器,适用简单,适合长期使用css编写,很好用
css代码初级代码,很适合初学者学习,建议可以详细看一下
CSS规范常见问题的解决方法