Web 前端利器Emmet 的CSS 用法总结

Web 前端利器Emmet 的CSS 用法总结

承接上文《Web 前端利器Emmet 的HTML用法总结》,这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus,由w3cplus 翻译,感谢所有原作者。

属性

CSS提供了属性的值,比如font-sizemargin和 padding等等:

emment-1

Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdbborder-top缩写是bdt。正如下面的示例font-size缩写是fz

假设你在你的编辑器中输入fz,然后按一下tab键,Emmet就像一个魔法师一样将缩写变成有效的CSS,并且放在你的光标之处。

element-13

属性值

现在我们已经了解了CSS的属性,它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如,fz18将输出font-size:18px。你不需要输入px,因为Emmet将会其单位是px。如果一个项目没有一个单位(如font-weight),Emmet会很聪明,他不会添加像素单位。

element-14

单位

如果你在CSS不经常使用的像素(px)单位,那会是什么?是emrem%expx吗?那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式:

  • px→ 默认
  • p→ %
  • e→ em
  • r→ rem
  • x→ ex

要使用一个单位,只需要在值的后面使用缩写的单位值。下面的例子是使用em定义font-size

element-15

多个单位

CSS中的某些属笥,比如margin,允许多个值。在Emmet中要做到这一点,只需要每个值之间使用破折号(-)。来看看下面的例子,给body定义margin的四个值:

element-16

颜色

在Emmet中使用#前缀,后面紧跟颜色值,但不同的字符数将会输出不同的十六进制代码。来看一些例子:

  • #1→ #111111
  • #E0→ #e0e0e0
  • #FC0→ #FFCC00

下面定义通过c#2定义body的颜色值,将会输出#222

element-17

!important

尽管在CSS中!important并不经常使用,但在Emmet也带有一定的缩写。添加!就可以自动生成:

element-18

多属性

现在我们具Emmet的CSS特性的一个基本了解,也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例:

element-19

示例

记住,你可以使用所有缩写或者将其分开。这并不是很重要,关键的是你要使用得正确,它能更容易让你编写你的CSS。这里有一个动画,他给div.panel创建一些样式:

element-20

评分:
当前平均分 4.33 (84%) - 12 个投票
云左主机 广告
4 条 评论
  1. 好东西,用了这么久,都没发现这个!

    2年前 回复
  2. 请问下那个输入提示,你用的是什么工具?

    3年前 回复
  3. :!: 这货确实很好用。

    4年前 回复
发表评论