Web 前端利器Emmet 的CSS 用法总结
承接上文《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
创建一些样式:
- 通过top命令抓取cpu高消耗的sql (44天)
- 关于字符串匹配查找的总结(43天)
- 一条sql语句导致的数据库宕机问题及分析(42天)
- 外部表的导入导出问题 (41天)
- 当我们和计算机交互时,它看到的是什么?
- 一条sql语句“导致”的数据库宕机问题及分析 (38天)
- rman数据备份恢复学习笔记(49天)
- 虚拟专用数据库VPD应用 (48天)
- 关于创建视图的问题(48天)
- 性能调优之redo切换频率(47天)
- 关于oracle中session跟踪的总结(56天)
- oracle中关于小数中0的格式化(55天)
- 关于trigger过滤最大值的问题(54天)
- oracle共享服务器配置汇总(53天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例