返回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. win2008 IIS与php整合

    首先安装好IIS 安装的时候 要注意三个地方打得勾 注:   CGI  会在IIS+PHP的环境中用到 php.ini default_socket_timeout = 60extension_dir ...

  2. dedecms内容管理系统学习

    在复习完基础知识和学习了tp3.2之后,我们开始学习一些开源的产品,如dedecms:

  3. Use Apache HttpClient to Post json data

    import org.apache.commons.io.IOUtils;import org.apache.http.HttpResponse;import org.apache.http.clie ...

  4. Linux下Hadoop2.6.0集群环境的搭建

    本文旨在提供最基本的,可以用于在生产环境进行Hadoop.HDFS分布式环境的搭建,对自己是个总结和整理,也能方便新人学习使用. 基础环境 JDK的安装与配置 现在直接到Oracle官网(http:/ ...

  5. poj3728

    [描述] 有 N 城 市在一个国家,有一个且只有一个简单的路径每一对城市之间. 一个商人选择了一些路径和想赚尽可能多的钱在每个路径. 当他沿着一条路径,可以选择一个城市购买一些商品和出售他们在一个城市 ...

  6. C#is运算符的作用

    is运算符的含义:检查对象是不是给定类型,或者是否可以转换为给定类型,如果是,这个运算符就返回True. is运算符的语法:<operand> is <type> 这个表达式的 ...

  7. UDP 一个封锁操作被对 WSACancelBlockingCall 的调用中断

    using System; using System.Collections.Generic; using System.Text; using System.Net.Sockets; using S ...

  8. linux bash中too many arguments问题的解决方法

    今天在编写shell脚本时,在if条件后跟的是[ $pid ],执行脚本的时候报 然后我输入改为[[$pid]]后,再执行脚本,就成功了,代码如下: #!/bin/bash pid=`ps -ef|g ...

  9. 虚拟机安装Ubuntu到U盘

    这篇经验中特指系统安装到U盘,系统在U盘上,不是双系统,不会改变源系统的设置.只需在启动的时候选择启动路径,就可以从U盘启动你的系统.本文仅仅Ubuntu系统,举一反三可以按照此方法安装各种各样的系统 ...

  10. Python学习之路-Day4

    1.函数 函数定义 def  func(aa):         def:表示函数的关键字  func:函数名,即函数的名称,可根据函数名调用函数 print('.....')        prin ...