返回Web Essentials功能目录

一些Javascript功能也可以用于TypeScript。

本篇目录

功能

最小化HTML文件

选中要最小化的.html文件，然后在web essentials的菜单中选择“Minify html file(s)”选项，即可生成一个.min.html文件，该功能类似于js和css文件的压缩。具体操作以及效果见下图：

Bundle Html文件

在解决方案浏览器中选择2个或更多html文件，然后右键选择"Create HTML Bundle File"。该功能简化了使用SPA时bundle多个Html模板。具体操作如下动图：

图片悬停预览

当鼠标悬停在标签上时，会看到图片的预览：

ZenCoding

ZenCoding语法

想要阅读更多关于Zen Coding的语法，请点击这里。
ZenCoding是开源的，点击查看Github上的源码。下面通过一个动态图演示一下：

Lorem Pixel生成器

作为ZenCoding的一部分，你也可以直接在Html编辑器中生成Lorem Pixel的代码。只需要输入pix-200x200-animals，然后按下TAB键，就会插入一张200x200的动物图片。

LESS

预览窗口

LESS的预览窗口位于编辑器的右边，每当保存less文件时，就会展示编译后的CSS内容。

提取到变量

Web Essentials简化了将属性值转成LESS变量。选择你想提取的文本，然后右键selection，点击"Extract to variable..."。

Web Essentials之HTML和CSS操作技巧的更多相关文章

  1. Web Essentials之样式表StyleSheets

    返回Web Essentials功能目录 本篇目录 智能感知 视觉提示 验证 Web标准 转换器 Web Essentials中大多数的CSS功能也适用于LESS. 智能感知 生成供应商特定的属性 如 ...

  2. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  3. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  4. Web Essentials之Browser Link

    返回Web Essentials功能目录 本篇目录 功能 当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Li ...

  5. VS2015前端工具：NPM和Web Essentials

    VS2015前端工具:NPM和Web Essentials 1.写作背景 想在5月份前换个工作环境了,“检讨”一下自己混饭的技术水平和处世的人脉关系,觉得很不给力!为人方面,人各有志也就不纠结了,但本 ...

  6. Web程序员必备的CSS工具

    对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或 ...

  7. css兼容技巧

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

  9. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

随机推荐

  1. Linux 流程控制语句 if else、for、while、until

    1. 单分支if条件语句 书写方式1: if [ 条件判断式 ]; then 执行程序代码 fi 书写方式2: if [ 条件判断式 ] then 执行程序代码 fi 举例: if [ $rate - ...

  2. VS2012开发工具BUG

    发现VS2012开发工具 新建立项目名称长度限制的一个bug, 向导方式名称长度限制56个,但建立好的项目名称长度是可以改的很长很长. 也有想是不是生成程序集的名称会有限制,同样这里生成程序集名称,及 ...

  3. SQL Server 2008 r2 输入SQL语句不能自动提示的解决办法

    先利用“配置工具-SQL Server 配置管理器”关闭所有MSSQLSERVER服务,利用SQL Server Installation Center,进入Maintenance,选择Repair, ...

  4. Jackson fasterxml跟codehaus的区别 （fasterxml vs. codehaus） -- 转载

    Jackson fasterxml和codehaus的区别: 他们是Jackson的两大分支.也是两个版本的不同包名.Jackson从2.0开始改用新的包名fasterxml:1.x版本的包名是cod ...

  5. dp、px、dpi、ppi

    概念: dpi(Dots Per Inch):每英寸上的点数,最初用于衡量打印物上每英寸的点数密度,打印机在一英寸内打多少个点.DPI值越小越不精细. ppi(Pixels Per Inch):每英寸 ...

  6. C#方法中三个重要的参数：out、ref、params

    备注:适用于初学者,自学于传智播客. 1.out参数. 概念:如果在一个方法中,返回多个相同类型值的时候,可以考虑返回一数组.但是返回多个不同类型值的时候,返回数组显然不能解决问题,这时就引入out参 ...

  7. 手动获取酷我Mp3外链

    素材→http://player.kuwo.cn/webmusic/st/getNewMuiseByRid?rid=MUSIC_随便找一首歌http://www.kuwo.cn/yinyue/1034 ...

  8. css3选择器总结

    1.p[class^/$/*=td]所有p标签的前面带有td/后面带有td/所有带有td的类的三种样式. 2.div:first-child/last-child/nth-child()在父元素下的第 ...

  9. chrome浏览器插件的开启快捷键

    用鼠标去打开chrome浏览器右上角的插件,总是感觉太麻烦,例如你想用有道词典的插件查一个单词的意思,用鼠标把有道插件打开,然后再回到键盘上敲单词,真的好麻烦.现在只要设置一下插件的快捷键就OK了. ...

  10. 移动web前端小结（一）--摘自小鹿_同学

    一.框架 框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate 开始一个 ...