【01】emmet系列之基础介绍

  【02】emmet系列之HTML语法

  【03】emmet系列之CSS语法

  【04】emmet系列之编辑器

  【05】emmet系列之各种缩写

 

单位:

有几个常用值别名:

      • p %
      • e em
      • x ex
example:
输入:

  1. w100p 

输出:

  1. width:100%
 

example:

输入:

  1. m10p30e5x 

输出:

  1. margin:10%30em5ex
 
example:
输入:
  1. h10p+m5e
输出:
  1. height:10%;margin:5em;
 

颜色值:

 
  1. bd5#0s
输出:
  1. border:5px#000 solid
 

你可以写一个,两个,三个或六个字符的颜色值:

      • #1 #111111
      • #e0 #e0e0e0
      • #fc0 #ffcc00

!important修饰符

您可以添加!在任何CSS缩写,以便获得最终的后缀!important价值:

  1. p !+ m10e !

输出:

  1. padding :! important ; margin :10 em ! important ;
 
浏览器前缀:
如果输入非W3C标准的CSS属性,Emmet会自动加上供应商前缀,比如输入
  1. -bdrs
输出:
  1. -webkit-border-radius:;
  2. -moz-border-radius:;
  3. -ms-border-radius:;
  4. -o-border-radius:;
  5. border-radius:;

[魔芋注]在Emmet中我们只需修改旋转属性值的其中一个,再按ctrl+b快捷键,其它相关的属性值也相应的改变。(如果无效,可能与sublime的快捷键冲突,修改之)

比如输入trs,则会生成: 
  1. -webkit-transform:;
  2. -moz-transform:;
  3. -ms-transform:;
  4. -o-transform:;
  5. transform:;
输入:
  1. trf
输出:
  1. -webkit-transform:;
  2. -ms-transform:;
  3. -o-transform:;
  4. transform:;
你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo: 
 
  1. -webkit-super-foo:;
  2. -moz-super-foo:;
  3. -ms-super-foo:;
  4. -o-super-foo:;
  5. super-foo:;
 

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

  1. -webkit-transform:;
  2. -moz-transform:;
  3. transform:;
前缀缩写如下:

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

附加属性 

可能你之前已经了解了一些缩写,比如 @f,可以生成: 
  1. @font-face {
  2. font-family:;
  3. src:url();
  4. }
 

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成: 

 
 

模糊匹配 


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

  1. overflow: hidden;
 

渐变 

输入lg(left, #fff 50%, #000),会生成如下代码:

  1. background-image:-webkit-gradient(linear,00,100%0, color-stop(0.5,#fff), to(#000));
  2. background-image:-webkit-linear-gradient(left,#fff 50%, #000);
  3. background-image:-moz-linear-gradient(left,#fff 50%, #000);
  4. background-image:-o-linear-gradient(left,#fff 50%, #000);
  5. background-image: linear-gradient(left,#fff 50%, #000);
 
  1. lg(left,#fc0 30%,red)
输出:
  1. background-image:-webkit-linear-gradient(left,#fc0 30%, red);
  2. background-image:-o-linear-gradient(left,#fc0 30%, red);
  3. background-image: linear-gradient(to right,#fc0 30%, red);
 
 
  1. border-image:lg(left,#fc0 30%,red)
输出:
  1. -webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
  2. -o-border-image:-o-linear-gradient(left,#fc0 30%, red);
  3. border-image:linear-gradient(to right,#fc0 30%, red);
 

技巧篇

 

1,对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如:

  1. fl →float: left;
 

2,编写这些CSS样式时,有很多是我们想好的写法,但生成的不是你想要的,比如position: absolute;,我们会输入pa,生成的就不是position: absolute;,这时我们可以:

  1. poa → position: absolute;

3,一些用-连接的CSS样式和属性值,都可以取首字母:

  1. whscbs → whitewhite-space-collapse:break-strict;

4,对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:

  1. m4-6→ margin:4px6px;
  2. p4-6-8→ padding:4px6px8px;
 

5,属性值没有单位的CSS缩写:

  1. lh2 → line-height:2;, fw400 → font-weight:400;
 
 

这些CSS属性有:

  1. z-index, line-height, opacity and font-weight
 

6,#是一个值分离器,所以不需要使用连字符分隔它,例如:

  1. bd5#0s → border: 5px #000 solid:
 

7,输出默认的CSS样式+,用+操作符,比如:

  1. bg+→ background:#fff url() 0 0 no-repeat;
 
 
 
 
 

【03】emmet系列之CSS语法的更多相关文章

  1. 【02】emmet系列之HTML语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 初始化 :快速编写HTML ...

  2. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  3. 【05】emmet系列之各种缩写

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 各种缩写   缩写:! & ...

  4. 【04】emmet系列之编辑器

     [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 前端开发人员,常用的是s ...

  5. 【01】emmet系列之基础介绍

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 相关网址 官网:http: ...

  6. emmet 系列(1)基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

  7. Emmet 生成 HTML 的语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  8. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  9. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

随机推荐

  1. Windows中句柄和ID的区别

    写在前面:这里介绍句柄 对于“句柄”,在下一直停留在一知半解的认识层面,近日在下学习Windows编程,决定趁此机会将句柄彻底搞清楚.查阅了一些网络上的资料,发现网络上的讲解大概可以分为两类:一种是以 ...

  2. [USACO 2012 Jan Silver] Delivery Route【拆点】

    传送门:http://www.usaco.org/index.php?page=viewproblem2&cpid=106 这道题还真是完全没思路,真的不知道怎么做,但是看了题解后恍然大悟. ...

  3. java数组实现买彩票(阿基老师的打乱排序思想)

    package com.wh.array; public class Lottery { public static void main(String[] args) { int[] num=new ...

  4. fix for 12c profile

    .for CDBS run as sysDBa CREATE OR REPLACE FUNCTION verify_function (username varchar2, password varc ...

  5. Neither BindingResult nor plain target object for bean name 'user' available as request attribute

    这个异常是因为jsp页面写错了. 把<form:form></form:form>标签改成普通的标签即可. 应该是第一次访问的时候,user是空的.但springmvc不能是空 ...

  6. C# Equals的重写

    using System; using System.Collections.Generic; using System.Text; namespace Equal {     using Syste ...

  7. 12.1Java-构造方法

    一.构造方法 作用:在new的同时对成员变量赋值,给对象的属性初始化赋值格式:权限 方法名(参数列表){}方法的名字,必须和类的名字完全一致,大小写一致构造方法不许写返回值类型,如void,int 构 ...

  8. 移动端展示pdf(在线打开pdf)

    需求:在手机微信浏览器或者其他浏览器中打开pdf 准备:前端插件:查找pdf.js  官网地址:http://mozilla.github.io/pdf.js/ 在官网中下载demo 注释:pdf的d ...

  9. git创建分支及日常使用

    克隆代码 git clone https://github.com/master-dev.git 查看所有分支 git branch --all # 默认只有master分支,所以会看到如下两个分支 ...

  10. vscode增加xdebug扩展

    首先确保php增加了xdebug扩展,方法很多,可参考 https://www.cnblogs.com/wanghaokun/p/9084188.html.可通过phpinfo()查看是否已开启支持. ...