Emmet 备忘清单

Emmet 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。

Emmet 语法

入门

让我们开始将您的开发提高到光速。

乘法：*

ul>li*5

1
2
3
4
5
6
7
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

孩子: >

nav>ul>li

1
2
3
4
5
<nav>
    <ul>
        <li></li>
    </ul>
</nav>

自定义属性

p[title="Hello world"]

1
<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

1
<td rowspan="2" colspan="3" title=""></td>

[a='value1' b="value2"]

1
<div a="value1" b="value2"></div>

文本: {}

a{Click me}

1
<a href="">Click me</a>

p>{Click }+a{here}+{ 继续}

1
<p>Click <a href="">here</a> 继续</p>

ID 和 CLASS 属性

# header

1
<div id="header"></div>

.title

1
<div class="title"></div>

form#search.wide

1
<form id="search" class="wide"></form>

p.class1.class2.class3

1
<p class="class1 class2 class3"></p>

隐式标签名称

.class

1
<div class="class"></div>

em>.class

1
<em><span class="class"></span></em>

ul>.class

1
2
3
<ul>
    <li class="class"></li>
</ul>

table>.row>.col

1
2
3
4
5
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

兄弟: +

div+p+bq

1
2
3
<div></div>
<p></p>
<blockquote></blockquote>

$

ul>li.item$*3

1
2
3
4
5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

h$[title=item$]{Header $}*3

1
2
3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$$$*3

1
2
3
4
5
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

ul>li.item$@-*3

1
2
3
4
5
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@2*3

1
2
3
4
5
<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

上一层: ^

div+div>p>span+em^bq

1
2
3
4
5
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^bq

1
2
3
4
5
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组: ()

div>(header>ul>li*2>a)+footer>p

1
2
3
4
5
6
7
8
9
10
11
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*4)+footer>p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

HTML

HTML 1

! 或者 html:5

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

a

1
<a href=""></a>

a:link

1
<a href="http://"></a>

a:mail

1
<a href="mailto:"></a>

abbr

1
<abbr title=""></abbr>

acronym, acr

1
<acronym title=""></acronym>

base

1
<base href="" />

basefont

1
<basefont />

br

1
<br />

frame

1
<frame />

hr

1
<hr />

bdo

1
<bdo dir=""></bdo>

bdo:r

1
<bdo dir="rtl"></bdo>

bdo:l

1
<bdo dir="ltr"></bdo>

col

1
<col />

link

1
<link rel="stylesheet" href="" />

link:css

1
<link rel="stylesheet" href="style.css" />

link:print

1
<link rel="stylesheet" href="print.css" media="print" />

link:favicon

1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

1
<link rel="apple-touch-icon" href="favicon.png" />

link:rss

1
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

1
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im

1
<link rel="import" href="component.html" />

meta

1
<meta />

meta:utf

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

1
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

1
<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

1
<style></style>

script

1
<script></script>

script:src

1
<script src=""></script>

img

1
<img src="" alt="" />

img:srcset, img:s

1
<img srcset="" src="" alt="" />

img:sizes, img:z

1
<img sizes="" srcset="" src="" alt="" />

picture

1
<picture></picture>

source, src

1
<source />

source:src, src:sc

1
<source src="" type="" />

source:srcset, src:s

1
<source srcset="" />

source:media, src:m

1
<source media="(min-width: )" srcset="" />

source:type, src:t

1
<source srcset="" type="image/" />

source:sizes, src:z

1
<source sizes="" srcset="" />

source:media:type, src:mt

1
<source media="(min-width: )" srcset="" type="image/" />

source:media:sizes, src:mz

1
<source media="(min-width: )" sizes="" srcset="" />

source:sizes:type, src:zt

1
<source sizes="" srcset="" type="image/" />

iframe

1
<iframe src="" frameborder="0"></iframe>

embed

1
<embed src="" type="" />

object

1
<object data="" type=""></object>

param

1
<param name="" value="" />

map

1
<map name=""></map>

area

1
<area shape="" coords="" href="" alt="" />

area:d

1
<area shape="default" href="" alt="" />

area:c

1
<area shape="circle" coords="" href="" alt="" />

area:r

1
<area shape="rect" coords="" href="" alt="" />

area:p

1
<area shape="poly" coords="" href="" alt="" />

form

1
<form action=""></form>

form:get

1
<form action="" method="get"></form>

form:post

1
<form action="" method="post"></form>

label

1
<label for=""></label>

input

1
<input type="text" />

inp

