Zen Coding css,html缩写替换大观 快速写出html,css
閱讀本文，先仔細閱讀網(wǎng)站文章。 Zen Coding 快速編寫HTML/CSS代碼的實現(xiàn)
復(fù)制代碼 代碼如下:
E
元素名稱(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用類的元素(div.header, p.error.critial). 你也 可以聯(lián)合使用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 替換展現(xiàn)'api'.
zen coding 是一個俄羅斯人寫的編輯器(支持大部分現(xiàn)下流行的編輯器)插件，其安裝也是非常簡單，只要安裝插件，然后在項目中拷貝js文件就可以。項目發(fā)布時，可刪除js文件。它主要任務(wù)是把前端工程師從繁瑣的html,css結(jié)構(gòu)代碼中解放出來，但是里邊需要記憶的替換簡寫非常多，本著眼觀十遍不如手動一遍的原則，只能邊用邊記。
其中的css替換功能也非常的不錯。但是里邊也有很多冗余無用的替換，本人正在一邊使用一邊修正原來作者定義在實際生產(chǎn)中不合理的替換。
稍后會一并把zen_settings文件發(fā)上來，并對替換的代碼做簡單的解釋說明。
剛開始肯定有點不習(xí)慣，這結(jié)構(gòu)還得一邊寫一邊思考。但是習(xí)慣后，感覺是非常的便利，可以用“神速”兩個字來概括書寫時的心情。
至于其它心得體會，本人在使用后會慢慢發(fā)出來，以供借鑒。
zen特點是向css選擇器進行了深刻的模仿。jquery選擇器也是跟css選擇符學(xué)習(xí)的，所以熟悉這二者技術(shù)的人會很快上手。其它詳細信息關(guān)注來源網(wǎng)站。
其中html標簽替換學(xué)習(xí)--源碼在其包中zen-settings.js，我列出大部分是常用的，還有一些不常用的沒有列出，參考源文件，上一行是手動輸入，下一行是按快捷鍵(alt+E)后zen輸出，環(huán)境為Aptana 2.0.2：
已經(jīng)不存在了，文件不可下載。
此文件2009年度最后一次更新，這次更新的主要內(nèi)容有：
1. width等值后添加單位。
2. 讓常用的縮寫更加人性化。
3. 還有幾個新縮寫的添加。
這兩天對css替換功能做了瘋狂的試驗及完善，對其使用頻率過高的替換做了簡化，對難易記憶的，用重發(fā)音區(qū)分，這次的變化，也將擴展快捷鍵改為alt+s，因為本人平常QQ發(fā)消息是這兩個鍵，比較習(xí)慣，ctlr + enter，左手ctrl 右手enter結(jié)合太麻煩，右手ctrl + enter完成時間過長，只好左手完成了。先將經(jīng)驗分享如下，單字母開始為原始元素，下一行為zen擴展輸出后元素，依次類推：
在原來zen中css屬性與屬性值是取首字母冒號然后屬性值，我對其寫法進行了簡化。對常用的屬性進行了縮寫。比如
復(fù)制代碼 代碼如下:
原來的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類：
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<!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>
更多的
復(fù)制代碼 代碼如下:
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;
復(fù)制單行：ctrl + alt+ pageup
移動單行：alt + pageup
2. js提示是在現(xiàn)下前臺可以接受的工具里邊是比較強悍的，還有另外一個特點，就是與Firefox中的firebug結(jié)合，斷點跟蹤程序執(zhí)行流程，即時查看變量的值，是非常不錯的。
3. 現(xiàn)下的推薦的最強悍的理由就是與zen coding結(jié)合，讓你的工作神速如飛。
它的不好之處：
1. 由于工具比較強悍，需要大量的內(nèi)存消耗，但是以現(xiàn)下的硬件價格，2G的內(nèi)存基本可以接受。
2. 雖然現(xiàn)在最新版的2.0.2是純綠色版的，但是安裝之前必須要安裝sun的jdk，這個東西比較頭痛，配置比較多。純前臺人員肯定看的云里霧里的。
3. 內(nèi)置提供的瀏覽方式比較慢，純靜態(tài)頁面，何必那么復(fù)雜，直接本地瀏覽就OK。
注重版權(quán)，轉(zhuǎn)載請注明出處http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。
詳細出處參考：http://www.jb51.net/article/25880.htm
轉(zhuǎn)載于:https://www.cnblogs.com/simadi/p/3143926.html
總結(jié)
以上是生活随笔為你收集整理的Zen Coding css,html缩写替换大观 快速写出html,css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 派生类的XmlSerializer
- 下一篇： 数组删除内容