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

简介:

文中部分摘要来源:http://www.qianduan.net/zen-coding-a-new-way-to-write-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  

此文件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:;
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
filter:progid:DXImageTransform.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: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"<
;/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

另外是推荐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,如需转载请自行联系原作者


目录
相关文章
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
28 0
|
1天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
[HTML、CSS]知识点
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
8天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
45 6
|
6天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
9 1
|
7天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
7天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!