Visual Formatting

pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t

top:;

t:a

top:auto;

r

right:;

r:a

right:auto;

b

bottom:;

b:a

bottom:auto;

l

left:;

l:a

left:auto;

z

z-index:;

z:a

z-index:auto;

fl

float:left;

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

cl

clear:both;

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

d

display:block;

d:n

display:none;

d:b

display:block;

d:f

display:flex;

d:if

display:inline-flex;

什么是HBuilder？

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

如何安装 HBuilder？

HBuilder下载地址：在HBuilder官网http://www.dcloud.io/点击免费下载，下载最新版的HBuilder。

HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

使用HBuilder新建项目

依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))

如上图，请在A处填写新建项目的名称，B处填写(或选择)项目保存路径(更改此路径HBuilder会记录，下次默认使用更改后的路径)，C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)

使用 HBuilder 创建 HTML 页面

在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择 HTML 文件(按下 Ctrl+N,W 可以触发快速新建( MacOS 请使用 Command+N,然后左键点击 HTML 文件)),并选择空白文件模板,如下图

使用HBuilder边改边看试试查看编程效果

win系统按下Ctrl+P(MacOS为Command+P)进入边改边看模式,在此模式下,如果当前打开的是HTML文件，每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件，如与当前浏览器视图打开的页面有引用关系，也会刷新)

HBuilder代码块大量减少重复代码工作量

在打开的getstart.html中输入H,如下图

然后按下8,自动生成HTML的基本代码如下图

什么是代码块?

代码块是常用的代码组合，比如在js中输入$，回车，则可以自动输入document.getElementById(id)。

查看、编辑代码块可以在工具-自定义代码块中，选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中，点击详细信息右下角的修改图标进行修改和查看。

• 代码块激活字符原则1:连续单词的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

• 代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style，通常，敲最多4个字母即可匹配到需要的代码块，不需要完整录入，如sc回车、st回车，即可完成script、style标签的输入。

• 代码块激活字符原则3:同一个tag，有多个代码块输出，则在最后加后缀。比如meta输出但metau则输出，metag同理。

• 代码块激活字符原则4:如果原始语法超过4个字符，针对常用语法，则第一个单词的激活符使用缩写。比如input button，缩写为inbutton，同理intext是输入框。

• 代码块激活字符原则5:js的关键字代码块，是在关键字最后加一个重复字母。比如if直接敲会提示if关键字，但iff回车，则出现if代码块。类似的有forr、withh等。由于funtion字母较长，为加快输入速度，取fun缩写，比如funn，输出function代码块，而funa和func，分别输出匿名函数和闭包。

灵活的快捷键使得编程过程手不离键盘

效果如下图

• 新建html基本模板后,当前光标处于title标签内,此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行

• 我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图

• 使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图

• 此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图

• 上图中的绿色竖线，是代码块中指定的下一个编辑位置,敲击回车光标会直接跳转至竖线位置

• 此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域

• 定义一个Css类classA：输入. c l a s s A { 回车,f o n t 回车 回车 回车

• 然后按alt+下,alt+下跳转至下一个编辑区域

• 依次输入< d i v 也可输入<dv回车、<iv回车,语法助手可以通过模糊匹配获知想要生成的标签)如下图

• 如上图所示,代码助手左侧包含数字，可以使用这些数字选择对应的条目,右侧包含浏览器兼容性数据及示例

• 输入i 回车 d 1,右箭头,空格,c 回车 回车

• 鼠标在div标签的class属性classA上悬浮,按下Alt和左键,点击后可跳转至classA定义处

• Ctrl+回车

• div也可以通过代码块生成如输入divc回车回车回车,输入helloworld如下图

• 向下,回车

使用CSS选择器语法来快速开发HTML和CSS(支持Emmet)

输入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代码如下图

HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS,如想深入了解Emmet请移步http://www.emmet.io/

