css突破之路系列1——editplus快速编写css

这里我们将会说到用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