承接上文《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
创建一些样式:
相关推荐
描述中提到“Emmet (Zen Coding) 百度可以搜索到想要的安装操作步骤”,这提示我们,如果需要安装或了解Emmet在Dreamweaver中的使用方法,可以通过搜索引擎(如百度)获取详细的教程和指南。安装Emmet.zxp文件是将...
Emmet(原名Zen Coding)是前端开发人员广泛使用的高效编码工具,尤其在HTML和CSS领域。它通过简短的语法快速生成复杂的HTML结构,极大提高了编写代码的效率。Emmet最初由Dmitry Fadeyev开发,现在已经成为了Web开发...
4. **jQuery**:对于使用jQuery框架的开发者来说,这个插件可以提供jQuery方法的自动完成,使得在Sublime Text 3中使用jQuery更加顺畅。 除了这些插件,Sublime Text 3还支持其他大量插件,如Git集成、 Emmet(用于...
嵌入式八股文面试题库资料知识宝典-华为的面试试题.zip
训练导控系统设计.pdf
嵌入式八股文面试题库资料知识宝典-网络编程.zip
人脸转正GAN模型的高效压缩.pdf
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
少儿编程scratch项目源代码文件案例素材-鸡蛋.zip
嵌入式系统_USB设备枚举与HID通信_CH559单片机USB主机键盘鼠标复合设备控制_基于CH559单片机的USB主机模式设备枚举与键盘鼠标数据收发系统支持复合设备识别与HID
嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip
面向智慧工地的压力机在线数据的预警应用开发.pdf
基于Unity3D的鱼类运动行为可视化研究.pdf
少儿编程scratch项目源代码文件案例素材-霍格沃茨魔法学校.zip
少儿编程scratch项目源代码文件案例素材-金币冲刺.zip
内容概要:本文深入探讨了HarmonyOS编译构建子系统的作用及其技术细节。作为鸿蒙操作系统背后的关键技术之一,编译构建子系统通过GN和Ninja工具实现了高效的源代码到机器代码的转换,确保了系统的稳定性和性能优化。该系统不仅支持多系统版本构建、芯片厂商定制,还具备强大的调试与维护能力。其高效编译速度、灵活性和可扩展性使其在华为设备和其他智能终端中发挥了重要作用。文章还比较了HarmonyOS编译构建子系统与安卓和iOS编译系统的异同,并展望了其未来的发展趋势和技术演进方向。; 适合人群:对操作系统底层技术感兴趣的开发者、工程师和技术爱好者。; 使用场景及目标:①了解HarmonyOS编译构建子系统的基本概念和工作原理;②掌握其在不同设备上的应用和优化策略;③对比HarmonyOS与安卓、iOS编译系统的差异;④探索其未来发展方向和技术演进路径。; 其他说明:本文详细介绍了HarmonyOS编译构建子系统的架构设计、核心功能和实际应用案例,强调了其在万物互联时代的重要性和潜力。阅读时建议重点关注编译构建子系统的独特优势及其对鸿蒙生态系统的深远影响。
嵌入式八股文面试题库资料知识宝典-奇虎360 2015校园招聘C++研发工程师笔试题.zip
嵌入式八股文面试题库资料知识宝典-腾讯2014校园招聘C语言笔试题(附答案).zip
双种群变异策略改进RWCE算法优化换热网络.pdf
内容概要:本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器(APF)仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法(ipiq)、双闭环控制策略(电压外环+电流内环PI控制)以及SVPWM矢量调制技术。仿真结果显示,在APF投入前后,电网电流THD从21.9%降至3.77%,显著提高了电能质量。 适用人群:从事电力系统研究、电力电子技术开发的专业人士,尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标:适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性,优化电力系统的电能质量。 其他说明:文中提到的仿真模型涉及多个关键模块,如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等,这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。