Zen Coding css,html缩写替换大观快速写出html,css

187 阅读 0 评论 124 点赞

我是靠谱客的博主想人陪凉面，最近开发中收集的这篇文章主要介绍Zen Coding css,html缩写替换大观快速写出html,css，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

阅读本文，先仔细阅读网站文章。 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 
margin:; 
mt 
margin-top:; 
mr 
margin-right:; 
ml 
margin-left:; 
mb 
margin-bottom:; 

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 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png'); 

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:p 
cursor:pointer; 

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" 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

另外是推荐Aptana工具的理由如下：

1. 快捷键支持非常完善。

比如比较常用的删除单行： ctrl + D;

格式化：ctrl + shift + F;

复制单行：ctrl + alt+ pageup

移动单行：alt + pageup

2. js提示是在现下前台可以接受的工具里边是比较强悍的，还有另外一个特点，就是与Firefox中的firebug结合，断点跟踪程序执行流程，即时查看变量的值，是非常不错的。

3. 现下的推荐的最强悍的理由就是与zen coding结合，让你的工作神速如飞。

它的不好之处：

1. 由于工具比较强悍，需要大量的内存消耗，但是以现下的硬件价格，2G的内存基本可以接受。

2. 虽然现在最新版的2.0.2是纯绿色版的，但是安装之前必须要安装sun的jdk，这个东西比较头痛，配置比较多。纯前台人员肯定看的云里雾里的。

3. 内置提供的浏览方式比较慢，纯静态页面，何必那么复杂，直接本地浏览就OK。

注重版权，转载请注明出处http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。