强大的JS解析引擎大大加快JS开发的速度

JS中提示HTML、CSS

JS提示html的ID

JS提示html的tagname

JS提示css类名

JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type

JS中提示JSON

JS提示自定义系统方法

JS提示对象引用及其属性、方法

JS提示闭包对象

跳转到class、id、js方法定义处

按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以哦

跳转到JS方法定义处 如下图

跳转到CSS类定义处 如下图

跳转到ID定义处 如下图

跳转到文件 如下图

更多挖宝

• 跳转助手、选择助手、转义助手、快捷键助手，让你手不离键盘。

• HTML5+支持、手机真机连调、云编译，方便开发跨手机平台的APP。

• 更多精彩功能：重构 | 大纲 | 任务 | 版本历史 | 内置webserver | 实时升级 | 安全工程管理 | 包围 | 掩码转换 | 智能纠错 | 折叠代码 | 转到定义 | 格式化代码 | URL编解码 | 进制转换 | 自动闭合。

• 还不满足？下载插件增强更多功能，高手更可开发插件，并共享插件造福所有开发者。

HBuilder插件安装指南

前言

HBuilder是基于eclipse 3.7 开发的，英文版本为indigo，对eclipse3.x版本的插件是兼容的，不兼容eclipse4.x版本的插件。目前在HBuilder的工具→插件安装中已经集成了svn、git、php等常用的插件。以下为其他一些插件，如需要请按本文步骤进行安装。

VIM插件

1.依次点击工具-插件安装
2. 点击手动安装eclipse插件
3. 点击添加
4. 在弹出框的名称随便填，地址填http://update.dcloud.net.cn/test/plugin_for_test如下图

5.点击确定，等待加载，选择vrapper
6. 一直点下一步，出现授权协议时点同意，装完后重启即可

node.js插件

参见node.js插件安装

全屏插件

点击这里下载全屏插件下载
解压到HBuilder根目录（注意不要改文件夹的名字），启动HBuilder，然后再次重启HBuilder即可。默认热键是CTRL+ALT+Z，你可以在工具-选项中搜索快捷键，在快捷键列表中搜索全屏，修改绑定热键。

Eclipse Java Development Tools

Java开发环境，如需编辑java类和jsp需安装此插件，安装办法参见JDT插件安装办法

Eclipse Android Development Tools

Android开发环境，安装办法参见ADT插件安装办法

CVS

CVS插件被我们精简掉了，如需使用cvs插件，请下载cvs插件。将压缩包里的jar包放到HBuilder的dropins目录下，重启HBuilder即可

sexftp

HBuilder自带的插件列表中已包含ftp插件，但有用户反馈目前集成的ftp插件不是很好用，而且在某些情况下目前集成的ftp插件会出现问题。有不少推荐了sexftp，但是由于sexftp插件依赖JDT，导致暂时无法集成该插件，如有需要可按此步骤安装插件SexFtp插件安装

tomcat插件

需要先安装JDT，然后安装tomcat插件，下载后把com.sysdeo.eclipse.tomcat_3.2.1目录放在HBuilder的dropins目录下重启HBuilder即可

HBuilder一键图片生成器

网友开发了一个HBuilder使用图标一键生成工具。参见网友分享懒人制作HBuilder图片工具

PDF预览插件

依次点击工具-插件安装-手动安装eclipse插件
点击添加，在名称处填写pdf（可以随意填写），在地址处填写http://borisvl.github.io/Pdf4Eclipse/如下图

点击确定等待加载，加载完毕后勾选安装即可

如何给SVN、GIT等绑定操作快捷键

1.切换到你想用快捷键的视图（如开发视图、边改边看视图）
2. 点击视图、定制透视图

3. 选择命令选项卡

4. 选择SVN或Git
5. 设置成功后会在帮助菜单前生成SVN、Git等菜单
6. 在工具-选项-快捷键中为SVN、Git等操作绑定快捷键即可

