sublime zen coding css和html的快捷操作

这里是一个支持的属性和操作符的列表:

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

下面的解释上部是简写,下部是展现后

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></div>

<div></div>

<div></div>

<div></div>

<div></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></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li><a href=”"></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=”" />

input:t

<input type=”text” name=”" />

input:search

<input type=”search” name=”" />

input:email

<input type=”email” name=”" />

input:url

<input type=”url” name=”" />

input:p

<input type=”password” name=”" />

input:date

<input type=”date” name=”" />

input:datetime

<input type=”datetime” name=”" />

input:month

<input type=”month”<

;/span> name=”" />

input:week

<input type=”week” name=”" />

input:time

<input type=”time” name=”" />

input:number

<input type=”number” name=”" />

input:color

<input type=”color” name=”" />

input:checkbox

<input type=”checkbox” name=”" />

input:c

<input type=”checkbox” name=”" />

input:radio

<input type=”radio” name=”" />

input:r

<input type=”radio” name=”" />

input:f

<input type=”file” name=”" />

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=”" ></select>

option

<option value=”"></option>

textarea

<textarea name=”" 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=”" ></select>

optgroup+

<optgroup><option value=”"></option></optgroup>

optg+

<optgroup><option value=”"></option></optgroup>

empty

<empty></empty>