承接上文《Web 前端利器Emmet 的HTML用法总结》,这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus,由w3cplus 翻译,感谢所有原作者。
属性
CSS提供了属性的值,比如font-size
,margin
和 padding
等等:
Emmet定义了所有已知的CSS属性和缩写。所以border-bottom
缩写是bdb
,border-top
缩写是bdt
。正如下面的示例font-size
缩写是fz
:
假设你在你的编辑器中输入fz
,然后按一下tab
键,Emmet就像一个魔法师一样将缩写变成有效的CSS,并且放在你的光标之处。
属性值
现在我们已经了解了CSS的属性,它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如,fz18
将输出font-size:18px
。你不需要输入px
,因为Emmet将会其单位是px
。如果一个项目没有一个单位(如font-weight
),Emmet会很聪明,他不会添加像素单位。
单位
如果你在CSS不经常使用的像素(px
)单位,那会是什么?是em
、rem
、%
、ex
和px
吗?那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式:
-
px
→ 默认 -
p
→%
-
e
→em
-
r
→rem
-
x
→ex
要使用一个单位,只需要在值的后面使用缩写的单位值。下面的例子是使用em
定义font-size
:
多个单位
CSS中的某些属笥,比如margin
,允许多个值。在Emmet中要做到这一点,只需要每个值之间使用破折号(-
)。来看看下面的例子,给body
定义margin
的四个值:
颜色
在Emmet中使用#
前缀,后面紧跟颜色值,但不同的字符数将会输出不同的十六进制代码。来看一些例子:
-
#1
→#111111
-
#E0
→#e0e0e0
-
#FC0
→#FFCC00
下面定义通过c#2
定义body
的颜色值,将会输出#222
:
!important
尽管在CSS中!important
并不经常使用,但在Emmet也带有一定的缩写。添加!
就可以自动生成:
多属性
现在我们具Emmet的CSS特性的一个基本了解,也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+
运算符来创建多个属性。我们来看一个简单的示例:
示例
记住,你可以使用所有缩写或者将其分开。这并不是很重要,关键的是你要使用得正确,它能更容易让你编写你的CSS。这里有一个动画,他给div.panel
创建一些样式:
相关推荐
涵盖了 html、css 和 xsl 的Emmet命令,提高前端开发效率。 有基础语法:下级: >;同级: +;上级:^;分组:();乘法:*;自增符号:$;ID和Class属性;自定义属性;文本:{};隐式标签; html语法:略!(此处略,...
Emmet 总结 比较全! 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再...
Atom-emmet-jsx-css-modules.zip,Atom package to extend Emmet's JSX expansions to use CSS modules.emmet jsx css模块包,atom是一个用web技术构建的开源文本编辑器。
emmet css 使用缩写作为类名的样板实用程序样式表。 // emmet abbreviationd:n → display: none;// CSS class (all `:` are replaced with `-`) .d-n { display: none; }目前使用 emmet 1.3.1。 查看。目的拥有一组...
前端开源库-emmetemmet,emmet-Web开发人员的基本工具包
在学习emmet的过程中, 写的许多示例代码, 在sublime中打开的话,可以快速检索
emmet-sublime-master插件 前端开发神器 附有使用方法
Sublime Text 3的HTML/CSS代码快速编写神器:Emmet,使用方法:直接解压到Sublime Text 3安装路径下,如C:\Software\Sublime Text3\Emmet,注意Emmet文件名的大小写。
Emmet是一个强大的代码快速编写工具,使用emmet可以提高代码输入效率,特别是前端工程师在编写HTML和CSS代码时,是一个前端开发的利器
前端开发必备!Emmet使用手册。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度
让你全面了解Emmet是如何帮助前端程序员 快速编码的
emmet livestyle(CSS编辑器开发者插件) v0.8.2.1230 官方免费版.rar
用于 Ace 编辑器的 Emmet CSS 脚本 Wordpress 中 Ace 编辑器 CSS 模式的 Emmet 脚本。 包含emmet对象定义和 CSS 片段。 它取自存储库,然后减少到 Wordpress 中使用。 由于 Wordpress 加载了库,因此删除了下划线...
emmet是前端开发的利器,装在eclipse中能提高页面开发效率,此插件适用于myeclipse8.5和eclipse3.5版本及以上版本,注意:安装后Ctrl+D键会有冲突
dreamweaver上的神扩展插件,可提高你80%的编码速度
emmet 你懂得, 前端神器, 这个是基于官方最新源代码编译的clilpse插件, 资源包含源代码,谢谢
Brackets的Emmet插件
使用此插件在编写html和css时候能提高好几倍速度!
dreamweaver CS6 Emmet 插件重新封装版,解决安装Emmet出现“扩展'Emmet'不包含有效的签名。不会安装此扩展”的问题