【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. nginx 配置tp3.2

    server { listen 80; server_name 域名; #charset koi8-r; #access_log /var/log/nginx/host.access.log main ...

  2. MyEclipse常用设置记录

    MyEclipse版本:MyEclipse 2014 Blue版本. 设置内容: 1.内存优化 <MyEclipse_ROOT>/myeclipse-blue.ini文件 主要修改-vma ...

  3. 【先定一个小目标】Ubuntu 16.04 搭建 zookeeper

    ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供了诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知和分布式锁等分布式基础服务.由于 Zo ...

  4. [转]无废话SharePoint入门教程一[SharePoint概述]

    本文转自:http://www.cnblogs.com/iamlilinfeng/p/3026332.html 一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到ShareP ...

  5. AJPFX关于TreeSet集合的介绍

    需求:键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低输出到控制台.分析:1.创建键盘录入对象:          2.创建TreeSet集合,使用匿名内部类实现Compa ...

  6. 有关HTML版本

    先说说HTML的简史:从HTML1.0~2.0(1989~1991)>HTML3(1995)>HTML4(1998)>HTML4.01(1999)>XHTML1.0(2001) ...

  7. Angular jsonp 同源策略的问题

    引用:http://www.cnblogs.com/dengzy/p/5388357.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决 ...

  8. iOS/Android 视频编辑SDK

    锐动天地为开发者提供短视频编辑.特效.直播.录屏.编解码.视频转换,等多种解决方案,涵盖PC.iOS.Android多平台.以市场为导向,不断打磨并创新技术,在稳定性,兼容性,硬件设备效率优化上千捶百 ...

  9. iOS Programming UINavigationController

    iOS Programming UINavigationController the Settings application has multiple related screens of info ...

  10. js控制页面跳转,清缓存,强制刷新页面

    单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...