1
<input type="text" name="" id="" />

input:hidden, input:h 别名 input[type=hidden name]

1
<input type="hidden" name="" />

input:text, input:t 别名 inp

1
<input type="text" name="" id="" />

input:search 别名 inp[type=search]

1
<input type="search" name="" id="" />

input:email 别名 inp[type=email]

1
<input type="email" name="" id="" />

HTML 2

input:url 别名 inp[type=url]

1
<input type="url" name="" id="" />

input:password, input:p 别名 inp[type=password]

1
<input type="password" name="" id="" />

input:datetime 别名 inp[type=datetime]

1
<input type="datetime" name="" id="" />

input:date 别名 inp[type=date]

1
<input type="date" name="" id="" />

input:datetime-local 别名 inp[type=datetime-local]

1
<input type="datetime-local" name="" id="" />

input:month 别名 inp[type=month]

1
<input type="month" name="" id="" />

input:week 别名 inp[type=week]

1
<input type="week" name="" id="" />

input:time 别名 inp[type=time]

1
<input type="time" name="" id="" />

input:tel 别名 inp[type=tel]

1
<input type="tel" name="" id="" />

input:number 别名 inp[type=number]

1
<input type="number" name="" id="" />

input:color 别名 inp[type=color]

1
<input type="color" name="" id="" />

input:checkbox, input:c 别名 inp[type=checkbox]

1
<input type="checkbox" name="" id="" />

input:radio, input:r 别名 inp[type=radio]

1
<input type="radio" name="" id="" />

input:range 别名 inp[type=range]

1
<input type="range" name="" id="" />

input:file, input:f 别名 inp[type=file]

1
<input type="file" name="" id="" />

input:submit, input:s

1
<input type="submit" value="" />

input:image, input:i

1
<input type="image" src="" alt="" />

input:button, input:b

1
<input type="button" value="" />

isindex

1
<isindex />

input:reset 别名 input:button[type=reset]

1
<input type="reset" value="" />

select

1
<select name="" id=""></select>

select:disabled, select:d 别名 select[disabled.]

1
<select name="" id="" disabled="disabled"></select>

option, opt

1
<option value=""></option>

textarea

1
<textarea name="" id="" cols="30" rows="10"></textarea>

marquee

1
<marquee behavior="" direction=""></marquee>

menu:context, menu:c 别名 menu[type=context]>

1
<menu type="context"></menu>

menu:toolbar, menu:t 别名 menu[type=toolbar]>

1
<menu type="toolbar"></menu>

video

1
<video src=""></video>

audio

1
<audio src=""></audio>

html:xml

1
<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

1
<keygen />

command

1
<command />

button:submit, button:s, btn:s 别名 button[type=submit]

1
<button type="submit"></button>

button:reset, button:r, btn:r 别名 button[type=reset]

1
<button type="reset"></button>

button:disabled, button:d, btn:d 别名 button[disabled.]

1
<button disabled="disabled"></button>

fieldset:disabled, fieldset:d, fset:d, fst:d 别名 fieldset[disabled.]

1
<fieldset disabled="disabled"></fieldset>

bq 别名 blockquote

1
<blockquote></blockquote>

fig 别名 figure

1
<figure></figure>

figc 别名 figcaption

1
<figcaption></figcaption>

pic 别名 picture

1
<picture></picture>

ifr 别名 iframe

1
<iframe src="" frameborder="0"></iframe>

emb 别名 embed

1
<embed src="" type="" />

obj 别名 object

1
<object data="" type=""></object>

cap 别名 caption

1
<caption></caption>

colg 别名 colgroup

1
<colgroup></colgroup>

fst, fset 别名 fieldset

1
<fieldset></fieldset>

btn 别名 button

1
<button></button>

optg 别名 optgroup

1
<optgroup></optgroup>

tarea 别名 textarea

1
<textarea name="" id="" cols="30" rows="10"></textarea>

leg 别名 legend

1
<legend></legend>

sect 别名 section

1
<section></section>

art 别名 article

1
<article></article>

hdr 别名 header

1
<header></header>

ftr 别名 footer

1
<footer></footer>

adr 别名 address

1
<address></address>

dlg 别名 dialog

1
<dialog></dialog>

str 别名 strong

1
<strong></strong>

prog 别名 progress

1
<progress></progress>

mn 别名 main

1
<main></main>

tem 别名 template

1
<template></template>

datag 别名 datagrid

1
<datagrid></datagrid>

datal 别名 datalist

1
<datalist></datalist>

