Zen Coding css,html缩写替换大观 快速写出html,css_经验交流
- WBOY原创
- 2016-05-16 12:04:051682浏览
阅读本文，先仔细阅读网站文章。 Zen Coding 快速编写HTML/CSS代码的实现
复制代码 代码如下:
E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也 可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);
zen coding 替换展现'api'.
zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。项目发布时，可删除js文件。它主要任务是把前端工程师从繁琐的html,css结构代码中解放出来，但是里边需要记忆的替换简写非常多，本着眼观十遍不如手动一遍的原则，只能边用边记。
其中的css替换功能也非常的不错。但是里边也有很多冗余无用的替换，本人正在一边使用一边修正原来作者定义在实际生产中不合理的替换。
稍后会一并把zen_settings文件发上来，并对替换的代码做简单的解释说明。
刚开始肯定有点不习惯，这结构还得一边写一边思考。但是习惯后，感觉是非常的便利，可以用“神速”两个字来概括书写时的心情。
至于其它心得体会，本人在使用后会慢慢发出来，以供借鉴。
zen特点是向css选择器进行了深刻的模仿。jquery选择器也是跟css选择符学习的，所以熟悉这二者技术的人会很快上手。其它详细信息关注来源网站。
其中html标签替换学习--源码在其包中zen-settings.js，我列出大部分是常用的，还有一些不常用的没有列出，参考源文件，上一行是手动输入，下一行是按快捷键(alt+E)后zen输出，环境为Aptana 2.0.2：
已经不存在了，文件不可下载。
此文件2009年度最后一次更新，这次更新的主要内容有：
1. width等值后添加单位。
2. 让常用的缩写更加人性化。
3. 还有几个新缩写的添加。
这两天对css替换功能做了疯狂的试验及完善，对其使用频率过高的替换做了简化，对难易记忆的，用重发音区分，这次的变化，也将扩展快捷键改为alt+s，因为本人平常QQ发消息是这两个键，比较习惯，ctlr + enter，左手ctrl 右手enter结合太麻烦，右手ctrl + enter完成时间过长，只好左手完成了。先将经验分享如下，单字母开始为原始元素，下一行为zen扩展输出后元素，依次类推：
在原来zen中css属性与属性值是取首字母冒号然后属性值，我对其写法进行了简化。对常用的属性进行了缩写。比如
复制代码 代码如下:
原来的p是padding，原zen为pos感觉太麻烦，所以缩减为pp，然后是其属性值。
ppa
position:absolute;
ppr
position:relative;
还有类似的：
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display:inline-block;
oh
overflow:hidden;
其它css类：
复制代码 代码如下:
m
边距：;
mt
页边距：;
先生
右边缘:;
ml
左边距：;
mb
margin-bottom:;
填充：；
pt,pr,pb,pl同边距
bg
background:url() 0 0 no-repeat;
背景：n
背景：无；
bg:x
背景:url() 0 0 重复-x;
bg:y
背景:url() 0 0 重复-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
边框：1px实心#000；
bd:n
边框：无；
bdc
边框颜色：#000;
c
颜色：#000;
d
显示：块；
f
字体大小：12px；
h:;
身高：;
w
宽度:;
d:i
显示：内联；
d:b
显示：块；
fl
浮动：左；
fr
浮动：右；
cl
清除：两者；
c：l
清除：左；
c：r
清除：正确；
c：n
清除：无；
t
顶部：;
bt
底部:;
r
右：;
l
左：;
r
右：;
z
z-索引:;
v
可见性：隐藏；
o:h
溢出：隐藏；
动物园
缩放：1；
m：a
边距：0 自动；
ol
大纲：；
q
引用:;
tc
文本对齐：居中；
tl
文本对齐：左；
tr
文本对齐：右；
td
文本装饰：无；
te
文本强调：；
至：n
文本大纲：无；
whs:n
空白：正常；
whs:nw
white-space:nowrap;
wob:k
断字:keep-all;
fz
字体大小：12px；
fw
字体粗细：粗体；
ff
字体系列：;
op
不透明度：;
c:p
光标:指针;
html类：
综合类：div#a+div#b+div.c-$*5+li*10
复制代码 代码如下：
;
div#width>p#a>p#a>p*10>p#a
复制代码代码如下：
ul#a>li.c-$*5+li.0>a.title
复制代码代码如下：
html:xt
复制代码代码如下：
<头>
<标题>
>
<身体>
aaa