收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5810|回复: 23

[教程] Zen Coding:css,html缩写替换大观---让你的html,css飞起来

[复制链接]
发表于 2009-12-24 09:45:12 | 显示全部楼层 |阅读模式
格式全部丢失,
有意者见我博客原地址:
http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html

闲话不说,下面正文:

文中部分摘要来源:http://www.qianduan.net/zen-codi ... rite-html-code.html
阅读本文,先仔细阅读上文来源网站文章。本文是在zen使用生产中遇到的问题做一些分享。
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:
本人修改后的zen_setting.js  
下载后后解压
支持zen coding,jQuery,html5
绿色版dreamweaver下载
这两天对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
margin:;
mt
margin-top:;
mr
margin-right:;
ml
margin-left:;
mb
margin-bottom:;
p
padding:;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg:y
background:url() 0 0 repeat-y;
bg:ie
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
b
border:1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d
display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:;
bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index:;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none;
whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c
cursorointer;




html类:
综合类:
div#a+div#b+div.c-$*5+li*10
<div id="a"></div>
<div id="b"></div>
<div class="c-11"></div>
<div class="c-22"></div>
<div class="c-33"></div>
<div class="c-44"></div>
<div class="c-55"></div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>


div#width>p#a>p#a>p*10>p#a




<div id="width">
    <p id="a">
        <p id="a">
            <p>
                <p id="a"></p>
            </p>
            <p>
                <p id="a"></p>
            </p>
        </p>
    </p>
</div>


ul#a>li.c-$*5+li.0>a.title




<ul id="a">
    <li class="c-1"></li>
    <li class="c-2"></li>
    <li class="c-3"></li>
    <li class="c-4"></li>
    <li class="c-5"></li>
    <li class="0"><a href="" class="title"></a></li>
</ul>


html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
    aaa
</body>
</html>
cc:ie6
<!--[if lte IE 6]>
    aa
<![endif]-->
cc:ie
<!--[if IE]>
   
<![endif]-->
cc:noie
<!--[if !IE]><!-->
    aa
<!--<![endif]-->

link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
a:mail
<a href="mailto:jikeytang




@163.com"></a>
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
link
<link rel="stylesheet" href="" />
style
<style type="text/css">body{}</style>
script
<script type="text/javascript">//some coding</script>
script:src
<script type="text/javascript" src="/scripts/zen_settings.js"></script>
img
<img src="/12" alt="" />
iframe
<iframe src="/12.html" frameborder="0"></iframe>
embed
<embed src="" type="" />
object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="" />
input:hidden
<input type="hidden" name="" />
input:h
<input type="hidden" name="" />
input:text
<input type="text" name="" id="" />
input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
input:url
<input type="url" name="" id="" />
input:p
<input type="password" name="" id="" />
input:date
<input type="date" name="" id="" />
input:datetime
<input type="datetime" name="" id="" />
input:month
<input type="month"<




;/span> name="" id="" />
input:week
<input type="week" name="" id="" />
input:time
<input type="time" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox
<input type="checkbox" name="" id="" />
input:c
<input type="checkbox" name="" id="" />
input:radio
<input type="radio" name="" id="" />
input:r
<input type="radio" name="" id="" />
input:f
<input type="file" name="" id="" />
input:s
<input type="submit" value="" />
input:i
<input type="image" src="" alt="" />
input:reset
<input type="reset" value="" />
input:button
<input type="button" value="" />
input:b
<input type="button" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:c
<menu type="context"></menu>
bq
<blockquote></blockquote>
cap
<caption></caption>
optg
<optgroup></optgroup>
opt
<option></option>
fst
<fieldset></fieldset>
leg
<legend></legend>
sect
<section></section>
tarea
<textarea></textarea>
hdr
<header></header>
<!-- expands -->
ol+
<ol>
    <li></li>
</ol>
ul+
<ul>
    <li></li>
</ul>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>
map+
<map name=""><area shape="" coords="" href="" alt="" /></map>
table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
tr+
<tr>
    <td></td>
</tr>
select
<select name="" id=""></select>
optgroup+
<optgroup><option value=""></option></optgroup>
optg+
<optgroup><option value=""></option></optgroup>
empty
<empty></empty>


常用的快捷键修改为:
Wrap with Abbreviation: alt+x
Toggle Comment: alt+1
Match pair:alt+D
Go to Matching Pair:alt+s

注重版权,转载请注明出处。

[[i] 本帖最后由 jikeytang 于 2009-12-24 12:34 编辑 ]
发表于 2009-12-24 09:53:21 | 显示全部楼层
个人觉得这个对一个老手来说没多大用,况且现在的DW等等软件都有自动提示功能
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-24 10:04:12 | 显示全部楼层

回复 2# lywy510 的帖子

自动提示,与快速替换是两个概念。
输入d会出现div的提示,确实不错。
但是zen coding的功能是将
div#a>ul>li*5
会被替换成:
<div id="a">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css:
w 会替换成
width

请您仔细阅读文章后在发表评论。
回复 支持 反对

使用道具 举报