kg 别名 keygen

1
<keygen />

out 别名 output

1
<output></output>

det 别名 details

1
<details></details>

HTML 3

cmd
Alias of command

1
<command />

doc 别名 html>(head>meta[charset=${charset}]+title{${1:Document}})+body

1
2
3
4
5
6
7
8
9
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doc4 别名 html>(head>meta[http-equiv=”Content-Type” content=”text/html;charset=${charset}”]+title{${1:Document}})+body

1
2
3
4
5
6
7
8
9
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

ri:dpr, ri:d 别名 img:s

1
<img srcset="" src="" alt="" />

ri:viewport, ri:v 别名 img:z

1
<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a 别名 pic>src:m+img

1
2
3
4
<picture>
    <source media="(min-width: )" srcset="" />
    <img src="" alt="" />
</picture>

ri:type, ri:t 别名 pic>src:t+img

1
2
3
4
<picture>
    <source srcset="" type="image/" />
    <img src="" alt="" />
</picture>

html:4t 别名 !!!4t+doc4[lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:4s 别名 !!!4s+doc4[lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xt 别名 !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!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>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xs 别名 !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xxs 别名 !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:5 别名 !!!+doc[lang=${lang}]

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

ol+ 别名 ol>li

1
2
3
<ol>
    <li></li>
</ol>

ul+ 别名 ul>li

1
2
3
<ul>
    <li></li>
</ul>

dl+ 别名 dl>dt+dd

1
2
3
4
<dl>
    <dt></dt>
    <dd></dd>
</dl>

map+ 别名 map>area

1
2
3
<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

table+ 别名 table>tr>td

1
2
3
4
5
<table>
    <tr>
        <td></td>
    </tr>
</table>

colgroup+, colg+ 别名 colgroup>col

1
2
3
<colgroup>
    <col />
</colgroup>

tr+ 别名 tr>td

1
2
3
<tr>
    <td></td>
</tr>

select+ 别名 select>option

1
2
3
<select name="" id="">
    <option value=""></option>
</select>

optgroup+, optg+ 别名 optgroup>option

1
2
3
<optgroup>
    <option value=""></option>
</optgroup>

pic+ 别名 picture>source:srcset+img

1
2
3
4
<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>

!!!

1
<!DOCTYPE html>

!!!4t

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c

1
<!-- ${child} -->

cc:ie6

1
2
3
<!--[if lte IE 6]>
    ${child}
<![endif]-->

cc:ie

1
2
3
<!--[if IE]>
    ${child}
<![endif]-->

cc:noie

1
2
3
<!--[if !IE]><!-->
    ${child}
<!--<![endif]-->

CSS

视觉格式

:- :-
pos position:relative;
pos:s position:static;
pos:a position:absolute;
pos:r position:relative;
pos:f position:fixed;
t top:;
t:a top:auto;
r right:;
r:a right:auto;
b bottom:;
b:a bottom:auto;
l left:;
l:a left:auto;
z z-index:;
z:a z-index:auto;
fl float:left;
fl:n float:none;
fl:l float:left;
fl:r float:right;
cl clear:both;
cl:n clear:none;
cl:l clear:left;
cl:r clear:right;
cl:b clear:both;
d display:block;
d:n display:none;
d:b display:block;
d:f display:flex;
d:if display:inline-flex;
d:i display:inline;
d:ib display:inline-block;
d:li display:list-item;
d:ri display:run-in;
d:cp display:compact;
d:tb display:table;
d:itb display:inline-table;
d:tbcp display:table-caption;
d:tbcl display:table-column;
d:tbclg display:table-column-group;
d:tbhg display:table-header-group;
d:tbfg display:table-footer-group;
d:tbr display:table-row;
d:tbrg display:table-row-group;
d:tbc display:table-cell;
d:rb display:ruby;
d:rbb display:ruby-base;
d:rbbg display:ruby-base-group;
d:rbt display:ruby-text;
d:rbtg display:ruby-text-group;
v visibility:hidden;
v:v visibility:visible;
v:h visibility:hidden;
v:c visibility:collapse;
ov overflow:hidden;
ov:v overflow:visible;
ov:h overflow:hidden;
ov:s overflow:scroll;
ov:a overflow:auto;
ovx overflow-x:hidden;
ovx:v overflow-x:visible;
ovx:h overflow-x:hidden;
ovx:s overflow-x:scroll;
ovx:a overflow-x:auto;
ovy overflow-y:hidden;
ovy:v overflow-y:visible;
ovy:h overflow-y:hidden;
ovy:s overflow-y:scroll;
ovy:a overflow-y:auto;
ovs overflow-style:scrollbar;
ovs:a overflow-style:auto;
ovs:s overflow-style:scrollbar;
ovs:p overflow-style:panner;
ovs:m overflow-style:move;
ovs:mq overflow-style:marquee;
zoo, zm zoom:1;
cp clip:;
cp:a clip:auto;
cp:r clip:rect(top right bottom left);
rsz resize:;
rsz:n resize:none;
rsz:b resize:both;
rsz:h resize:horizontal;
rsz:v resize:vertical;
cur cursor:${pointer};
cur:a cursor:auto;
cur:d cursor:default;
cur:c cursor:crosshair;
cur:ha cursor:hand;
cur:he cursor:help;
cur:m cursor:move;
cur:p cursor:pointer;
cur:t cursor:text;

边距和填充

:- :-
m margin:;
m:a margin:auto;
mt margin-top:;
mt:a margin-top:auto;
mr margin-right:;
mr:a margin-right:auto;
mb margin-bottom:;
mb:a margin-bottom:auto;
ml margin-left:;
ml:a margin-left:auto;
p padding:;
pt padding-top:;
pr padding-right:;
pb padding-bottom:;
pl padding-left:;

盒子尺寸

:- :-
bxz box-sizing:border-box;
bxz:cb box-sizing:content-box;
bxz:bb box-sizing:border-box;
bxsh box-shadow:inset hoff voff blur color;
bxsh:r box-shadow:inset hoff voff blur spread rgb(0, 0, 0);
bxsh:ra box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
bxsh:n box-shadow:none;
w width:;
w:a width:auto;
h height:;
h:a height:auto;
maw max-width:;
maw:n max-width:none;
mah max-height:;
mah:n max-height:none;
miw min-width:;
mih min-height:;

字体

:- :-
f font:;
f+ font:1em Arial,sans-serif;
fw font-weight:;
fw:n font-weight:normal;
fw:b font-weight:bold;
fw:br font-weight:bolder;
fw:lr font-weight:lighter;
fs font-style:${italic};
fs:n font-style:normal;
fs:i font-style:italic;
fs:o font-style:oblique;
fv font-variant:;
fv:n font-variant:normal;
fv:sc font-variant:small-caps;
fz font-size:;
fza font-size-adjust:;
fza:n font-size-adjust:none;
ff font-family:;
ff:s font-family:serif;
ff:ss font-family:sans-serif;
ff:c font-family:cursive;
ff:f font-family:fantasy;
ff:m font-family:monospace;
ff:a font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
ff:t font-family: “Times New Roman”, Times, Baskerville, Georgia, serif;
ff:v font-family: Verdana, Geneva, sans-serif;
fef font-effect:;
fef:n font-effect:none;
fef:eg font-effect:engrave;
fef:eb font-effect:emboss;
fef:o font-effect:outline;
fem font-emphasize:;
femp font-emphasize-position:;
femp:b font-emphasize-position:before;
femp:a font-emphasize-position:after;
fems font-emphasize-style:;
fems:n font-emphasize-style:none;
fems:ac font-emphasize-style:accent;
fems:dt font-emphasize-style:dot;
fems:c font-emphasize-style:circle;
fems:ds font-emphasize-style:disc;
fsm font-smooth:;
fsm:a font-smooth:auto;
fsm:n font-smooth:never;
fsm:aw font-smooth:always;
fst font-stretch:;
fst:n font-stretch:normal;
fst:uc font-stretch:ultra-condensed;
fst:ec font-stretch:extra-condensed;
fst:c font-stretch:condensed;
fst:sc font-stretch:semi-condensed;
fst:se font-stretch:semi-expanded;
fst:e font-stretch:expanded;
fst:ee font-stretch:extra-expanded;
fst:ue font-stretch:ultra-expanded;

背景

:- :-
bg background:#000;
bg+ background:#fff url() 0 0 no-repeat;
bg:n background:none;
bgc background-color:#fff;
bgc:t background-color:transparent;
bgi background-image:url();
bgi:n background-image:none;
bgr background-repeat:;
bgr:n background-repeat:no-repeat;
bgr:x background-repeat:repeat-x;
bgr:y background-repeat:repeat-y;
bgr:sp background-repeat:space;
bgr:rd background-repeat:round;
bga background-attachment:;
bga:f background-attachment:fixed;
bga:s background-attachment:scroll;
bgp background-position:0 0;
bgpx background-position-x:;
bgpy background-position-y:;
bgbk background-break:;
bgbk:bb background-break:bounding-box;
bgbk:eb background-break:each-box;
bgbk:c background-break:continuous;
bgcp background-clip:padding-box;
bgcp:bb background-clip:border-box;
bgcp:pb background-clip:padding-box;
bgcp:cb background-clip:content-box;
bgcp:nc background-clip:no-clip;
bgo background-origin:;
bgo:pb background-origin:padding-box;
bgo:bb background-origin:border-box;
bgo:cb background-origin:content-box;
bgsz background-size:;
bgsz:a background-size:auto;
bgsz:ct background-size:contain;
bgsz:cv background-size:cover;

Lists

:- :-
lis list-style:;
lis:n list-style:none;
lisp list-style-position:;
lisp:i list-style-position:inside;
lisp:o list-style-position:outside;
list list-style-type:;
list:n list-style-type:none;
list:d list-style-type:disc;
list:c list-style-type:circle;
list:s list-style-type:square;
list:dc list-style-type:decimal;
list:dclz list-style-type:decimal-leading-zero;
list:lr list-style-type:lower-roman;
list:ur list-style-type:upper-roman;
lisi list-style-image:;
lisi:n list-style-image:none;

Tables

:- :-
tbl table-layout:;
tbl:a table-layout:auto;
tbl:f table-layout:fixed;
cps caption-side:;
cps:t caption-side:top;
cps:b caption-side:bottom;
ec empty-cells:;
ec:s empty-cells:show;
ec:h empty-cells:hide;

颜色

:- :-
c color:#000;
c:r color:rgb(0, 0, 0);
c:ra color:rgba(0, 0, 0, .5);
op opacity:;

文本

:- :-
va vertical-align:top;
va:sup vertical-align:super;
va:t vertical-align:top;
va:tt vertical-align:text-top;
va:m vertical-align:middle;
va:bl vertical-align:baseline;
va:b vertical-align:bottom;
va:tb vertical-align:text-bottom;
va:sub vertical-align:sub;
ta text-align:left;
ta:l text-align:left;
ta:c text-align:center;
ta:r text-align:right;
ta:j text-align:justify;
ta-lst text-align-last:;
tal:a text-align-last:auto;
tal:l text-align-last:left;
tal:c text-align-last:center;
tal:r text-align-last:right;
td text-decoration:none;
td:n text-decoration:none;
td:u text-decoration:underline;
td:o text-decoration:overline;
td:l text-decoration:line-through;
te text-emphasis:;
te:n text-emphasis:none;
te:ac text-emphasis:accent;
te:dt text-emphasis:dot;
te:c text-emphasis:circle;
te:ds text-emphasis:disc;
te:b text-emphasis:before;
te:a text-emphasis:after;
th text-height:;
th:a text-height:auto;
th:f text-height:font-size;
th:t text-height:text-size;
th:m text-height:max-size;
ti text-indent:;
ti:- text-indent:-9999px;
tj text-justify:;
tj:a text-justify:auto;
tj:iw text-justify:inter-word;
tj:ii text-justify:inter-ideograph;
tj:ic text-justify:inter-cluster;
tj:d text-justify:distribute;
tj:k text-justify:kashida;
tj:t text-justify:tibetan;
to text-outline:;
to+ text-outline:0 0 #000;
to:n text-outline:none;
tr text-replace:;
tr:n text-replace:none;
tt text-transform:uppercase;
tt:n text-transform:none;
tt:c text-transform:capitalize;
tt:u text-transform:uppercase;
tt:l text-transform:lowercase;
tw text-wrap:;
tw:n text-wrap:normal;
tw:no text-wrap:none;
tw:u text-wrap:unrestricted;
tw:s text-wrap:suppress;
tsh text-shadow:hoff voff blur #000;
tsh:r text-shadow:h v blur rgb(0, 0, 0);
tsh:ra text-shadow:h v blur rgba(0, 0, 0, .5);
tsh+ text-shadow:0 0 0 #000;
tsh:n text-shadow:none;
lh line-height:;
lts letter-spacing:;
lts-n letter-spacing:normal;
whs white-space:;
whs:n white-space:normal;
whs:p white-space:pre;
whs:nw white-space:nowrap;
whs:pw white-space:pre-wrap;
whs:pl white-space:pre-line;
whsc white-space-collapse:;
whsc:n white-space-collapse:normal;
whsc:k white-space-collapse:keep-all;
whsc:l white-space-collapse:loose;
whsc:bs white-space-collapse:break-strict;
whsc:ba white-space-collapse:break-all;
wob word-break:;
wob:n word-break:normal;
wob:k word-break:keep-all;
wob:ba word-break:break-all;
wos word-spacing:;
wow word-wrap:;
wow:nm word-wrap:normal;
wow:n word-wrap:none;
wow:u word-wrap:unrestricted;
wow:s word-wrap:suppress;
wow:b word-wrap:break-word;

Border

:- :-
bd border:;
bd+ border:1px solid #000;
bd:n border:none;
bdbk border-break:close;
bdbk:c border-break:close;
bdcl border-collapse:;
bdcl:c border-collapse:collapse;
bdcl:s border-collapse:separate;
bdc border-color:#000;
bdc:t border-color:transparent;
bdi border-image:url();
bdi:n border-image:none;
bdti border-top-image:url();
bdti:n border-top-image:none;
bdri border-right-image:url();
bdri:n border-right-image:none;
bdbi border-bottom-image:url();
bdbi:n border-bottom-image:none;
bdli border-left-image:url();
bdli:n border-left-image:none;
bdci border-corner-image:url();
bdci:n border-corner-image:none;
bdci:c border-corner-image:continue;
bdtli border-top-left-image:url();
bdtli:n border-top-left-image:none;
bdtli:c border-top-left-image:continue;
bdtri border-top-right-image:url();
bdtri:n border-top-right-image:none;
bdtri:c border-top-right-image:continue;
bdbri border-bottom-right-image:url();
bdbri:n border-bottom-right-image:none;
bdbri:c border-bottom-right-image:continue;
bdbli border-bottom-left-image:url();
bdbli:n border-bottom-left-image:none;
bdbli:c border-bottom-left-image:continue;
bdf border-fit:repeat;
bdf:c border-fit:clip;
bdf:r border-fit:repeat;
bdf:sc border-fit:scale;
bdf:st border-fit:stretch;
bdf:ow border-fit:overwrite;
bdf:of border-fit:overflow;
bdf:sp border-fit:space;
bdlen border-length:;
bdlen:a border-length:auto;
bdsp border-spacing:;
bds border-style:;
bds:n border-style:none;
bds:h border-style:hidden;
bds:dt border-style:dotted;
bds:ds border-style:dashed;
bds:s border-style:solid;
bds:db border-style:double;
bds:dtds border-style:dot-dash;
bds:dtdtds border-style:dot-dot-dash;
bds:w border-style:wave;
bds:g border-style:groove;
bds:r border-style:ridge;
bds:i border-style:inset;
bds:o border-style:outset;
bdw border-width:;
bdt, bt border-top:;
bdt+ border-top:1px solid #000;
bdt:n border-top:none;
bdtw border-top-width:;
bdts border-top-style:;
bdts:n border-top-style:none;
bdtc border-top-color:#000;
bdtc:t border-top-color:transparent;
bdr, br border-right:;
bdr+ border-right:1px solid #000;
bdr:n border-right:none;
bdrw border-right-width:;
bdrst border-right-style:;
bdrst:n border-right-style:none;
bdrc border-right-color:#000;
bdrc:t border-right-color:transparent;
bdb, bb border-bottom:;
bdb+ border-bottom:1px solid #000;
bdb:n border-bottom:none;
bdbw border-bottom-width:;
bdbs border-bottom-style:;
bdbs:n border-bottom-style:none;
bdbc border-bottom-color:#000;
bdbc:t border-bottom-color:transparent;
bdl, bl border-left:;
bdl+ border-left:1px solid #000;
bdl:n border-left:none;
bdlw border-left-width:;
bdls border-left-style:;
bdls:n border-left-style:none;
bdlc border-left-color:#000;
bdlc:t border-left-color:transparent;
bdrs border-radius:;
bdtrrs border-top-right-radius:;
bdtlrs border-top-left-radius:;
bdbrrs border-bottom-right-radius:;
bdblrs border-bottom-left-radius:;

生成的内容

:- :-
cnt content:’’;
cnt:n, ct:n content:normal;
cnt:oq, ct:oq content:open-quote;
cnt:noq, ct:noq content:no-open-quote;
cnt:cq, ct:cq content:close-quote;
cnt:ncq, ct:ncq content:no-close-quote;
cnt:a, ct:a content:attr();
cnt:c, ct:c content:counter();
cnt:cs, ct:cs content:counters();
ct content:;
q quotes:;
q:n quotes:none;
q:ru quotes:’\00AB’ ‘\00BB’ ‘\201E’ ‘\201C’;
q:en quotes:’\201C’ ‘\201D’ ‘\2018’ ‘\2019’;
coi counter-increment:;
cor counter-reset:;

Outline

:- :-
ol outline:;
ol:n outline:none;
olo outline-offset:;
olw outline-width:;
olw:tn outline-width:thin;
olw:m outline-width:medium;
olw:tc outline-width:thick;
ols outline-style:;
ols:n outline-style:none;
ols:dt outline-style:dotted;
ols:ds outline-style:dashed;
ols:s outline-style:solid;
ols:db outline-style:double;
ols:g outline-style:groove;
ols:r outline-style:ridge;
ols:i outline-style:inset;
ols:o outline-style:outset;
olc outline-color:#000;
olc:i outline-color:invert;

Print

:- :-
pgbb page-break-before:;
pgbb:au page-break-before:auto;
pgbb:al page-break-before:always;
pgbb:l page-break-before:left;
pgbb:r page-break-before:right;
pgbi page-break-inside:;
pgbi:au page-break-inside:auto;
pgbi:av page-break-inside:avoid;
pgba page-break-after:;
pgba:au page-break-after:auto;
pgba:al page-break-after:always;
pgba:l page-break-after:left;
pgba:r page-break-after:right;
orp orphans:;
wid widows:;

Others

:- :-
! !important

@f

1
2
3
4
@font-face {
    font-family:;
    src:url(|);
}

@f+

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

@i, @import

1
@import url();

@kf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}

@m, @media

1
2
3
@media screen {
    
}

transform

:- :-
trf transform:;
trf:r transform: rotate(angle);
trf:rx transform: rotateX(angle);
trf:ry transform: rotateY(angle);
trf:rz transform: rotateZ(angle);
trf:sc transform: scale(x, y);
trf:sc3 transform: scale3d(x, y, z);
trf:scx transform: scaleX(x);
trf:scy transform: scaleY(y);
trf:scz transform: scaleZ(z);
trf:skx transform: skewX(angle);
trf:sky transform: skewY(angle);
trf:t transform: translate(x, y);
trf:t3 transform: translate3d(tx, ty, tz);
trf:tx transform: translateX(x);
trf:ty transform: translateY(y);
trf:tz transform: translateZ(z);
trfo transform-origin:;
trfs transform-style:preserve-3d;

Other

:- :-
ac align-content:;
ac:c align-content:center;
ac:fe align-content:flex-end;
ac:fs align-content:flex-start;
ac:s align-content:stretch;
ac:sa align-content:space-around;
ac:sb align-content:space-between;
ai align-items:;
ai:b align-items:baseline;
ai:c align-items:center;
ai:fe align-items:flex-end;
ai:fs align-items:flex-start;
ai:s align-items:stretch;
ap appearance:${none};
as align-self:;
as:a align-self:auto;
as:b align-self:baseline;
as:c align-self:center;
as:fe align-self:flex-end;
as:fs align-self:flex-start;
as:s align-self:stretch;
bfv backface-visibility:;
bfv:h backface-visibility:hidden;
bfv:v backface-visibility:visible;
bg:ie filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’x.png’,sizingMethod=’crop’);
cm /* ${child} */
colm columns:;
colmc column-count:;
colmf column-fill:;
colmg column-gap:;
colmr column-rule:;
colmrc column-rule-color:;
colmrs column-rule-style:;
colmrw column-rule-width:;
colms column-span:;
colmw column-width:;
d:ib+ display: inline-block;
*display: inline;
*zoom: 1;
jc justify-content:;
jc:c justify-content:center;
jc:fe justify-content:flex-end;
jc:fs justify-content:flex-start;
jc:sa justify-content:space-around;
jc:sb justify-content:space-between;
mar max-resolution:res;
mir min-resolution:res;
op+ opacity: ; filter: alpha(opacity=);
op:ie filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
op:ms -ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’;
ord order:;
ori orientation:;
ori:l orientation:landscape;
ori:p orientation:portrait;
tov text-overflow:${ellipsis};
tov:c text-overflow:clip;
tov:e text-overflow:ellipsis;
trs transition:prop time;
trsde transition-delay:time;
trsdu transition-duration:time;
trsp transition-property:prop;
trstf transition-timing-function:tfunc;
us user-select:${none};
wfsm -webkit-font-smoothing:${antialiased};
wfsm:a -webkit-font-smoothing:antialiased;
wfsm:n -webkit-font-smoothing:none;
wfsm:s, wfsm:sa -webkit-font-smoothing:subpixel-antialiased;
wm writing-mode:lr-tb;
wm:btl writing-mode:bt-lr;
wm:btr writing-mode:bt-rl;
wm:lrb writing-mode:lr-bt;
wm:lrt writing-mode:lr-tb;
wm:rlb writing-mode:rl-bt;
wm:rlt writing-mode:rl-tb;
wm:tbl writing-mode:tb-lr;
wm:tbr writing-mode:tb-rl;

