- 为了便于看清晰,css 的注释部分,不进行注释 (注释的话,会变成灰色)
Emmet 的 CSS 缩写介绍
- 1.视觉格式化 Visual Formatting
- position
- top / bottom / left / right, z-index
- float / clear
- display
- visibility
- overflow
- zoom / clip
- resize
- cursor
- 2.内外边距 Margin & Padding
- 3.盒子尺寸 Box Sizing
- 4.字体 Font
- font / font-weight
- font-style / font-variant
- font-size
- font-family
- font-effect
- font-emphasize
- font-smooth
- font-stretch
- 5.文本 Text
- vertical-align
- text-align / text-align-last
- text-decoration
- text-emphasis
- text-height / text-indent
- text-justify
- text-outline / text-replace
- text-transform
- text-wrap
- text-shadow
- line-height
- white-space
- word-break
- word-spacing / word-wrap
- 6.背景 Background
- background / background-color / background-image
- background-repeat
- background-attachment / background-position
- background-break / background-clip
- background-origin / background-size
- 7.颜色 Color
- 8.生成內容 Generated content
- 9.轮廓 Outline
- 10.Tables
- 11.边框 Border
- border / border-break
- border-collapse / border-color
- border-image
- border-top-image
- border-bottom-image
- border-fit
- border-length / border-spacing
- border-style
- border-width / border-top
- border-right
- border-bottom
- border-left
- border-radius
- 12.列表 Lists
- 13.Print
- 14.其他 Others
1.视觉格式化 Visual Formatting
1.pos = pos-r = pos:r
/*默认值 relative*/
position: relative;
2.pos:s
position: static;
3.pos-a = pos:a
position: absolute;
4.pos-f
position: fixed;
/*上下左右 z-index*/
1.t
top: ;
t:a
top: auto;
2.r
right: ;
r-a
right: auto;
3.b
bottom: ;
b-a
bottom: auto;
4.l
left: ;
l-a
left: auto;
5.z
z-index: ;
z-a
z-index: auto;
float / clear
- float : fl
- clear : cl
- left : l
- right : r
- none : n
- both : b
fl = fl-l
/*默认值 left*/
float: left;
fl-l
float: left;
fl-r
float: right;
fl-n
float: none;
cl
clear: both;
cl-n
clear: none;
cl-l
clear: left;
cl-r
clear: right;
cl-b
clear: both;
d = d-b
/*默认值:block;*/
display: block;
d-b
display: block;
d-n
display: none;
d-i
/*inline,i*/
display: inline;
d-ib
display: inline-block;
d-li
display: list-item;
d-ri
display: run-in;
d-cp
display: compact;
d-tb
/*table缩写 tb*/
display: table;
d-itb
display: inline-table;
d-tbcp = d-tbcap
display: table-caption;
d-tbcl = d-tacol
/*colum 缩写cl*/
display: table-column;
d-tacol
display: table-column;
d-tbclg
display: table-column-group;
d-tbhg
/*header,h group,g*/
display: table-header-group;
d-tbfg
/*footer,f*/
display: table-footer-group;
d-tbr
/*row.r*/
display: table-row;
d-tbrg
display: table-row-group;
d-tbc
display: table-cell;
d-rb
/*ruby,rb*/
display: ruby;
d-rbb
display: ruby-base;
d-rbbg
/*base,b*/
display: ruby-base-group;
d-rbt
/*text,t*/
display: ruby-text;
d-rbtg
display: ruby-text-group;
visibility
- visibility : v
v = v-h
/*默认值 hidden*/
visibility: hidden;
v-h
/*hidden,h*/
visibility: hidden;
v-v
visibility: visible;
v-c
visibility: collapse;
overflow
- overflow : ov
- overflow-x : ovx
- overflow-y : ovy
- overflow-style : ovs
ov = ov-h
/*默認值 hidden*/
overflow: hidden;
ov-h
overflow: hidden;
ov-v
/*visible,v*/
overflow: visible;
ov-s
/*scroll,s*/
overflow: scroll;
ov-a
/*auto,a*/
overflow: auto;
ovx
overflow-x: hidden;
ovx-h
overflow-x: hidden;
ovx-v
overflow-x: visible;
ovx-s
overflow-x: scroll;
ovx-a
overflow-x: auto;
ovy
overflow-y: hidden;
ovy:h
overflow-y: hidden;
ovy-v
overflow-y: visible;
ovy-s
overflow-y: scroll;
ovy-a
overflow-y: auto;
ovs
/*scrollbar,s*/
-ms-overflow-style: scrollbar;
overflow-style: scrollbar;
ovs-s
-ms-overflow-style: scrollbar;
overflow-style: scrollbar;
ovs-a
-ms-overflow-style: auto;
overflow-style: auto;
ovs-p
/*panner,p*/
-ms-overflow-style: panner;
overflow-style: panner;
ovs-m
/*move,m*/
-ms-overflow-style: move;
overflow-style: move;
ovs-mq
/*marquee,mq*/
-ms-overflow-style: marquee;
overflow-style: marquee;
zoom / clip
- zoom : zm
- clip : cp
zoo = zm
zoom: 1;
zm
zoom: 1;
cp
/*clip,cp*/
clip: ;
cp-a
clip: auto;
cp-r
clip: rect(top right bottom left);
resize
- resize : rsz
rsz
/*resize,rsz*/
resize: ;
rsz-n
resize: none;
rsz-b
resize: both;
rsz-h
resize: horizontal;
rsz-v
resize: vertical;
cursor
- cursor : cur
cur
/*cursor ['kɝsɚ],光标*/
cursor: ;
cur-a
cursor: auto;
cur-d
cursor: default;
cur-c
/*crosshair ['krɔ:shɛə] 十字光标*/
cursor: crosshair;
cur-ha
cursor: hand;
cur-he
cursor: help;
cur-m
cursor: move;
cur-p
cursor: pointer;
cur-t
cursor: text;
2.内外边距 Margin & Padding
margin
- margin : m
- margin-top : mt
- margin-right : mr
- margin-bottom : mb
- margin-left : ml
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;
padding
- padding : p
- padding-top : pt
- padding-right : pr
- padding-bottom : pb
- padding-left : pl
p
padding: ;
pt
padding-top: ;
pr
padding-right: ;
pb
padding-bottom: ;
pl
padding-left: ;
3.盒子尺寸 Box Sizing
box-sizing & box-shadow
- box-sizing : bxz
- box-shadow : bxsh
bxz
/*box,bx sizing,z*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bxz-bb
/*border-box,bb*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bxz-cb
/*content-box,cb*/
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
bxsh
/*shadow,sh*/
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
bxsh-r
/*rgb(),r*/
-webkit-box-shadow: inset hoff voff blur spread rgb(0, 0, 0);
box-shadow: inset hoff voff blur spread rgb(0, 0, 0);
bxsh-ra
/*rgba(),ra*/
-webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
bxsh-n
-webkit-box-shadow: none;
box-shadow: none;
宽高 width / height
- width : w
- height ; h
- max-width : maw
- max-height : mah
- min-width : miw
- min-height : mih
w
width: ;
w-a
width: auto;
h
height: ;
h-a
height: auto;
maw
/*max,ma*/
max-width: ;
maw-n
max-width: none;
mah
max-height: ;
mah-n
max-height: none;
miw
/*min,mi*/
min-width: ;
mih
min-height: ;
4.字体 Font
font / font-weight
- font : f
- font-weight : fw
f
font: ;
f+
/*加号 常用组合*/
font: 1em Arial,sans-serif;
fw
font-weight: ;
fw-n
font-weight: normal;
fw-b
font-weight: bold;
fw-br
/*bolder，br*/
font-weight: bolder;
fw-lr
font-weight: lighter;
font-style / font-variant
- font-style : fs
- font-variant : fv
fs
font-style: ;
fs-n
font-style: normal;
fs-i
/*美 [ɪ'tælɪk],n. 斜体字*/
font-style: italic;
fs-o
/*[ə'blik] ,倾斜的*/
font-style: oblique;
fv
font-variant: ;
fv-n
font-variant: normal;
fv-sc
font-variant: small-caps;
font-size
- font-size : fz
- font-size-adjust : fza
fz
font-size: ;
fza
font-size-adjust: ;
fza-n
font-size-adjust: none;
font-family
- font-family : ff
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;
font-effect
- font-effect : fef
fef
font-effect: ;
fef-n
font-effect: none;
fef-eg
font-effect: engrave;
fef-eb
font-effect: emboss;
fef-o
font-effect: outline;
font-emphasize
- font-emphasize : fem
- font-emphasize-position : femp
- font-emphasize-style : fems
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 = fems-dot
font-emphasize-style: dot;
fems-c
font-emphasize-style: circle;
fems-ds = fems-di
font-emphasize-style: disc;
font-smooth
- font-smooth : fsm
fsm
font-smooth: ;
fsm-a
font-smooth: auto;
fsm-n
font-smooth: never;
fsm-aw
font-smooth: always;
font-stretch
- font-stretch : fst
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;
5.文本 Text
vertical-align
- vertical-align : va
va
/* vertical['vɝtɪkl] adj. 垂直的 align [ə'laɪn],排列*/
vertical-align: top;
va-sup
vertical-align: super;
va-t
vertical-align: top;
va-tt
vertical-align: text-top;
va-tb
vertical-align: text-bottom;
va-m
vertical-align: middle;
va-b
vertical-align: bottom;
va-bl
vertical-align: baseline;
va-sub
vertical-align: sub;
text-align / text-align-last
- text-align : ta
- text-align-last : tal
ta
text-align: left;
ta-l
text-align: left;
ta-c
text-align: center;
ta-r
text-align: right;
ta-j
text-align: justify;
tal
-ms-text-align-last: auto;
text-align-last: auto;
tal-a
-ms-text-align-last: auto;
text-align-last: auto;
tal-l
-ms-text-align-last: left;
text-align-last: left;
tal-c
-ms-text-align-last: center;
text-align-last: center;
tal-r
-ms-text-align-last: right;
text-align-last: right;
text-decoration
- text-decoration : td
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;
text-emphasis
- text-emphasis : te
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;
text-height / text-indent
- text-height : th
- text-indent : ti
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;
text-justify
- text-justify : tj
tj
-ms-text-justify: ;
text-justify: ;
tj-a
-ms-text-justify: auto;
text-justify: auto;
tj-iw
-ms-text-justify: inter-word;
text-justify: inter-word;
tj-ii
-ms-text-justify: inter-ideograph;
text-justify: inter-ideograph;
tj-ic
-ms-text-justify: inter-cluster;
text-justify: inter-cluster;
tj-d
-ms-text-justify: distribute;
text-justify: distribute;
tj-k
-ms-text-justify: kashida;
text-justify: kashida;
tj-t
-ms-text-justify: tibetan;
text-justify: tibetan;
text-outline / text-replace
- text-outline : to
- text-replace : tr
to
text-outline: ;
to+
text-outline: 0 0 #000;
to-n
text-outline: none;
tr
text-replace: ;
tr-n
text-replace: none;
text-transform
- text-transform : tt
tt
text-transform: uppercase;
tt-n
text-transform: none;
tt-c
text-transform: capitalize;
tt-u
text-transform: uppercase;
tt-l
text-transform: lowercase;
text-wrap
- text-wrap : tw
tw
text-wrap: ;
tw-n
text-wrap: normal;
tw-no
text-wrap: none;
tw-u
text-wrap: unrestricted;
tw-s
text-wrap: suppress;
text-shadow
- text-shadow :tsh
tsh
text-shadow: hoff voff blur #000;
tsh-r
/*rgb(),r*/
text-shadow: h v blur rgb(0, 0, 0);
tsh-ra
/*rgba(),ra*/
text-shadow: h v blur rgba(0, 0, 0, .5);
tsh+
/*常用模式*/
text-shadow: 0 0 0 #000;
tsh-n
text-shadow: none;
line-height
- line-height :lh
- letter-spacing : lts
lh
line-height: ;
lts
/*letter，lt*/
letter-spacing: ;
white-space
- white-space :whs
- white-space-collapse :whsc
whs
/*white,wh*/
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;
word-break
- word-break :wob
- word : wo
wob
-ms-word-break: ;
word-break: ;
wob-n
-ms-word-break: normal;
word-break: normal;
wob-k
-ms-word-break: keep-all;
word-break: keep-all;
wob-l
/*应该生成下方的代码,在测试的时候,没有生成,
属性值,可以手动输入*/
-ms-word-break: loose;
word-break: loose;
wob-bs
/*应该生成下方的代码,在测试的时候,没有生成,
属性值,可以手动输入*/
-ms-word-break: break-strict;
word-break: break-strict;
wob-ba
-ms-word-break: break-all;
word-break: break-all;
word-spacing / word-wrap
- word-spacing : wos
- word-wrap : wow
wos
/*word,wo*/
word-spacing: ;
wow
/*word,wo wrap,w*/
word-wrap: ;
wow-nm
/*normal,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;
6.背景 Background
background / background-color / background-image
- background : bg
- background-color : bgc
- background-image : bgi
bg
/*background,bg*/
background: #000;
bg+
background: #fff url() 0 0 no-repeat;
bg-n
background: none;
bgc
/*color,c*/
background-color: #fff;
bgc-t
background-color: transparent;
bgi
/*image,i*/
background-image: url();
bgi-n
background-image: none;
background-repeat
- background-repeat : bgr
bgr
/*repeat,r*/
background-repeat: ;
bgr-n
background-repeat: no-repeat;
bgr-x
background-repeat: repeat-x;
bgr-y
background-repeat: repeat-y;
bgr-sp
/*space,sp*/
background-repeat: space;
bgr-rd
/*round,rd*/
background-repeat: round;
background-attachment / background-position
- background-attachment : bga
- background-position : bgp
- background-position-x : bgpx
- background-position-y : bgpy
bga
background-attachment: ;
bga-f
background-attachment: fixed;
bga-s
background-attachment: scroll;
bgp
background-position: 0 0;
bgpx
-ms-background-position-x: ;
background-position-x: ;
bgpy
-ms-background-position-y: ;
background-position-y: ;
background-break / background-clip
- background-break : bgbk
- background-clip : bgcp
bgbk
/*break,bk*/
background-break: ;
bgbk-bb
background-break: bounding-box;
bgbk-eb
background-break: each-box;
bgbk-c
background-break: continuous;
bgcp
/*clip,cp*/
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
bgcp-pb
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
bgcp-bb
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: border-box;
bgcp-cb
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
bgcp-nc
-webkit-background-clip: no-clip;
-moz-background-clip: no-clip;
background-clip: no-clip;
background-origin / background-size
- background-origin : bgo
- background-size : bgsz
bgo
/*origin,o*/
-webkit-background-origin: ;
background-origin: ;
bgo-pb
-webkit-background-origin: padding-box;
background-origin: padding-box;
bgo-bb
-webkit-background-origin: border-box;
background-origin: border-box;
bgo-cb
-webkit-background-origin: content-box;
background-origin: content-box;
bgsz
-webkit-background-size: ;
background-size: ;
bgsz-a
-webkit-background-size: auto;
background-size: auto;
bgsz-ct
/*contain,ct*/
-webkit-background-size: contain;
background-size: contain;
bgsz-cv
-webkit-background-size: cover;
background-size: cover;
7.颜色 Color
color / opacity
- color : c
- opacity : op
c
color: #000;
c-r
color: rgb(0, 0, 0);
c-ra
color: rgba(0, 0, 0, .5);
op
opacity: ;
8.生成內容 Generated content
content
- content : cnt
cnt
/*content,cnt*/
content: '';
ct
content: ;
/*(cnt,可以换成ct,不带属性的区别,
一个带单引号,一个不带)*/
cnt-n
content: normal;
cnt-oq
content: open-quote;
cnt-noq
content: no-open-quote;
cnt-cq
content: close-quote;
cnt-ncq
content: no-close-quote;
cnt-a
content: attr();
cnt-c
content: counter();
cnt-cs
content: counters();
quotes / counter-increment / counter-reset
- quotes : q
- counter-increment : coi
- counter-reset : cor
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: ;
9.轮廓 Outline
outline
- outline :ol
- outline-offset : olo
- outline-width : olw
- outline-style : ols
- outline-color : olc
ol
outline: ;
ol-n
outline: none;
olo
outline-offset: ;
olw
outline-width: ;
ols
outline-style: ;
olc
outline-color: #000;
olc-i
outline-color: invert;
10.Tables
table-layout / caption-side / empty-cells
- table-layout : tbl
- caption-side : cps
- empty-cells : ec
tbl
/*table,tb*/
table-layout: ;
tbl-a
table-layout: auto;
tbl-f
table-layout: fixed;
cps
/*caption,cp*/
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;
11.边框 Border
border / border-break
- border : bd
- border-break:bdbk
bd
border: ;
bd+
border: 1px solid #000;
bd-n
border: none;
bdbk
border-break: close;
bdbk-c
border-break: close;
border-collapse / border-color
- border-collapse : bdcl
- border-color : bdc
bdcl
border-collapse: ;
bdcl-c
border-collapse: collapse;
bdcl-s
border-collapse: separate;
bdc
border-color: #000;
bdc-t
border-color: transparent;
border-image
- border-image : bdi
- border-top-image : bdti
- border-right-image : bdri
- border-bottom-image : bdbi
- border-left-image : bdli
- border-corner-image : bdci
bdi
-webkit-border-image: url();
bdi-n
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
-o-border-image: url();
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;
border-top-image
- border-top-image : bdti
- border-top-left-image : bdtli
- border-top-right-image : bdtri
bdti
border-top-image: url();
bdti-n
border-top-image: none;
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
border-bottom-image
- border-bottom-image : bdbi
- border-bottom-left-image : bdbli
- border-bottom-right-image : bdbri
bdbi
border-bottom-image: url();
bdbi-n
border-bottom-image: none;
bdbli
border-bottom-left-image: url();
bdbli-n
border-bottom-left-image: none;
bdbli-c
border-bottom-left-image: continue;
bdbri
border-bottom-right-image: url();
bdbri-n
border-bottom-right-image: none;
bdbri-c
border-bottom-right-image: continue;
border-fit
- border-fit : bdf
bdf
-webkit-border-fit: repeat;
border-fit: repeat;
bdf-c
-webkit-border-fit: clip;
border-fit: clip;
bdf-r
-webkit-border-fit: repeat;
border-fit: repeat;
bdf-sc
-webkit-border-fit: scale;
border-fit: scale;
bdf-st
-webkit-border-fit: stretch;
border-fit: stretch;
bdf-ow
-webkit-border-fit: overwrite;
border-fit: overwrite;
bdf-of
-webkit-border-fit: overflow;
border-fit: overflow;
bdf-sp
-webkit-border-fit: space;
border-fit: space;
border-length / border-spacing
- border-length : bdle
- border-spacing : bdsp
bdle
border-length: ;
bdle-a
border-length: auto;
bdsp
border-spacing: ;
border-style
- border-style : bds
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;
border-width / border-top
- border-width : bdw
- border-top : bdt
- border-top-width : bdtw
- border-top-style : bdts
- border-top-color : bdtc
bdw
border-width: ;
bdt
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;
border-right
- border-right : bdr
- border-right-width : bdrw
- border-right-style : bdrst
- border-right-color : bdrc
bdr
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;
border-bottom
- border-bottom : bdb
- border-bottom-width : bdbw
- border-bottom-style : bdbs
- border-bottom-color : bdbc
bdb
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;
border-left
- border-left :bdl
- border-left-width : bdlw
- border-left-style : bdls
- border-left-color : bdlc
bdl
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;
border-radius
- border-radius : bdrs
- border-top-right-radius : bdtrrs
- border-top-left-radius : bdtlrs
- border-bottom-right-radius : bsbrrs
- border-bottom-left-radius : bdblrs
bdrs
/*radius,rs*/
border-radius: ;
bdtrrs
border-top-right-radius: ;
bdtlrs
border-top-left-radius: ;
bdbrrs
border-bottom-right-radius: ;
bdblrs
border-bottom-left-radius: ;
12.列表 Lists
list-style / list-style-position / list-style-image
- list-style : lis
- list-style-position : lisp
- list-style-image : lisi
lis
/*list,li*/
list-style: ;
lis-n
list-style: none;
lisp
list-style-position: ;
lisp-i
list-style-position: inside;
lisp-o
list-style-position: outside;
lisi
list-style-image: ;
lisi-n
list-style-image: none;
list-style-type
- list-style-type : list
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-d
list-style-type: disc;
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;
13.Print
page-break-before
- page-break-before : pgbb
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;
page-break-inside / page-break-after/ orphans / widows
- page-break-inside :pgbi
- page-break-after : pgba
- orphans : orp
- widows : wid
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: ;
14.其他 Others
! 和 @
- !important:!
- @font-face : @f
- @import url : @i
- @keyframes identifier : @kf
- @media screen : @m
p!
padding: !important;
@f
@font-face {
font-family:;
src:url();
}
@f+
@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 url();
@kf
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
@m
@media screen {
}
animation
- animation : anim
- animation-delay : animdel
- animation-direction : animdir
anim
/*animation,anim*/
-webkit-animation: ;
-o-animation: ;
animation: ;
★ anim-
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
-o-animation: name duration timing-function delay iteration-count direction fill-mode;
animation: name duration timing-function delay iteration-count direction fill-mode;
animdel
/*delay,del*/
-webkit-animation-delay: time;
-o-animation-delay: time;
animation-delay: time;
animdir
/*direction,dir*/
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
animdir-a
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
animdir-ar
-webkit-animation-direction: alternate-reverse;
-o-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
animdir-n
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
animdir-r
-webkit-animation-direction: reverse;
-o-animation-direction: reverse;
animation-direction: reverse;
animation-duration
- animation-duration : animdur
- animation-fill-mode : animfm
animdur
-webkit-animation-duration: 0s;
-o-animation-duration: 0s;
animation-duration: 0s;
animfm
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animfm-b
-webkit-animation-fill-mode: backwards;
-o-animation-fill-mode: backwards;
animation-fill-mode: backwards;
animfm-bt
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animfm-f
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation-iteration-count / animation-name / animation-play-state
- animation-iteration-count : animic
- animation-name :animn
- animation-play-state : animps
animic
/*iteration-count,ic*/
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
animic-i
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animn
-webkit-animation-name: none;
-o-animation-name: none;
animation-name: none;
animps
/*play-state,ps*/
-webkit-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
animps-p
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
animps-r
-webkit-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
animation-timing-function
- animation-timing-function : animtf
animtf
/*timing-function,tf*/
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
animtf-cb
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 1.0);
-o-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 1.0);
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 1.0);
animtf-e
-webkit-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;
animtf-ei
-webkit-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
animtf-eio
-webkit-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animtf-eo
-webkit-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
animtf-l
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
appearance / filter:progid / 注释
- appearance : ap
- filter:progid : bg-ie / op:ie / op:ms
- commet,注释 : cm
ap
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
★ bg-ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
★ op:ie
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
★ op:ms
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
cm = 生成注释,comment
/* */
columns
- columns : col,colm
- column-count : colc
- column-fill : colf
- column-gap : colg
- column-span : cols
- column-width : colw
col
/*也可以使用colm*/
-webkit-columns: ;
-moz-columns: ;
-o-columns: ;
columns: ;
colm
-webkit-columns: ;
-moz-columns: ;
-o-columns: ;
columns: ;
colc
-webkit-column-count: ;
-moz-column-count: ;
-o-column-count: ;
column-count: ;
colf
-webkit-column-fill: ;
-moz-column-fill: ;
-o-column-fill: ;
column-fill: ;
colg
-webkit-column-gap: ;
-moz-column-gap: ;
-o-column-gap: ;
column-gap: ;
cols
-webkit-column-span: ;
-moz-column-span: ;
-o-column-span: ;
column-span: ;
colw
-webkit-column-width: ;
-moz-column-width: ;
-o-column-width: ;
column-width: ;
column-rule
- column-rule :colr
- column-rule-color : colrc
- column-rule-style : colrs
- -column-rule-width : colrw
colr
-webkit-column-rule: ;
-moz-column-rule: ;
-o-column-rule: ;
column-rule: ;
colrc
-webkit-column-rule-color: ;
-moz-column-rule-color: ;
-o-column-rule-color: ;
column-rule-color: ;
colrs
-webkit-column-rule-style: ;
-moz-column-rule-style: ;
-o-column-rule-style: ;
column-rule-style: ;
colrw
-webkit-column-rule-width: ;
-moz-column-rule-width: ;
-o-column-rule-width: ;
column-rule-width: ;
orientation
- orientation : ori
ori
/*[orɪɛn'teʃən] n. 方向；定向*/
orientation: ;
ori-l
orientation: landscape;
ori-p
orientation: portrait;
text-overflow
- text-overflow : tov
tov
/*text,t overflow,ov*/
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
tov-c
-ms-text-overflow: clip;
text-overflow: clip;
tov-e
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
transform
- transform :trf
- transform-origin : trfo
- transform-style : trfs
trf
/*transform,trf*/
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
trfo
-webkit-transform-origin: ;
-moz-transform-origin: ;
-ms-transform-origin: ;
-o-transform-origin: ;
transform-origin: ;
trfs
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
trf-r
-webkit-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);
trf-sc
-webkit-transform: scale(x, y);
-ms-transform: scale(x, y);
-o-transform: scale(x, y);
transform: scale(x, y);
trf-scx
-webkit-transform: scaleX(x);
-ms-transform: scaleX(x);
-o-transform: scaleX(x);
transform: scaleX(x);
trf-scy
-webkit-transform: scaleY(y);
-ms-transform: scaleY(y);
-o-transform: scaleY(y);
transform: scaleY(y);
trf-skx
-webkit-transform: skewX(angle);
-ms-transform: skewX(angle);
-o-transform: skewX(angle);
transform: skewX(angle);
trf-sky
-webkit-transform: skewY(angle);
-ms-transform: skewY(angle);
-o-transform: skewY(angle);
transform: skewY(angle);
trf-t
-webkit-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);
transform: translate(x, y);
trf-tx
-webkit-transform: translateX(x);
-ms-transform: translateX(x);
-o-transform: translateX(x);
transform: translateX(x);
trf-ty
-webkit-transform: translateY(y);
-ms-transform: translateY(y);
-o-transform: translateY(y);
transform: translateY(y);
transition
- transition : trs
- transition-delay : trsde
- transition-duration : trsdu
- transition-property : trsp
- transition-timing-function : trstf
trs
/*transition,trs*/
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
trsde
/*delay,de*/
-webkit-transition-delay: time;
-o-transition-delay: time;
transition-delay: time;
trs-du
-webkit-transition-duration: time;
-o-transition-duration: time;
transition-duration: time;
trsp
-webkit-transition-property: prop;
-o-transition-property: prop;
transition-property: prop;
trstf
-webkit-transition-timing-function: tfunc;
-o-transition-timing-function: tfunc;
transition-timing-function: tfunc;
font-smooth
- font-smooth : fsm
- -webkit-font-smoothing : wfsm
fsm
font-smooth: ;
-fsm
-webkit-font-smooth: ;
-moz-font-smooth: ;
-ms-font-smooth: ;
-o-font-smooth: ;
font-smooth: ;
wfsm
-webkit-font-smoothing: antialiased;
wfsm-n
-webkit-font-smoothing: none;
wfsm-s
-webkit-font-smoothing: subpixel-antialiased;
友情链接:
▲ 特别声明： 本文参考 Emmet 官网速查表，重新进行的归纳和总结，主要是为了便于理解和记忆。
- ★ Emmet 缩写语法 官网速查表
- 官网下载不了的话，请点击 速查表 百度云下载
- 感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 O(∩_∩)O哈哈~
- 转载 请注明出处,Thanks♪(･ω･)ﾉ