Emmet快速编写CSS样式
基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin。
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样式+,用+操作符,比如:
- bg+ → background: #fff url() 0 0 no-repeat;
5、参数别名,Emmet为几个常用的单位值提供了别名:
- p → %
- e → em
- x → ex
6、你可以使用别名代替完整的单位:
- w100p → width: 100%
- m10p30e5x → margin: 10% 30em 5ex
7、颜色值,Emmet支持十六进制的颜色值:
- c#3 → color: #333;
8、#是一个值分离器,所以不需要使用连字符分隔它,例如:
- bd5#0s → border: 5px #000 solid:
9、你可以写一个,两个,三个或六个字符颜色值,Emmet都会正确解析为十六进制的颜色值:
- #1 → #111111
- #e0 → #e0e0e0
- #fc0 → #ffcc00
10、属性值没有单位的CSS缩写:
- lh2 → line-height: 2;, fw400 → font-weight: 400;
这些CSS属性有:
- z-index, line-height, opacity and font-weight
11、!important 修饰符的写法:
在我们编写好了CSS样式,需要添加!important时,只需要在后面输入!(!前需要有空格,因为这是在CSS样式基础上),再按Tab键即可:
- float: left !; → float: left !important;
12、在编写Emmet代码时需要添加!important,我们可以这样写:
- fl! → float: left !important;
- p6! → padding: 6px !important;
13、对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:
- m4-6 → margin: 4px 6px;
- p4-6-8 → padding: 4px 6px 8px;
14、@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,而@font-face的结构是比较复杂,有background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,用Emmet编写可以让它变得相当的简单,快速,只需输入@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;
- }
15、前缀:
CSS3一些新的特性对于我们前端开发人员是一个重要的更新,用几行代码就可以实现强大的功能,这是之前的CSS样式不可能实现的。但这也是一种痛苦,对于不同的浏览器我们需要多次写相同的样式。[/slidenormal]
Emmet的CSS解析器有一个很好的功能,可以大大改善为了解决浏览器兼容性而多次写的属性。例如圆角属性,-bdrs4就可生成:
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
16、对于一些前缀,Sublime Text中也内置了一些属性的前缀,比如输入trf即可得到:
- -webkit-transform: |;
- -moz-transform: |;
- -ms-transform: |;
- -o-transform: |;
- transform: |;
17、在Emmet中,在任意两个字符前面添加-操作符,都可以生成带前缀的属性值,比如-float-d:
- -webkit-float-d: |;
- -moz-float-d: |;
- -ms-float-d: |;
- -o-float-d: |;
- float-d: |;
18、CSS3一个新的、也相当重要的特性是渐变,渐变的属性值又比较复杂,如果再兼容所有的浏览器,代码量是相当大的。而Emmet有一个CSS3渐变的解析器,可以帮我们把这项复杂的工作快速的完成:
- lg(left #f90 20% red)
将生成:
- background-image: -webkit-gradient(linear, 0 0, 100% 0, );
- background-image: -webkit-linear-gradient(left #f90 20% red);
- background-image: -moz-linear-gradient(left #f90 20% red);
- background-image: -o-linear-gradient(left #f90 20% red);
- background-image: linear-gradient(left #f90 20% red);
19、在lg()括号中需要有值,不然Emmet会解析成left: ;。
Emmet编写CSS样式还有很多需要注意的地方,而写出来比较困难,到官方网站看看CSS样式的缩写,会更明白。
Emmet快速编写CSS样式的更多相关文章
- Emmet快速编写代码
Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 给标签指定id选择器 di ...
- Emmet 快速编写html代码
简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...
- Emmet快速编写HTML代码
缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和 ...
- IDEA编写css样式报错
粗心大意!浪费了30分钟时间,必须记录一下! 报错图片 琢磨了半天,没想出是哪里错了,很无奈!!!!!!!!! 度娘:ctrl+shift+alt+H,设置成NONE就可以了 试了一下,果然好使,不再 ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- CSS样式的面向对象思想(一)
今天来谈一谈CSS样式的面向对象写法.顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护 ...
- css样式表的知识点总结
css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...
- (转)在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...
- css样式初始化代码总结
编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...
随机推荐
- throws与throw的对比
1.throws关键字通常被应用在声明方法时,用来指定可能抛出的异常.多个异常可以使用逗号隔开.当在主函数中调用该方法时,如果发生异常,就会将异常抛给指定异常对象.如下面例子所示:public cla ...
- c#与java之比较(转自Jack.Wang's home)
很多人说C#是微软用来和Java抗衡的武器,因为二者在很大程度上有着惊人的相似 ,尽管如此,两者不同的地方也很多,所谓“于细微处见差异”.那么两者的相似和区 别都在什么地方呢?我们从今天开始,会从各个 ...
- Linux驱动编程--基于I2C子系统的I2C驱动的Makefile
ifeq ($(KERNELRELEASE),) KERNELDIR ?= /lib/modules/$(shell uname -r)/buildPWD := $(shell pwd) TEST = ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- 隐马尔科夫模型及Viterbi算法的应用
作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4335810.html 一个例子: 韦小宝使用骰子进行游戏,他有两种骰子一种正常的骰子,还有一 ...
- zedboard 驱动理解
1 驱动程序的编写 驱动是LINUX开发的必经之路,应用层对底层的调用经过了库与内核,内核下面才是驱动层,当你在应用程序执行对底层的控制时,驱动程序为你的控制提供了接口,或者说是策略. #incl ...
- iOS获取汉字的拼音
在iOS开发中经常涉及到汉字的排序,最常见的就是需要根据首字母的字符顺序排列,比如常见的通讯录等.总结出来,大致可以分为两种方法,其中参考文献[1]中提供的方法十分复杂,利用查表的方法是先,并且代码量 ...
- Nginx,LVS,HAProxy,负载均衡之选择
Nginx的优点:性能好,可以负载超过1万的并发.功能多,除了负载均衡,还能作Web服务器,而且可以通过Geo模块来实现流量分配.社区活跃,第三方补丁和模块很多支持gzip proxy缺点:不支持se ...
- PHP自动识别字符集并完成转码详解
话不多说,直接上函数,这个函数是用来对字符串进行检查和转码的.需要的朋友可以过来参考下 因为自己使用字符编码一般的是utf-8编码,但如果对方的博客使用gb2312编码的话,POST过来就会出现乱码( ...
- CentOS如何分区
安装Linux CentOS时,需要在硬盘建立CentOS使用的分区,在大多情况下,至少需要为CentOS建立以下3个分区. (1)/boot分区(不是必须的):/boot分区用于引导系统,它包含了操 ...