这里我们将会说到用editplus来编写css,如果你对css的各个属性了如指掌,又想提高下速度,那么本文将正和你意,当然如果你现在对css属性还不太了解,那我建议你等熟悉了之后再来看。
在介绍editplus之前请允许我先推荐一篇快速编写html的编辑器notepad++,关于使用这个编辑器结合它的插件zen-coding大漠已经说了很好了,所以就不用我再来废话了,详见notepad++结合Zen Coding快速编写HTML代码
第一步:为editplus制作自己的css.acp文件
打开editplus的安装文件,我们就会找到类似以acp结尾的文件,那么acp文件是做什么用的呢,它让editplus可以更好的扩展你自己的配置的自动完成文件。
acp文件有两个特点,一个是以#TITLE开头的表示声明是css,js,还是html等的自动完成,一个是以#T开头的表示简写,后面紧跟所表示的全部代码。
另外就是;代表注释,^!表示指针位置。
下面简写一个css.acp文件以供参考
#TITLE=CSS
; EditPlus Auto-completion file written by marvin.
; This file is provided as a default auto-completion file for CSS.
#T=import
@import url("^!.css");
#T=bo
border:1px solid #^!;
#T=bccc
border:1px solid #ccc;^!
#T=bg
background:url('../images/^!') no-repeat;
#T=bgx
background:url('../images/^!') repeat-x;
#T=minh
min-height:^!px;
height:auto !important;
height:^!;
#T=bra
-moz-border-radius:^!px;
-webkit-border-radius:^!
border-radius:^!
现在我们来简单说下上面代码的意思,第一行#TITLE=CSS,表示申明是css文件的自动完成,紧跟着两个分号后面的内容表示注释,第一行是说这个自动完成文件是我写的,第二是说本自动完成文件用于css
现在到了我们的重点了,那就是#T,#T表示简写,下面换行的内容表示该简写的具体内容。具体说明下,比喻我们想要输出border:1px solid #ccc;这个样式,如果用dw或其他编辑器,那么我们最多只能使用提示来完成,但是如果我们用了editplus这个css.acp文件,也就是按照我 们现在定义个格式,我们可以输出bccc加空格就会出来我们所需要的rder:1px solid #ccc;这个比提示来得快吧。再比喻我们定义最小高度,因为考虑到兼容性我们必须得一下定义三条,如果我们先在acp文件定义好了,现在我们只需要敲下 minh加空格就会得到这三行样式,同理我们可以把这个技巧应用到css3的不同浏览器的前缀上,如boder-radius我们只需敲下bra就可以得 到另外得两个前缀样式。这所有的acp里面的东西都可以是你自己来定义的,如果你还不清楚怎么定义acp文件,那可以百度下,或者找我问下。
第二步:接下来就是如果让我们刚才定义的css.acp文件和我们的css文件挂上钩喽
打开我们的editplus,找到 工具-参数-文件-设置与语法,在这里我们选中我们的文件类型为css,如果你用less的话就把less也写上。然后在下面勾选上我们的自动完成,并配置好我们刚才那个写的css.acp文件路径,如下图。
现在重启我们的editplus,然后打开一个css文件,按照我们acp的那个设置来敲写我们的css吧,享受飞一般的速度。
如需了解更多eidtplus的使用技巧百度,google一下吧,应有尽有!
下面附上我的css.acp以供讨论参考(不是很完善,因为个人的习惯不同,完全可以根据自己的习惯编写一个属于自己的css.acp,那样你也可以运指如飞了):为之css.acp
至于editplus的下载我也附上一个3.14版本editplus 3.14