animation

:- :-
anim animation:;
anim- animation:name duration timing-function delay iteration-count direction fill-mode;
animdel animation-delay:time;
animdir animation-direction:normal;
animdir:a animation-direction:alternate;
animdir:ar animation-direction:alternate-reverse;
animdir:n animation-direction:normal;
animdir:r animation-direction:reverse;
animdur animation-duration:0s;
animfm animation-fill-mode:both;
animfm:b animation-fill-mode:backwards;
animfm:bt, animfm:bh animation-fill-mode:both;
animfm:f animation-fill-mode:forwards;
animic animation-iteration-count:1;
animic:i animation-iteration-count:infinite;
animn animation-name:none;
animps animation-play-state:running;
animps:p animation-play-state:paused;
animps:r animation-play-state:running;
animtf animation-timing-function:linear;
animtf:cb animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
animtf:e animation-timing-function:ease;
animtf:ei animation-timing-function:ease-in;
animtf:eio animation-timing-function:ease-in-out;
animtf:eo animation-timing-function:ease-out;
animtf:l animation-timing-function:linear;

flex

:- :-
fx flex:;
fxb flex-basis:;
fxd flex-direction:;
fxd:c flex-direction:column;
fxd:cr flex-direction:column-reverse;
fxd:r flex-direction:row;
fxd:rr flex-direction:row-reverse;
fxf flex-flow:;
fxg flex-grow:;
fxsh flex-shrink:;
fxw flex-wrap: ;
fxw:n flex-wrap:nowrap;
fxw:w flex-wrap:wrap;
fxw:wr flex-wrap:wrap-reverse;