语法

Child: >

nav>ul>li

<nav>     <ul>         <li></li>     </ul> </nav>

Sibling: +

div+p+bq

<div></div> <p></p> <blockquote></blockquote>

Climb-up: ^

div+div>p>span+em^bq

<div></div> <div>     <p>        <span></span>        <em></em>    </p>     <blockquote></blockquote> </div>

div+div>p>span+em^^bq

<div></div> <div>     <p>        <span></span>        <em></em>    </p> </div> <blockquote></blockquote>

Grouping: ()

div>(header>ul>li*2>a)+footer>p

<div>     <header>         <ul>             <li><a href=""></a></li>             <li><a href=""></a></li>         </ul>     </header>     <footer>         <p></p>     </footer> </div>

(div>dl>(dt+dd)*3)+footer>p

<div>     <dl>         <dt></dt>         <dd></dd>         <dt></dt>            <dd></dd>         <dt></dt>         <dd></dd>     </dl> </div> <footer>     <p></p> </footer>

Multiplication: *

ul>li*5

<ul>     <li></li>         <li></li>     <li></li>     <li></li>     <li></li> </ul>

Item numbering: $

ul>li.item$*5

<ul>     <li class="item1"></li>     <li class="item2"></li>     <li class="item3"></li>     <li class="item4"></li>     <li class="item5"></li> </ul>

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

ul>li.item$$$*5

<ul>     <li class="item001"></li>     <li class="item002"></li>     <li class="item003"></li>     <li class="item004"></li>     <li class="item005"></li> </ul>

ul>li.item$@-*5

<ul>     <li class="item5"></li>     <li class="item4"></li>     <li class="item3"></li>     <li class="item2"></li>     <li class="item1"></li> </ul>

ul>li.item$@3*5

<ul>     <li class="item3"></li>     <li class="item4"></li>     <li class="item5"></li>     <li class="item6"></li>     <li class="item7"></li> </ul>

ID and CLASS attributes

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

Custom attributes

p[title="Hello world"]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

[a='value1' b="value2"]

<div a="value1" b="value2"></div>

Text: {}

