主頁 > 知識庫 > Zen Coding css,html縮寫替換大觀 快速寫出html,css

Zen Coding css,html縮寫替換大觀 快速寫出html,css

熱門標(biāo)簽:常州電話外呼系統(tǒng)招商 洛陽防封卡外呼系統(tǒng)廠家 南通電銷外呼系統(tǒng)軟件 申請400電話移動 山東電銷機(jī)器人軟件 成都企業(yè)外呼系統(tǒng) 廣州防封電銷機(jī)器人廠家 上海400電話辦理到易號網(wǎng) 智能語音電銷機(jī)器人客戶端
閱讀本文,先仔細(xì)閱讀網(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ā)上來,并對替換的代碼做簡單的解釋說明。

剛開始肯定有點(diǎn)不習(xí)慣,這結(jié)構(gòu)還得一邊寫一邊思考。但是習(xí)慣后,感覺是非常的便利,可以用“神速”兩個字來概括書寫時的心情。

至于其它心得體會,本人在使用后會慢慢發(fā)出來,以供借鑒。

zen特點(diǎn)是向css選擇器進(jìn)行了深刻的模仿。jquery選擇器也是跟css選擇符學(xué)習(xí)的,所以熟悉這二者技術(shù)的人會很快上手。其它詳細(xì)信息關(guān)注來源網(wǎng)站。

其中html標(biāo)簽替換學(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ū)分,這次的變化,也將擴(kuò)展快捷鍵改為alt+s,因為本人平常QQ發(fā)消息是這兩個鍵,比較習(xí)慣,ctlr + enter,左手ctrl 右手enter結(jié)合太麻煩,右手ctrl + enter完成時間過長,只好左手完成了。先將經(jīng)驗分享如下,單字母開始為原始元素,下一行為zen擴(kuò)展輸出后元素,依次類推:
在原來zen中css屬性與屬性值是取首字母冒號然后屬性值,我對其寫法進(jìn)行了簡化。對常用的屬性進(jìn)行了縮寫。比如
復(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;

其它c(diǎn)ss類:
復(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)下前臺可以接受的工具里邊是比較強(qiáng)悍的,還有另外一個特點(diǎn),就是與Firefox中的firebug結(jié)合,斷點(diǎn)跟蹤程序執(zhí)行流程,即時查看變量的值,是非常不錯的。

3. 現(xiàn)下的推薦的最強(qiáng)悍的理由就是與zen coding結(jié)合,讓你的工作神速如飛。

它的不好之處:

1. 由于工具比較強(qiáng)悍,需要大量的內(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。

您可能感興趣的文章:
  • Zen Coding 快速編寫HTML/CSS代碼的實現(xiàn)
  • php中$美元符號與Zen Coding沖突問題解決方法分享
  • Zen Coding for Dreamweaver v.0.7 快速編寫html插件

標(biāo)簽:混顯 萊蕪 賀州 滄州 貴州 邵陽 廣安 鶴壁

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Zen Coding css,html縮寫替換大觀 快速寫出html,css》,本文關(guān)鍵詞  Zen,Coding,css,html,縮寫,替換,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Zen Coding css,html縮寫替換大觀 快速寫出html,css》相關(guān)的同類信息!
  • 本頁收集關(guān)于Zen Coding css,html縮寫替換大觀 快速寫出html,css的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章