【03】emmet系列之CSS语法_html/css_WEB-ITnose
【02】emmet系列之HTML语法
【03】emmet系列之CSS语法
【04】emmet系列之编辑器
【05】emmet系列之各种缩写
单位:
有几个常用值别名:
example:
输入:
- w100p
- width:100%
example:
输入:
- m10p30e5x
- margin:10%30em5ex
example:
输入:
- h10p+m5e
输出:
- height:10%;margin:5em;
颜色值:
- bd5#0s
输出:
- border:5px#000 solid
你可以写一个,两个,三个或六个字符的颜色值:
!important修饰符
您可以添加!在任何CSS缩写,以便获得最终的后缀!important价值:
- p !+ m10e !
输出:
- padding :! important ; margin :10 em ! important ;
浏览器前缀:
如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入
- -bdrs
输出:
- -webkit-border-radius:;
- -moz-border-radius:;
- -ms-border-radius:;
- -o-border-radius:;
- border-radius:;
[魔芋注]在Emmet中我们只需修改旋转属性值的其中一个,再按ctrl+b快捷键,其它相关的属性值也相应的改变。(如果无效,可能与sublime的快捷键冲突,修改之)
比如输入trs,则会生成:
- -webkit-transform:;
- -moz-transform:;
- -ms-transform:;
- -o-transform:;
- transform:;
输入:
- trf
输出:
- -webkit-transform:;
- -ms-transform:;
- -o-transform:;
- transform:;
你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:
- -webkit-super-foo:;
- -moz-super-foo:;
- -ms-super-foo:;
- -o-super-foo:;
- super-foo:;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
- -webkit-transform:;
- -moz-transform:;
- transform:;
前缀缩写如下:
附加属性
可能你之前已经了解了一些缩写,比如 @f,可以生成:
- @font-face {
- font-family:;
- src:url();
- }
一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@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;
- }
模糊匹配
如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:
- overflow: hidden;
渐变
输入lg(left, #fff 50%, #000),会生成如下代码:
- background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000));
- background-image:-webkit-linear-gradient(left,#fff 50%, #000);
- background-image:-moz-linear-gradient(left,#fff 50%, #000);
- background-image:-o-linear-gradient(left,#fff 50%, #000);
- background-image: linear-gradient(left,#fff 50%, #000);
- lg(left,#fc0 30%,red)
输出:
- background-image:-webkit-linear-gradient(left,#fc0 30%, red);
- background-image:-o-linear-gradient(left,#fc0 30%, red);
- background-image: linear-gradient(to right,#fc0 30%, red);
- border-image:lg(left,#fc0 30%,red)
输出:
- -webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
- -o-border-image:-o-linear-gradient(left,#fc0 30%, red);
- border-image:linear-gradient(to right,#fc0 30%, red);
技巧篇
1,对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如:
- fl →float: left;
2,编写这些CSS样式时,有很多是我们想好的写法,但生成的不是你想要的,比如position: absolute;,我们会输入pa,生成的就不是position: absolute;,这时我们可以:
- poa → position: absolute;
3,一些用-连接的CSS样式和属性值,都可以取首字母:
- whscbs → whitewhite-space-collapse:break-strict;
4,对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:
- m4-6→ margin:4px6px;
- p4-6-8→ padding:4px6px8px;
5,属性值没有单位的CSS缩写:
- lh2 → line-height:2;, fw400 → font-weight:400;
这些CSS属性有:
- z-index, line-height, opacity and font-weight
6,#是一个值分离器,所以不需要使用连字符分隔它,例如:
- bd5#0s → border: 5px #000 solid:
7,输出默认的CSS样式+,用+操作符,比如:
- bg+→ background:#fff url() 0 0 no-repeat;
推荐阅读
-
Android属性动画Property Animation系列三之LayoutTransition(布局容器动画)_html/css_WEB-ITnose
-
[CSS3]移动Web开发系列之CSS3增强型选择器_html/css_WEB-ITnose
-
前端开发基础之HTML--标签系列(1)_html/css_WEB-ITnose
-
【02】emmet系列之HTML语法_html/css_WEB-ITnose
-
Android属性动画Property Animation系列一之ObjectAnimator_html/css_WEB-ITnose
-
CSS3之 :nth-child(n)语法讲解_html/css_WEB-ITnose
-
css3动画属性系列之transform细讲scale缩放_html/css_WEB-ITnose
-
02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素_html/css_WEB-ITnose
-
[CSS3]移动Web开发系列之CSS3增强型选择器_html/css_WEB-ITnose
-
Android属性动画Property Animation系列一之ValueAnimator_html/css_WEB-ITnose