发表于 2009-12-24 10:06:26 | 显示全部楼层
很强大的东西

[[i] 本帖最后由 kfguoguo 于 2009-12-24 10:08 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-12-24 11:17:24 | 显示全部楼层
呵呵  看来我的理解还不深入  
道歉 呵呵
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-24 11:37:54 | 显示全部楼层

回复 5# lywy510 的帖子

呵呵,没关系。
有问题可以提出来,
我只是抛砖引玉。
回复 支持 反对

使用道具 举报

发表于 2009-12-24 11:40:07 | 显示全部楼层
能提高效率的东西都是好东西,得支持一个``~`
烦琐的重复劳动确实需要些工具来抽离,八仙过海各显神通吧```
回复 支持 反对

使用道具 举报

发表于 2009-12-24 11:57:52 | 显示全部楼层
这个还得记忆好多东西。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-24 12:21:01 | 显示全部楼层

回复 8# aksoft 的帖子

如果你是熟悉css,jquery的话,记忆的成本几乎为零。
zen coding的html替换深刻的学习了css选择器的特点,而jquery的选择器也是学习css选择器的。
至于css的替换,使用频繁的属性本人已做了简单的缩写尝试,(修改后的zen_settings.js下载)。zen coding原有的替换原则是属性:属性值,没对大量使用的属性进行简化。
如果你不熟悉css,jquery,那你就从现在起了解吧,路就在脚下,吾将上下而求索矣。。

[[i] 本帖最后由 jikeytang 于 2009-12-24 12:27 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-12-24 12:49:32 | 显示全部楼层
如果是用EmEditor做编辑器,可以使用宏
http://www.emeditor.com/modules/ ... =4223#forumpost4223
真的很方便
回复 支持 反对

使用道具 举报

发表于 2009-12-24 21:46:53 | 显示全部楼层

回复 10# MagicYY 的帖子

em 那个宏是我搞得
在加上这个宏,在双屏下工作如飞
http://www.emeditor.com/modules/ ... d=1312&forum=19
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-25 09:17:16 | 显示全部楼层

回复 10# MagicYY 的帖子

EmEditor这个编辑器真是第一次听说,
与editplus,ue,n++相比起来有什么特点?
能介绍一下吗?
回复 支持 反对

使用道具 举报

发表于 2009-12-25 09:37:44 | 显示全部楼层
在Coda上装了插件用了几个月,HTML还没问题 CSS要记忆的 懒得记
回复 支持 反对

使用道具 举报

发表于 2009-12-25 09:44:45 | 显示全部楼层
其实EditPlus早就实现了这些东西,而且不止HTML与CSS
回复 支持 反对

使用道具 举报

发表于 2009-12-25 09:54:45 | 显示全部楼层
很多都不是很了解,学习了
回复 支持 反对

使用道具 举报

发表于 2009-12-25 22:08:04 | 显示全部楼层
原帖由 [i]jikeytang 于 2009-12-25 09:17 发表
EmEditor这个编辑器真是第一次听说,
与editplus,ue,n++相比起来有什么特点?
能介绍一下吗?

没啥大的区别。
EmEditor优点就是小巧,比editplus速度快。
基本功能都能满足我的需求,比如代码高亮、正则搜索替换、宏之类的,再加上一些插件,完全够用。
各有所好吧,主要是自己已经用习惯了

还有,多谢楼上那位写EmEditor的Zen Coding宏的朋友。
回复 支持 反对

使用道具 举报

发表于 2009-12-26 11:24:27 | 显示全部楼层
看看啊
回复 支持 反对

使用道具 举报

发表于 2010-1-29 17:07:12 | 显示全部楼层
我只想问问zen coding是不是DW的插件???知道的麻烦说一下
回复 支持 反对

使用道具 举报

发表于 2010-1-30 01:12:07 | 显示全部楼层
我DWCS4安装Zen Coding扩展,出现无法更新菜单,将不会安装该扩展,~~这是为什么???
回复 支持 反对

使用道具 举报

发表于 2010-1-30 07:53:46 | 显示全部楼层
以后就形成做机器人,给机器人做事,用机器人做事的三种人了。呵呵 希望国内的老人们用,新手人不要过早接触进去。
回复 支持 反对

使用道具 举报

发表于 2010-1-30 20:04:22 | 显示全部楼层
如果真的有这么好,不妨一试
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-2-3 14:03:13 | 显示全部楼层

回复 18# hemin007 的帖子

可以理解成:zen coding是dw的一个扩展安装包。
具体的东东这里有说明。
http://www.cnblogs.com/jikey/archive/2010/01/29/1659556.html
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-2-3 14:03:52 | 显示全部楼层

回复 19# hemin007 的帖子

肯定是绿色版的吧。
这里有完整版链接,
http://www.cnblogs.com/jikey/archive/2010/01/29/1659556.html
回复 支持 反对

使用道具 举报

发表于 2010-2-3 15:08:38 | 显示全部楼层
又要换个简拼单词来记忆对应上其所代表的解释,不是很赞同。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-1-29 05:59 , Processed in 0.140273 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表