HTMLayout界面CSSS样式解析笔记
HTMLayout学习笔记
by BBDXF
一、界面篇
学习界面需要有一定的HTML、CSS认知，如果你问为什么，那就当我白说。
由于界面库官方没有给一个完善的User guide，所有的学习都靠自己，而唯一的标准教程就是SDK中给的例程，所以为了完善地学习此库，以SDK中的例程一个个解析学习。
此篇主要来解析html_samples下的界面编写，我想这是大家都非常关心的话题，所以放在第一位。（PS：由于界面编写需要很多 HTML+CSS 知识，我也是新手，没有多少这方面的学习，所以如有错误纯属正常，望谅解。）
参考文档：http://www.terrainformatica.com/wiki/h-smile/drag-n-drop?do=index
1、@font-face
此例程主要讲解字体（自定义字体）在界面中的使用。（以后若无特殊情况，都会按照以下形式【文件结构+代码+解析】组织文章）
文件结构：
NinjaLine.ttf
test.htm
代码：在Style中，插入
@font-face
{
font-family: NinjaLine;
src: url(NinjaLine.ttf);
}
p
{
font: 18pt NinjaLine;
}
解析：其中font:18pt NinjaLine; 是设置段落<p></p>之内的文字以NinjaLine字体显示。而由于这种字体没有在系统里注册，所以不能直接调用，需要按照@font-face{...}的形式给予声明（和C/C++的函数声明的感觉差不多），如果是系统里已经有的字体，如“宋体”、“楷体”等就可以不声明，直接使用。
2、@image-map
这部分讲的是@image-map的用法。
文件结构：
cmd.bat
dpi-aware.htm
rttb.png
star-1x.png
star-2x.png
test.htm
toolbar-icons.htm
第一个文件：dpi-aware.htm,讲的是关于自适应DPI的问题。
代码：
@image-map dpi-aware {
src: url(star-1x.png) 100dpi,
url(star-2x.png) ;
}
#star {
size:180dip;
background: no-repeat 50% 50%;
background-image: image-map(dpi-aware);
border:1px solid;
}
#star-no {
size:180dip;
background: no-repeat 50% 50%;
background-image: url(star-1x.png);
border:1px solid;
}
//HTML代码省略
解析：
代码中比较值得注意的就是声明了一个@image-map dpi-aware {}(不专业，但是方便理解就这么说了)，然后再#star这一块调用image-map(dpi-aware)，将它设置为背景图片。在我的电脑上运行的效果是#star和#star-no显示的是同一张图片（大家的效果都应该差不多），但是将声明的部分改为：
@image-map dpi-aware {
src: url(star-1x.png) 90dpi,
url(star-2x.png) ;
}
之后，显示的是声明的第二张图片。为什么呢？
官方给出的说明其实已经解释了这个问题，@image-map dpi-aware 声明，当被调用时，会根据电脑屏幕的DPI（每英寸点数，win7可以通过注册表 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetric\AppliedDPI查看），当电脑DPI小于设定的100dpi时，就会调用第一张图片，否则就是第二张了。总的来说，就是根据屏幕DPI自适应显示相应的图片。
第二个文件：test.htm 是关于设置样式的问题，官方没给任何解释，但是根据第三个文件内容，可以很明显地看出来，它啥也不是，就是个Test,Pass掉。
第三个文件：toolbar-icons.htm 这个文件很重要，他给我们提供了一种很方便地加载类似MFC中工具条界面的方法。
代码：
Style部分样式代码：
@image-map tb-icon
{
src:url(rttb.png);
cells:15 2;
items: ulist,
olist,
unindent,
indent,
picture,
table,
link,
align-left,
align-center,
align-right,
align-justify,
align,
fullscreen,
unfullscreen,
props,
bold,
italic,
underline,
strikethrough,
font-family,
font-size,
text-color,
text-back-color,
source;
}
toolbar {
display:block;
display-model:block-inside;
flow:horizontal; border-spacing:2px;
padding:0;
border-left: 1px solid #F4F4F4;
border-bottom: 1px solid #BBB;
background-color: #F1F1F1 #F1F1F1 #DADADA #DADADA;
}
toolbar > widget.button {
behavior:clickable;
size:21px;
padding:0;
foreground:no-repeat 50% 50%; padding:3px;
foreground-repeat:no-repeat;
background-image:none;
background-repeat:stretch;
hit-margin: 2px;
margin: 2px;
transition:none;
}
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); }
toolbar > widget.button.italic { foreground-image:image-map(tb-icon,italic); }
....(类似的省略)
Body部分Htm代码：
<toolbar>
<widget .button .bold />
<widget .button .italic />
....其他的省略
解析：
Style部分的第一个声明@image-map和字体声明类似，声明了一个ToolBar的结构，其中，src:url(xx.png);表明Toolbar所使用的图片，一般为了美观，png要做成透明背景的。cells:15 2;表明整个Toolbar的大小为多少行多少列。items:xx1,xx2,...;表明Toolbar中有哪些项，都以名称表示，每个名称都和图片中的图标相对应。一般cells中形成的表格数一定要大于items的项目数。
toolbar{ .... }和toolbar > widget.button{....}和其类似样式的就是CSS样式了，虽然并不和平常使用的CSS完全相同，但是除了添加的一些专门适用于程序的样式之外，其他的都差不多，我只捡一些比较重要和特殊的加以说明，一般性描述的不做介绍，有问题的可以去W3CSchool和HTMLayout官网查询。
toolbar{} //设置<toolbar></toolbar>之间的内容的样式，这种使用方法以后会很常见
display:block; //显示当前块，一般不需要设置，默认的就是这个
flow:horizontal; //水平放置其内部块，这个很重要，是HTMLayout专用的
toolbar > widget.button{} //设置<toolbar>内部<widget style="button">或者有<widget .button>声明的块的样式，这种用法很常见,你可以根据各块的关系随意组合下去。
toolbar > widget.button：hover{} //上一个用法的扩展，表明是在上一个样式的前提下，当鼠标移到上面时，所表现的的样式，类似的还有 :active、:disable等。
behavior:clickable;//设置它对应控件的动作为可以被点击。behavior有很多动作，每一个动作的具体含义需要查阅官方的文档。
background-image:url(theme:toolbar-button-hover); //设置背景图片，重点是后面的theme主题设置，目前未找到全的列举说明，暂时明白什么意思就行了，当然也可以自己设置对应的图片。
foreground-image-transformation: colorize(#70F); //设置当每一项被至于焦点时，图片的前景颜色，通过colorize(xx)可以改变图片的显示颜色（透明的前景色）。
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } //这里才是重点的重点，它将HTML中的name="bold"（.bold）对应的widget和@image-map中的图片对应起来，{}中的bold就是在声明时指定的名称。
最后是HTML部分，重点是<widget .button .bold /> 这表明widget控件的类型(style)为button,其名称为bold（bold这里只是表示一个名称，不是粗体的标志）,个人猜测完全可以写为<widget style="button" class="blod" ></widget>这种比较正规的写法，只是样式需要做很多调整，没有官方的方法省事。值得注意的是，CSS中的名称一定要和这里的style和class对应，原因我也不用多说了。
3、abs
文档结构：
│ abs.htm
│ abspos.htm
│ abs_fix.htm
│ fix_center.htm
│ menus.htm
│ rel_abs.htm
└─images
back.png
menu-back.png
第一个文件：abs.htm 演示的是绝对位置的不同效果。
代码：
Style部分：
#abs1 {
position:relative;
overflow:auto;
height:50%;
...
}
#abs2 {
position:absolute;
width:150px;
...
}
#abs3 {
position:absolute;
width:150px;
...
}
HTML部分(只写框架)：
<div id="abs1">
<p>很多的p段落</p>
....
<p id="abs2"></p>
</div>
<div id="abs3">
xxxxxxxx
</div>
解析：
Style部分值得注意的就是position属性的设置，其中absolute指绝对的，relative相对的。这里的绝对是相对于当前所在的大块（母块）来说的，由于abs1的height:50%，配合overflow:auto,每次只显示一半的区块，所以拉动滑动条时它的左上角坐标是变化的，而abs2相对于他的左上角的绝对位置不变，所以abs2区块也会跟随着abs1移动。而abs3由于直接位于body之内，他的位置相对于body的左上角来绝对确定，body不变，他的位置就不会变。
做个小总结：
1、absolute：不占位、relative：有占位！position为rel的层在显示时，会占用一行！其后面的abs层只会在下一行显示出来！ position为abs的层在显示时，会与后面的重叠在一起！
2、默认情况下（不结合top等来定位），absolute（绝对定位）以父层来定位的
如上面的id为abs的层，如果不结合top等来定位，则其显示位置会随父级posi层（posi在文档左下角，其也会在左下角）
3、在结合top、bottom、right、left等属性时，absolute（绝对定位）以窗口做为定位，relative以自身的占位为基线做偏移！
4、在结合top、bottom、right、left等属性时，如果想absolute（绝对定位）能以父层做为定位基线的话，则在父层应用absolute或relativ属性就可以!
HTML部分是标准的html标记，不做解释。
第二个文件：abs_fix.htm 第一个的拓展，介绍属性position:fixed; 的用法
由于其他的都和第一个类似，不做介绍，只讲解position:fixed; 的原理。
position:fixed; 除了相对位置和绝对位置，还有一个fixed(固定的)，它用来定位一个区块相对于边框（上下左右）的位置，使用非常方便，通过它你可以很简单地将一个区块固定到右边框、上边框、下边框，而不同设置太多的代码。一般他需要left,right,top,bottom中的一个或者多个配合。如将一个区块设置为距右边框10px，上下10px,宽度100px,高度随框架变化，代码如下：
#fix {
position:fixed;
right:10px;
top:10px;
width:100px;
bottom:10px;
}
相当的方便和简单，唯一的缺点是在低版本的IE引擎(如IE6.0)，变现的不好，不过对于HTMLayout没有问题。
第三个文件：abspos.htm 这个比第一个还简单，介绍绝对位置的，略过。
第四个文件：fix_center.htm 这个和第二个类似，是它的威力加强版。呵呵，实现居中效果。这个很简单。
左右居中： left:*;right:*;
上下居中：top:*;bottom:*;
PS: 千万不要忘了设置width:属性，这应该是理所当然的，你不给人家提供宽度，如何居中！
第四个文件：menus.htm 通过定位实现菜单的样式，这个比较有意思。这个里面没有新的内容，但是需要有一定的排版美化能力，完全用css组合成的一个菜单框架，这里也只讲解思路。
代码：
Style部分：
menu {
flow:horizontal;
padding-right:100%%;
...
}
menu li{
display:block;
position:relative;
...
}
menu menu{
flow:vertical;
display:none;
...
}
menu > li:hover > menu{
display:block;
}
HTML部分：
<menu>
<li>
File
<menu>
<li>New</li>
<li>Open</li>
<hr/>
<li>Exit</li>
</menu>
</li>
</menu>
代码解析：
先说HTML结构，先有一个<Menu>内部包含多个<li>，每个<li>都作为主菜单显示的内容，在<li>的内部，再设置一个<menu><li>这样的结构，作为子菜单，还可以在主菜单下创建一个<table>填充一些想要的控件。
CSS部分，重点是flow:horizontal/vertical;其中主菜单使用水平排列，使得每个<li>都成为一个单独的菜单存在，子菜单同样使用垂直排列，这样就成为了一个完整的菜单栏。
第五个文件：rel_abs.htm 相对定位，参看第一个的总结就可。
4、animated-png 动画的png（挺有意思的）
文件结构：
012-dispose-background.png
012-dispose-none.png
012-dispose-previous.png
apng.htm
bouncing-beach-ball.png
disposal.htm
loading.htm
loading_16.png
第一个文件：apng.htm 展示如何使用APNG动画
代码：
Style部分：
p:nth-child(3) { background-color:#8080ff; }
p:nth-child(2) { background-color:#ff8080; }
HTML部分：
<p><img src="bouncing-beach-ball.png"></p>
<p><img src="bouncing-beach-ball.png"></p>
<p><img src="bouncing-beach-ball.png"></p>
<p><img src="bouncing-beach-ball.png"></p>
解析：
首先说下调用问题，就和普通的图片调用一样。然后，背景的问题，可以通过设置背景色来展现不同的背景。最后需要注意一个用法：p:nth-child(3) { } 这种调用是指，第3个<P>标签的样式，可以用来避免多次设置class和id。
第二个文件：disposal.htm 用来展示用不同模式制作出来的动画APNG的差别，这个对于制作APNG的时候有点帮助，程序控制方面没用。
第三个文件：Loading.htm 和第一个一样。不解释。
5、animations
文件结构：
│ blend.htm
│ h-sliding-bar-csss!.htm
│ h-sliding-bar.htm
│ popup-animations.htm
│ sliding-bar-csss!.htm
│ sliding-bar.htm
│ sliding-list.htm
│
└─images
│ 2.gif
│ 4.gif
│ 5.gif
│ 7.gif
│ led-blue.png
│ led-green.png
│ led-red.png
│ led-yellow.png
│ leds.xar
│ list-back.png
│
├─cds
│ darkside.jpg
│ delicate.jpg
│ finalcut.jpg
│
└─outlook
calendar.gif
contacts.gif
folder.gif
mail.gif
notes.gif
tab-hover.png
tab.png
注：这里的文件比较特殊，如sliding-bar.htm 和sliding-bar-csss!.htm，这两个文件其实实现的是同一种效果，只是前者使用的是静态的CSS，后者使用了类似动态语言的编程，由于个人能力原因，这里只对静态的加以解释，对于想了解的各位说声抱歉。
第一个文件：Blend.htm 展示的是图片的渐变效果和一个动作
代码：
img:hover
{
foreground-image:url(images/led-red.png);
transition: blend;
}
#test { behavior:dropdown; }
#test popup img
{
foreground-image:url(images/led-yellow.png);
transition: blend;
}
#test popup img:hover
{
foreground-image:url(images/led-blue.png);
transition: blend;
}
HTML部分：
<div>
<img><img><img><img>....
</div>
<div id="test">
<popup>
<img><img><img><img>....
</popup>
</div>
解析：
先说Blend的问题，我们能很明显地发现CSS中有这么一条属性：transition:blend;它告诉我们所有的渐变使用混合模式，这就是程序中看到的鼠标滑过之后一些浅颜色的残留，视觉效果很好。
再来说动作的问题：behavior:popup;之前也讲到过clickeable的动作，那个使一个button成为一个可以被点击的对象。这里的popup也是一个固定的动作，它使<popup>标签中的内容项菜单一样弹出。这里的弹出和之前的菜单比较类似，但是原理完全不一样。菜单弹出的是通过CSS的动作控制，将隐藏的动态显示出来，属于外部处理，而这里的就像是内部自动实现，只要你定义了popup标签，通过设置它父层的behavior，系统会自动调出下层的pop内容。
第二个文件：h-slider-bar.htm 水平的动态工具条
( 暂停更新，预计年后继续 )