当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-07

    本文导语:  阅读本文,先仔细阅读网站文章。 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....

阅读本文,先仔细阅读网站文章。 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='/tech-webtech/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#width>p#a>p#a>p*10>p#a
    代码如下:














    ul#a>li.c-$*5+li.0>a.title
    代码如下:










    html:xt
    代码如下:









    aaa



    更多的
    代码如下:

    cc:ie6

    cc:ie

    cc:noie

    aa


    link:css

    a:mail

    meta:utf

    link

    style
    body{}
    script
    //some coding
    script:src

    img

    iframe

    embed

    object

    param

    map

    area

    form

    form:get

    form:post

    label

    input

    input:hidden

    input:h

    input:text

    input:t

    input:search

    input:email

    input:url

    input:p

    input:date

    input:datetime

    input:month

    input:week

    input:time

    input:number

    input:color

    input:checkbox

    input:c

    input:radio

    input:r

    input:f

    input:s

    input:i

    input:reset

    input:button

    input:b

    select

    option

    textarea

    menu:c

    bq

    cap

    optg

    opt

    fst

    leg

    sect

    tarea

    hdr


    ol+



  • ul+



    dl+




    map+

    table+





    tr+



    select

    optgroup+

    optg+

    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。


        
     
     
     
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Zen Load Balancer
  • Zen-Cart-Bitcoin-Payment-Module
  • php中$美元符号与Zen Coding冲突问题解决方法分享
  • 网上商店系统 Zen Cart
  • zen-coding


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3