emmet插件使用(Css)

渐变

输入lg(left,#fff50%,#000),会生成如下代码
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

附加属性

一些其他属性，比如background-image、border-radius、font、@font-face、text-shadow等额外的选项可以通过+号来生成，比如输入@f+，将生成：
@font-face {
  font-family: ‘FontName’;
  src: url(‘FileName.eot’);
  src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’),
     url(‘FileName.woff’) format(‘woff’),
     url(‘FileName.ttf’) format(‘truetype’),
     url(‘FileName.svg#FontName’) format(‘svg’);
  font-style: normal;
  font-weight: normal;
}

供应商前缀

如果输入w3c标准的Css属性，emmet会自动加上供应商前缀，比如输入trs，则会生成
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

你也可以在任意属性前加上”-”号，也可以为该属性加上前缀。比如输入-super-foo

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

如果不希望加上所有的前缀，可以使用缩写来指定，比如-wm-trf表示只jias-webkit和-moz前缀

-webkit-transform: ;
-moz-transform: ;
transform: ;

前缀缩写如下：

w表示-webkit m表示-moz s表示-ms o表示-o

模糊匹配

如果有些缩写，你拿捏不准，emmet会根据你输入的内容匹配最近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的
overflow: hidden;

值

比如要定义元素的宽度，只需要输入w100，即可生成 width:100px; 除了px还可以生成其他单位 h10p+m5e 可生成 height:10%; margin:5em; p表示% e表示em x表示ex

emmet插件使用(Css)相关推荐

  1. Emmet插件：HTML/CSS代码快速编写神器

    Emmet插件的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示 ...

  2. atom自动补全html代码,Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

    一.Emmet的安装与介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官 ...

  3. Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

  4. Sublime的Package Control 及 Emmet插件的安装，Tab键快速html和css代码

    问题: Sublime 按 tab键 能补全单个元素标签,但无法同时补全多个元素标签 点下面链接: http://www.miaoqiyuan.cn/products/proxy.php/https: ...

  5. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  6. Emmet：HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Emmet的 ...

  7. Emmet插件比较实用常用的写法

    看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...

  8. html自动补全pspad,Emmet：HTML/CSS 代码快速编写神器

    Emmet 的前身是大名鼎鼎的 Zen coding,如果你从事 Web 前端开发的话,对该插件一定不会陌生.它使用仿 CSS 选择器的语法来生成代码,大大提高了 HTML/CSS 代码编写的速度,比 ...

  9. Emmet插件用法指南

    安装Emmet插件 Emmet只是文本编辑器一个插件,要想让他发挥应用的功能,就得将其安装到你喜欢的文本编辑器中.到目前为止,很多流行的文本编辑器都支持Emmet插件,也就是说很多流行的文本编辑器都可 ...

最新文章

  1. R语言图形用户界面数据挖掘包Rattle：加载UCI糖尿病数据集、并启动Rattle图形用户界面、数据集变量重命名，为数据集结果变量添加标签、数据划分（训练集、测试集、验证集）、随机数设置
  2. html语言可以写模版继承吗,Django框架(十一)：模板介绍、模板语言、模板继承、HTML转义...
  3. docker学习总结二
  4. TIOBE 12 月排行榜：古老的 C 和后起之秀 Kotlin，谁是年度编程语言之王？
  5. 揭秘百万人围观的Facebook视频直播
  6. 使用jquery做一个动态简历
  7. cls_template.php on line 1067,ecshop php5.5兼容utf-8版本
  8. C++多线程编程（真实入门）
  9. Vicdas实时历史数据库
  10. 【读书笔记】-《软件测试的艺术》
  11. Wireshark安装提示缺少KB3118401和KB2999226文件
  12. MJKDZ PS2手柄（BK2461）：驱动安装问题及解决
  13. 如何新建一个ccs工程文件
  14. Linux HugePage
  15. html鼠标悬停超链接（头像、文字）显示提示信息
  16. 微信小程序 map 自定义地图数据，实现方式+思路+代码（最简易的实现方式）
  17. 从机器学习到大模型（零基础）
  18. Testudo：Spartan + Groth16 的R1CS ZKP证明系统
  19. UG 二次开发中文帮助文档，UFun在线帮助文档， NX API 中文帮助文档
  20. GPT-4——比GPT-3强100倍

热门文章

  1. 火狐浏览器中文乱码怎么办 Firefox中文乱码解决方法
  2. 如何实现多路海康大华等RTSP数据转RTMP推送
  3. java释放锁_java – 一个线程在完成后释放锁吗？
  4. Redis使用单线程却快到飞起的原因
  5. org.springframework.web.servlet.handler.AbstractHandlerExceptionResolver.logException Resolved
  6. spring源码阅读--@Transactional实现原理
  7. brew 安装mysql5.6_MacOS 10.14安装和brew更新后无法安装mysql gem
  8. php中如何配置环境变量,如何配置phpstorm环境变量如何配置phpstorm环境变量
  9. 计算机组成原理r型指令logisim实现_第一章 计算机体系结构
  10. python 查看当前目录_Python学习第156课--ls的运用、环境变量以及PATH