emmet插件使用(Css)

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



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566093.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 小白从零开始 PyQt5 项目实战(1)安装与环境配置

本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始?从软件安装、环境配置开始。 不跳过一个细节,不漏掉一行代码,不省略一个例图。 欢迎关注『Python 小白从零开始 PyQt5 项目实战…

emmet使用(HTML)

emmet使用(HTML) htmlTab直接生成固定标签 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> 分组&#xff1a;可以通过嵌套来快速生成一些代码块 (.foo>h1)(.bar>h2) 隐式标签 在过去的版本中省…

Python 小白从零开始 PyQt5 项目实战(2)菜单和工具栏

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本文详细解读通过 QtDesigner 创建主窗口、菜单栏…

Python 小白从零开始 PyQt5 项目实战(3)信号与槽的连接

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本文讲解信号与槽的连接机制&#xff0c;详细示范…

Css内边距与外边距

Css内边距与外边距 Css内边距 Css外边距margin Css外边距margin 设置外边距最简单的方法就是margin属性。margin属性接受任何长度单位&#xff0c;可以是像素&#xff0c;英寸&#xff0c;毫米或em margin可以设置为auto。更常见的做法就是为外边距设置长度值。下面的声明在h1…

Python 小白从零开始 PyQt5 项目实战(4)基本控件

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 PyQt5 提供了丰富的输入输出控件。本文介绍通过 …

Python 小白从零开始 PyQt5 项目实战(5)布局管理

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 布局管理就是管理图形窗口中各个部件的位置和排列…

Css外边距合并

Css外边距合并 外边距合并是一个相当简单的概念&#xff0c;但是&#xff0c;在实践中对网页进行布局时&#xff0c;它会造成许多混淆。 简单的说&#xff0c;外边距合并指的是&#xff0c;当两个垂直外边距相遇时&#xff0c;它们将形成一个外边距。合并后的外边距的高度等于两…

Python 小白从零开始 PyQt5 项目实战(6)窗口切换的堆叠布局

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 软件项目中经常需要多种不同的图形界面&#xff0c;以适应不同的任务场景。选项卡控件&#xff08;QTackedWidget&#xff09;通过标签选择打开对应的对话框页面&#xff0c;不需要…

Css链接

Css链接 四种状态 当为链接的不同状态设置样式时&#xff0c;请按照以下次序的规则&#xff1a; a:hover必须位于a:link和a:visited之后&#xff0c;a:active必须位于a:hover之后 文本修饰 text-decoration属性大多用于去掉链接中的下划线 a:link{text-decoration:none;} a:li…

Python 小白从零开始 PyQt5 项目实战(7)折叠侧边栏的实现

单式状态栏&#xff0c;位于于窗口的左右侧边&#xff0c;可以实现软件功能或目录的导航。 本文详细介绍用 QTreeWidget 部件实现目录结构的折叠侧边栏&#xff0c;与用 QToolBox 部件实现垂直菜单结构的折叠侧边栏&#xff0c;通过案例带小白建立两种典型的折叠侧边栏。 至此&…

Css轮廓

Css轮廓 轮廓是绘制于元素周围的一条线&#xff0c;位于边缘的外围&#xff0c;可起到突出元素的作用。Css outline属性规定元素轮廓的样式&#xff0c;颜色和宽度 outline p{ outline:#00FF00 dotted thick; }

Python 小白从零开始 PyQt5 项目实战(8)汇总篇(完整例程)

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本系列从软件安装、环境配置开始&#xff0c;介绍了基本应用&#xff1a;菜单和工具栏、基本控件&#xf…

【youcans 的图像处理学习课】1. 安装与环境配置

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的图像处理学习课】1. 安装与环境配置 1. OpenCV 计算机视觉库 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个跨平台的…

Css框模型

Css框模型 术语翻译&#xff1a; element:元素 padding&#xff1a;内边距 border&#xff1a;边框 margin&#xff1a;外边框

【youcans 的图像处理学习课】2. 图像读取与显示

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的图像处理学习课】2. 图像读取与显示 文章目录【youcans 的图像处理学习课】2. 图像读取与显示1. 图像的读取2. 图像的保存3. 图像的显示4. 通过 mat…

Css文本

Css文本 Css文本 Css文本属性可以定义文本外观。通过文本属性&#xff0c;你可以改变文本的颜色、字符间距、对齐文本&#xff0c;装饰文本&#xff0c;对文本进行缩进等等字符转换&#xff1a;text-transform 1.none2.uppercase3.lowercase 4.capitalize 默认值none对文本不做…

【youcans 的图像处理学习课】3. 图像的创建与修改

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的图像处理学习课】3. 图像的创建与修改 文章目录【youcans 的图像处理学习课】3. 图像的创建与修改1. 图像基本知识1.1 图像颜色的分类1.2 数字图像的…

【OpenCV 例程300篇】01. 图像的读取(cv2.imread)

专栏地址&#xff1a;『youcans 的 OpenCV 例程300篇 - 总目录』 01. 图像的读取&#xff08;cv2.imread&#xff09; 02. 图像的保存&#xff08;cv2.imwrite&#xff09; 03. 图像的显示&#xff08;cv2.imshow&#xff09; 04. 用 matplotlib 显示图像&#xff08;plt.imsho…

【OpenCV 例程300篇】02. 图像的保存(cv2.imwrite)

专栏地址&#xff1a;『youcans 的 OpenCV 例程300篇 - 总目录』 01. 图像的读取&#xff08;cv2.imread&#xff09; 02. 图像的保存&#xff08;cv2.imwrite&#xff09; 03. 图像的显示&#xff08;cv2.imshow&#xff09; 04. 用 matplotlib 显示图像&#xff08;plt.imsho…