a{Click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

Implicit tag names

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul> <li class="class"></li> </ul>

table>.row>.col

<table>     <tr class="row">         <td class="col"></td>     </tr> </table>

HTML

All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.

!

Alias of html:5

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

a

<a href=""></a>

a:link

<a href="http://" rel="external nofollow" target="_blank" ></a>

a:mail

<a href="mailto:"></a>

abbr

<abbr title=""></abbr>

acronym, acr

<acronym title=""></acronym>

base

<base href="" />

basefont

<basefont />

br

<br />

frame

<frame />

hr

<hr />

bdo

<bdo dir=""></bdo>

bdo:r

<bdo dir="rtl"></bdo>

bdo:l

<bdo dir="ltr"></bdo>

col

<col />

link

<link rel="stylesheet" href="" />

link:css

<link rel="stylesheet" href="style.css" />

link:print

<link rel="stylesheet" href="print.css" media="print" />

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

<link rel="apple-touch-icon" href="favicon.png" />

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im

<link rel="import" href="component.html" />

meta

<meta />

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale= 1.0, minimum-scale=1.0" />

meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

<style></style>

script

<script></script>

script:src

<script src=""></script>

img

<img src="" alt="" />

img:srcset, img:s

<img srcset="" src="" alt="" />

img:sizes, img:z

<img sizes="" srcset="" src="" alt="" />

picture

<picture></picture>

source, src

<source />

source:src, src:sc

<source src="" type="" />

source:srcset, src:s

<source srcset="" />

source:media, src:m

<source media="(min-width: )" srcset="" />

source:type, src:t

<source srcset="" type="image/" />

source:sizes, src:z

<source sizes="" srcset="" />

source:media:type, src:mt

<source media="(min-width: )" srcset="" type="image/" />

source:media:sizes, src:mz

<source media="(min-width: )" sizes="" srcset="" />

source:sizes:type, src:zt

<source sizes="" srcset="" type="image/" />

iframe

<iframe src="" frameborder="0"></iframe>

embed

<embed src="" type="" />

object

<object data="" type=""></object>

param

<param name="" value="" />

map

<map name=""></map>

area

<area shape="" coords="" href="" alt="" />

area:d

<area shape="default" href="" alt="" />

area:c

<area shape="circle" coords="" href="" alt="" />

area:r

<area shape="rect" coords="" href="" alt="" />

area:p

<area shape="poly" coords="" href="" alt="" />

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

label

<label for=""></label>

input

<input type="text" />

inp

<input type="text" name="" id="" />

input:hidden, input:h

Alias of input[type=hidden name]

<input type="hidden" name="" />

input:text, input:t

Alias of inp

<input type="text" name="" id="" />

input:search

Alias of inp[type=search]

<input type="search" name="" id="" />

input:email

Alias of inp[type=email]

<input type="email" name="" id="" />

input:url

Alias of inp[type=url]

<input type="url" name="" id="" />

input:password, input:p

Alias of inp[type=password]

<input type="password" name="" id="" />

input:datetime

Alias of inp[type=datetime]

<input type="datetime" name="" id="" />

input:date

Alias of inp[type=date]

<input type="date" name="" id="" />

input:datetime-local

Alias of inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

input:month

Alias of inp[type=month]

<input type="month" name="" id="" />

input:week

Alias of inp[type=week]

<input type="week" name="" id="" />

input:time

Alias of inp[type=time]

<input type="time" name="" id="" />

input:tel

Alias of inp[type=tel]

<input type="tel" name="" id="" />

input:number

Alias of inp[type=number]

<input type="number" name="" id="" />

input:color

Alias of inp[type=color]

<input type="color" name="" id="" />

input:checkbox, input:c

Alias of inp[type=checkbox]

<input type="checkbox" name="" id="" />

input:radio, input:r

Alias of inp[type=radio]

<input type="radio" name="" id="" />

input:range

Alias of inp[type=range]

<input type="range" name="" id="" />

input:file, input:f

Alias of inp[type=file]

<input type="file" name="" id="" />

input:submit, input:s

<input type="submit" value="" />

input:image, input:i

<input type="image" src="" alt="" />

input:button, input:b

<input type="button" value="" />

isindex

<isindex />

input:reset

Alias of input:button[type=reset]

<input type="reset" value="" />

select

<select name="" id=""></select>

select:disabled, select:d

Alias of select[disabled.]

<select name="" id="" disabled="disabled"></select>

option, opt

<option value=""></option>

textarea

<textarea name="" id="" cols="30" rows="10"> </textarea>

marquee

<marquee behavior="" direction=""></marquee>

menu:context, menu:c

Alias of menu[type=context]>

<menu type="context"></menu>

menu:toolbar, menu:t

Alias of menu[type=toolbar]>

<menu type="toolbar"></menu>

video

<video src=""></video>

audio

<audio src=""></audio>

html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

<keygen />

command

<command />

button:submit, button:s, btn:s

Alias of button[type=submit]

<button type="submit"></button>

button:reset, button:r, btn:r

Alias of button[type=reset]

<button type="reset"></button>

button:disabled, button:d, btn:d

Alias of button[disabled.]

<button disabled="disabled"></button>

fieldset:disabled, fieldset:d, fset:d, fst:d

Alias of fieldset[disabled.]

<fieldset disabled="disabled"></fieldset>

bq

Alias of blockquote

<blockquote></blockquote>

fig

Alias of figure

<figure></figure>

figc

Alias of figcaption

<figcaption></figcaption>

pic

Alias of picture

<picture></picture>

ifr

Alias of iframe

<iframe src="" frameborder="0"></iframe>

emb

Alias of embed

<embed src="" type="" />

obj

Alias of object

<object data="" type=""></object>

cap

Alias of caption

<caption></caption>

colg

Alias of colgroup

<colgroup></colgroup>

fst, fset

Alias of fieldset

<fieldset></fieldset>

btn

Alias of button

<button></button>

optg

Alias of optgroup

<optgroup></optgroup>

tarea

Alias of textarea

<textarea name="" id="" cols="30" rows="10"> </textarea>

leg

Alias of legend

<legend></legend>

sect

Alias of section

<section></section>

art

Alias of article

<article></article>

hdr

Alias of header

<header></header>

ftr

Alias of footer

<footer></footer>

adr

Alias of address

<address></address>

dlg

Alias of dialog

<dialog></dialog>

str

Alias of strong

<strong></strong>

prog

Alias of progress

<progress></progress>

mn

Alias of main

<main></main>

tem

Alias of template

<template></template>

datag

Alias of datagrid

<datagrid></datagrid>

datal

Alias of datalist

<datalist></datalist>

kg

Alias of keygen

<keygen />

out

Alias of output

<output></output>

det

Alias of details

<details></details>

cmd

Alias of command

<command />

doc

Alias of html>(head>meta[charset=${charset}]+title{${1:Document}})+body

<html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>

doc4

Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})+body

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Document</title> </head> <body> </body> </html>

