【03】emmet系列之CSS语法
单位:
有几个常用值别名:
p
%
e
em
x
ex
输入:
w100p
输出:
width:100%
example:
输入:
m10p30e5x
输出:
margin:10%30em5ex
h10p+m5e
height:10%;margin:5em;
颜色值:
bd5#0s
border:5px#000 solid
你可以写一个,两个,三个或六个字符的颜色值:
#1
#111111
#e0
#e0e0e0
#fc0
#ffcc00
!important修饰符
您可以添加!
在任何CSS缩写,以便获得最终的后缀!important
价值:
p !+ m10e !
输出:
padding :! important ; margin :10 em ! important ;
-bdrs
-webkit-border-radius:;
-moz-border-radius:;
-ms-border-radius:;
-o-border-radius:;
border-radius:;
[魔芋注]在Emmet中我们只需修改旋转属性值的其中一个,再按ctrl+b快捷键,其它相关的属性值也相应的改变。(如果无效,可能与sublime的快捷键冲突,修改之)
-webkit-transform:;
-moz-transform:;
-ms-transform:;
-o-transform:;
transform:;
trf
-webkit-transform:;
-ms-transform:;
-o-transform:;
transform:;
-webkit-super-foo:;
-moz-super-foo:;
-ms-super-foo:;
-o-super-foo:;
super-foo:;
如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
-webkit-transform:;
-moz-transform:;
transform:;
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
附加属性
附加属性
可能你之前已经了解了一些缩写,比如 @f,可以生成:
@font-face {
font-family:;
src:url();
}
一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

模糊匹配
模糊匹配
如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:
overflow: hidden;
渐变
渐变
输入lg(left, #fff 50%, #000),会生成如下代码:
background-image:-webkit-gradient(linear,00,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);
lg(left,#fc0 30%,red)
background-image:-webkit-linear-gradient(left,#fc0 30%, red);
background-image:-o-linear-gradient(left,#fc0 30%, red);
background-image: linear-gradient(to right,#fc0 30%, red);
- border-image:lg(left,#fc0 30%,red)
-webkit-border-image:-webkit-linear-gradient(left,#fc0 30%, red);
-o-border-image:-o-linear-gradient(left,#fc0 30%, red);
border-image:linear-gradient(to right,#fc0 30%, red);
技巧篇
1,对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如:
fl →float: left;
2,编写这些CSS样式时,有很多是我们想好的写法,但生成的不是你想要的,比如position: absolute;,我们会输入pa,生成的就不是position: absolute;,这时我们可以:
poa → position: absolute;
3,一些用-连接的CSS样式和属性值,都可以取首字母:
whscbs → whitewhite-space-collapse:break-strict;
4,对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:
m4-6→ margin:4px6px;
p4-6-8→ padding:4px6px8px;
5,属性值没有单位的CSS缩写:
lh2 → line-height:2;, fw400 → font-weight:400;
这些CSS属性有:
z-index, line-height, opacity and font-weight
6,#是一个值分离器,所以不需要使用连字符分隔它,例如:
bd5#0s → border: 5px #000 solid:
7,输出默认的CSS样式+,用+操作符,比如:
bg+→ background:#fff url() 0 0 no-repeat;
【03】emmet系列之CSS语法的更多相关文章
- 【02】emmet系列之HTML语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 初始化 :快速编写HTML ...
- 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...
- 【05】emmet系列之各种缩写
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 各种缩写 缩写:! & ...
- 【04】emmet系列之编辑器
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 前端开发人员,常用的是s ...
- 【01】emmet系列之基础介绍
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 相关网址 官网:http: ...
- emmet 系列(1)基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...
- Emmet 生成 HTML 的语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
随机推荐
- nginx 配置tp3.2
server { listen 80; server_name 域名; #charset koi8-r; #access_log /var/log/nginx/host.access.log main ...
- MyEclipse常用设置记录
MyEclipse版本:MyEclipse 2014 Blue版本. 设置内容: 1.内存优化 <MyEclipse_ROOT>/myeclipse-blue.ini文件 主要修改-vma ...
- 【先定一个小目标】Ubuntu 16.04 搭建 zookeeper
ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供了诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知和分布式锁等分布式基础服务.由于 Zo ...
- [转]无废话SharePoint入门教程一[SharePoint概述]
本文转自:http://www.cnblogs.com/iamlilinfeng/p/3026332.html 一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到ShareP ...
- AJPFX关于TreeSet集合的介绍
需求:键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低输出到控制台.分析:1.创建键盘录入对象: 2.创建TreeSet集合,使用匿名内部类实现Compa ...
- 有关HTML版本
先说说HTML的简史:从HTML1.0~2.0(1989~1991)>HTML3(1995)>HTML4(1998)>HTML4.01(1999)>XHTML1.0(2001) ...
- Angular jsonp 同源策略的问题
引用:http://www.cnblogs.com/dengzy/p/5388357.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决 ...
- iOS/Android 视频编辑SDK
锐动天地为开发者提供短视频编辑.特效.直播.录屏.编解码.视频转换,等多种解决方案,涵盖PC.iOS.Android多平台.以市场为导向,不断打磨并创新技术,在稳定性,兼容性,硬件设备效率优化上千捶百 ...
- iOS Programming UINavigationController
iOS Programming UINavigationController the Settings application has multiple related screens of info ...
- js控制页面跳转,清缓存,强制刷新页面
单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...