【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 ...
随机推荐
- Windows中句柄和ID的区别
写在前面:这里介绍句柄 对于“句柄”,在下一直停留在一知半解的认识层面,近日在下学习Windows编程,决定趁此机会将句柄彻底搞清楚.查阅了一些网络上的资料,发现网络上的讲解大概可以分为两类:一种是以 ...
- [USACO 2012 Jan Silver] Delivery Route【拆点】
传送门:http://www.usaco.org/index.php?page=viewproblem2&cpid=106 这道题还真是完全没思路,真的不知道怎么做,但是看了题解后恍然大悟. ...
- java数组实现买彩票(阿基老师的打乱排序思想)
package com.wh.array; public class Lottery { public static void main(String[] args) { int[] num=new ...
- fix for 12c profile
.for CDBS run as sysDBa CREATE OR REPLACE FUNCTION verify_function (username varchar2, password varc ...
- Neither BindingResult nor plain target object for bean name 'user' available as request attribute
这个异常是因为jsp页面写错了. 把<form:form></form:form>标签改成普通的标签即可. 应该是第一次访问的时候,user是空的.但springmvc不能是空 ...
- C# Equals的重写
using System; using System.Collections.Generic; using System.Text; namespace Equal { using Syste ...
- 12.1Java-构造方法
一.构造方法 作用:在new的同时对成员变量赋值,给对象的属性初始化赋值格式:权限 方法名(参数列表){}方法的名字,必须和类的名字完全一致,大小写一致构造方法不许写返回值类型,如void,int 构 ...
- 移动端展示pdf(在线打开pdf)
需求:在手机微信浏览器或者其他浏览器中打开pdf 准备:前端插件:查找pdf.js 官网地址:http://mozilla.github.io/pdf.js/ 在官网中下载demo 注释:pdf的d ...
- git创建分支及日常使用
克隆代码 git clone https://github.com/master-dev.git 查看所有分支 git branch --all # 默认只有master分支,所以会看到如下两个分支 ...
- vscode增加xdebug扩展
首先确保php增加了xdebug扩展,方法很多,可参考 https://www.cnblogs.com/wanghaokun/p/9084188.html.可通过phpinfo()查看是否已开启支持. ...