XSL

XSL

tmatch, tm

1
<xsl:template match="" mode=""></xsl:template>

tname, tn

1
<xsl:template name=""></xsl:template>

call

1
<xsl:call-template name="" />

ap

1
<xsl:apply-templates select="" mode="" />

api

1
<xsl:apply-imports />

imp

1
<xsl:import href="" />

inc

1
<xsl:include href="" />

ch

1
<xsl:choose></xsl:choose>

xsl:when, wh

1
<xsl:when test=""></xsl:when>

ot

1
<xsl:otherwise></xsl:otherwise>

if

1
<xsl:if test=""></xsl:if>

par

1
<xsl:param name=""></xsl:param>

pare

1
<xsl:param name="" select="" />

var

1
<xsl:variable name=""></xsl:variable>

XSL

vare

1
<xsl:variable name="" select="" />

wp

1
<xsl:with-param name="" select="" />

key

1
<xsl:key name="" match="" use="" />

elem

1
<xsl:element name=""></xsl:element>

attr

1
<xsl:attribute name=""></xsl:attribute>

attrs

1
<xsl:attribute-set name=""></xsl:attribute-set>

cp

1
<xsl:copy select="" />

co

1
<xsl:copy-of select="" />

val

1
<xsl:value-of select="" />

each, for

1
<xsl:for-each select=""></xsl:for-each>

tex

1
<xsl:text></xsl:text>

com

1
<xsl:comment></xsl:comment>

msg

1
<xsl:message terminate="no"></xsl:message>

fall

1
<xsl:fallback></xsl:fallback>

XSL

num

1
<xsl:number value="" />

nam

1
<namespace-alias stylesheet-prefix="" result-prefix="" />

pres

1
<xsl:preserve-space elements="" />

strip

1
<xsl:strip-space elements="" />

proc

1
<xsl:processing-instruction name=""></xsl:processing-instruction>

sort

1
<xsl:sort select="" order="" />

choose+ A别名 xsl:choose>xsl:when+xsl:otherwise

1
2
3
4
<xsl:choose>
    <xsl:when test=""></xsl:when>
    <xsl:otherwise></xsl:otherwise>
</xsl:choose>

xsl 别名 !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{ | }

1
2
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

!!!

1
<?xml version="1.0" encoding="UTF-8"?>

另见