ri:dpr, ri:d

Alias of img:s

<img srcset="" src="" alt="" />

ri:viewport, ri:v

Alias of img:z

<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a

Alias of pic>src:m+img

<picture>     <source media="(min-width: )" srcset="" />     <img src="" alt="" /> </picture>

ri:type, ri:t

Alias of pic>src:t+img

<picture>     <source srcset="" type="image/" />     <img src="" alt="" /> </picture>

html:4t

Alias of !!!4t+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en">     <head>         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

html:4s

Alias of !!!4s+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">     <head>         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

html:xt

Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     <head>         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

html:xs

Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     <head>         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

html:xxs

Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     <head>         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

html:5

Alias of !!!+doc[lang=${lang}]

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8" />         <title>Document</title>     </head>     <body>     </body> </html>

ol+

Alias of ol>li

<ol>     <li></li> </ol>

ul+

Alias of ul>li

<ul>     <li></li> </ul>

dl+

Alias of dl>dt+dd

<dl>     <dt></dt>     <dd></dd> </dl>

map+

Alias of map>area

<map name="">     <area shape="" coords="" href="" alt="" /> </map>

table+

Alias of table>tr>td

<table>     <tr>         <td></td>     </tr> </table>

colgroup+, colg+

Alias of colgroup>col

<colgroup>     <col /> </colgroup>

tr+

Alias of tr>td

<tr>     <td></td> </tr>

select+

Alias of select>option

<select name="" id="">     <option value=""></option> </select>

optgroup+, optg+

Alias of optgroup>option

<optgroup>     <option value=""></option> </optgroup>

pic+

Alias of picture>source:srcset+img

<picture>     <source srcset="" />     <img src="" alt="" /> </picture>

!!!

<!DOCTYPE html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c

<!-- ${child} -->

cc:ie6

<!--[if lte IE 6]>     ${child} <![endif]-->

cc:ie

<!--[if IE]>     ${child} <![endif]-->

cc:noie

<!--[if !IE]>    <!--> ${child} <!--<![endif]-->

CSS

CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.

If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;

You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo

Visual Formatting

pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t

top:;

t:a

top:auto;

r

right:;

r:a

right:auto;

b

bottom:;

b:a

bottom:auto;

l

left:;

l:a

left:auto;

z

z-index:;

z:a

z-index:auto;

fl

float:left;

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

cl

clear:both;

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

d

display:block;

d:n

display:none;

d:b

display:block;

d:f

display:flex;

d:if

display:inline-flex;