CSS 缩写

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Emmet 插件几乎为所有的 CSS 属性都创建了缩写形式,使用这些缩写形式可以快速的撰写 CSS 样式。

比如,margin 这个属性,它的缩写形式就是一个 m …

在缩写形式后面可以直接加上属性的值 .. m20 … 如果不加单位的话,默认的单位就是像素 …

我们也可以加上单位的名称 …. 比如 m20em …

如果是百分比的值,可以使用一个 % ,或者字母 p …

CSS 属性可能会有多个值,不同的值之间我们可以使用 - 线分隔一下 …

m20-30

有两个快捷键,可以快速的选择上一个或者下一个项目 … shift+command+, 可以选择上一个项目 …

按一次先选择的是最后一个属性的值 … 然后是上一个值 … 然后是整个值 … 接着是整个样式声明 …

最后会选择样式的选择器 …

shift+command+.

可以选择下一个项目 …

其它

Emmet 定义的属性的缩写我们一般都能猜到 … 比如,上外边距,属性名是 margin-top … 它的缩写形式应该就是 mt …

下外边距是 margin-bottom … 它的缩写是 mb …

ml 是 margin-left 的缩写 … mr 是 margin-right 的缩写 …

:

有些有固定值的属性,可以使用属性的缩写形式,后面加上冒号,然后是值的缩写形式 … 比如 position 这个属性 … 设置为 absolute 的话,输入 pos:a

浮动元素到左边,可以使用 float 属性,把它的值设置成 left .. fl:l

fl 是 float 的缩写,冒号后面的 l 是 left 的缩写 …

+

有些缩写形式里有一个 + 号 … 比如 bd+

编辑的地方是在这个边框的宽度值这里 … shift+command+↑ 可以给值加上 1 … windows 上应该 shift+command+↓ … 可以减掉 1 ….

想了解更多的缩写形式的 CSS 属性,可以参考 Emmet 的 cheat sheet … 备忘列表!

http://docs.emmet.io/cheat-sheet/

CSS 缩写《 Emmet:HTML 与 CSS 缩写 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点