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類別：

複製程式碼 程式碼如下: div>

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');

borderorder :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#width>p#a>p#a>p*10>p#a

複製程式碼程式碼如下：

ul#a>li.c-$*5 li.0>a.title
複製程式碼 程式碼如下：

• 
  
• 
  
• 
  
• 
  
• 
  

html:xt

複製程式碼程式碼如下： div>

aaa

更多的

複製程式碼程式碼如下：

cc:ie6

cc:ie

cc:noie

aa


link:css

a:mail

meta:utf

連結

樣式
腳本

腳本：src

img

iframe
嵌入

物件

常用的快速鍵修改為：

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。