c++|web|对话框|控制VC++.NET一个令人耳目一新的特性就是基于动态HTML的WEB对话框，它使得桌面程序界面和功能变得更容易实现。这里将对WEB对话框中HTML元素的CSS属性控制作探讨。

　　一、在HTML编辑器中设置元素的CSS属性

　　CSS最早出现于1996年，全称为：层叠样式表(Cascading Stylesheets)。由于它在字体、样式、风格等方面的突出表现使它迅速在网页制作中流行起来。它可以精确控制页面文字效果，最重要的是很多浏览器和平台都支持它，而且编码简短，页面下载快。

　　在VC++.NET的HTML编辑器中，可以方便为某个HTML元素设置CSS样式，具体操作如下：

　　(1) 先选定某个HTML元素，打开其属性(Properties)窗口，找到其style项，如图1所示。



　　(2) 单击该项右边的Browse(...)按钮，弹出图2的Style Builder对话框，分别可以对字体(Font)、背景(Background)、文本(Text)、定位(Position)、布局(Layout)、边框(Edges)、列表(Lists)以及其他外观属性进行设置。



　　使用Style Builder对话框的最大优点就是在于不需要知道CSS的语法结构就可以调整HTML元素的CSS样式。限于篇幅，这里仅对最常用的字体、背景和文本属性进行阐述。

　　1、字体属性

　　Style Builder对话框的Font页面提供如下几个字体属性：

　　(1) 字样名(Fong Name)

　　字样名可以使用Family和System Font选项，选中Family项可单击右边的Browse(...)按钮来添加一个新的字体，而选中System Font，则可在右侧的组合框中选择其中的某项，具体各项含义如下：

　　Window Caption : 使用窗口标题的文本字体

　　ToolWindow Caption : 使用工具窗口标题的文本字体

　　Dialog Text : 使用对话框中的文本字体

　　Icon Labels : 使用工具窗口标题的文本字体

　　Menu Text : 使用菜单文本的字体

　　Tooltip Text : 使用提示文本的字体

　　(2) 字体特性(Font Attributes)

　　字体特性包括颜色(Color)、斜体(Italics)和小型大写字母(Small Caps)等，其中，颜色特性最为丰富，不仅可以通过组合框选择Aqua(浅绿色)、Black(黑色)、Blue(蓝色)、Fuchsia(紫红色)、Gray(灰色)、Green(绿色)、Lime(酸橙色)、Maroon(栗色)、Navy(海蓝色)、Olive(橄榄色)、Purple(紫色)、Red(红色)、Silver(银灰色)、Teal(茶色)、White(白色)和Yellow(黄色)中的任意一种颜色，而且可以单击右边的Browse(...)按钮来添加一个新的颜色，图3就是其中的颜色对话框，它有WEB调色板(Web Palette)、已命名的颜色(Named Colors)、系统颜色(System Colors)和自定义颜色(Custom Color)等页面。



　　(3) 大小(Size)

　　设置HTML元素的字体尺寸，默认值为Absolute的Medium值。它有三个选项：

　　Specific : 直接指定字体尺寸，它取决于单位和相应的数值。它的单位有：

　　　px —— 像素(Pixel)，相对单位。WONDOWS的用户所使用的分辨率一般是96像素/英寸。

　　　pt —— 点（Point），绝对单位。

　　　pc —— 派卡(Pica)，绝对单位。相当于我国新四号铅字的尺寸。

　　　mm、cm、in —— 毫米、厘米、英寸。

　　　em —— 相对单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　　ex —— 相对单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　　% —— 相对单位。相对于当前对象内文本的字体尺寸的百分比。

　　上述单位之间的部分换算关系为：1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc 。

　　　Absolute : 根据对象字体进行大小调节，它有这样几个选项：XX-Small(最小)、X-Small(较小)、Small(小)、Medium(中)、Large(大)、X-Large(较大)、XX-Large(最大)。

　　　Relative : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。它有这样两个选项：Larger(较大)、Smaller(较小)。

　　(4) 粗细(Bold)

　　设置HTML元素中的文本字体的粗细。需要说明的是，它的具体结果由用户端系统安装的字体的特定字体变量映射来决定。也就是说，用户可能看不到不同值之间的差异。

　　它有Absolute和Relative两个选项，包含有Normal(正常的字体)、Bold(粗体)、Bolder(特粗体)和Lighter(细体)等项。

　　(5) 其他字体效果(Effects)

　　这主要有Underline(下划线)、Strikethrough(删除线)、Overline(上划线)、Capitalization(大小写)。其中，Capitalization还有Initial Cap(首字符大写)、lowercase(全部小写)和UPPERCASE(全部大写)等选项。

　　2、背景属性

　　Style Builder对话框的Background页面可对元素进行背景颜色和背景图像的设置，如图4所示。其中，背景颜色除了可以设置其透明色(Transparent)外，其他同字体的颜色属性。这里对背景图像的相关设置作阐述。



　　当单击Image框右边Browse(...)按钮从外部调入一个图像文件后，就可对其进行平铺(Tiling)、滚动(Scrolling)以及位置(Position)进行设置。

　　平铺主要有在水平方向平铺(Tile in horizontal direction)、在垂直方向平铺(Tile in vertical direction)、在水平和垂直方向平铺(Tile in both directions) 以及不平铺(Do not tile)等几个选项。

　　滚动有Scrolling background和Fixed background两项，分别表示背景图像是随元素内容滚动还是固定。

　　位置属性分别就水平(Horizontal)和垂直(Vertical)方向进行Left(靠左)、Center(居中)、Right(靠右)以及Top(向上)、Center(居中)、Bottom(向下)布置；特别地，还可选择其Custom(自定义)选项，来定义具体的背景图像的位置。
1) 对齐方式(Alignment)

　　在水平方向(Horizontal)的对齐方式表现为：Left(左对齐)、Centered(中间对齐)、Right(右对齐)和Justified(两端对齐)，而在垂直方向表现为Subscript text(垂直对齐文本的下标)和Supperscript text(垂直对齐文本的上标)。

　　若在水平对齐方式选中Justified，还可有下列选项：

　　Auto : 自动调整两端对齐

　　Space words : 通过增加字之间的空格对齐文本。

　　Newspaper style : 通过增加或减少字或字母之间的空格对齐文本。

　　Distribute spacing : 处理空格很像newspaper，适用于东亚文档。

　　Distribute all Lines : 两端对齐行的方式与distribute相同，适用于表意字文档。

　　(2) 字距和行距

　　字距(Letters)与行距(Lines)的调整相似，都有Normal(正常)和Custom(自定义)两项，若选中Custom，则可在右边设置具体的间距大小。

　　(3) 文本流(Text Flow)

　　文本流包括Indentation(缩进)和Text Direction(文本方向)两个属性。其中，文本方向可以有Left to right(从左到右)和Right to left(从右到左)两个选项。

　　需要说明的是，以上的属性设置都有会在对话框下面的预览框看到相应的结果。

　　二、在程序中获取和改变元素的CSS属性

　　在WEB对话框类中获取和改变元素的CSS属性，可使用IHTMLElement接口，它提供了有关HTML元素的许多方法，其中get_style就是用来处理包括CSS在内的属性，它的原型如下：

　　　HRESULT get_style( IHTMLStyle **p );

　　其中，p是IHTMLStyle指针变量，IHTMLStyle也是一个接口是用来提供获取和设置具体属性的方法。例如get_color和put_color是用来获取和设置元素的颜色，它们的原型如下：

　　HRESULT get_color( VARIANT *p );

　　HRESULT put_color( VARIANT v );

其中，VARIANT是与绝大多数数据类型相兼容的一种类型，使用时要注意设置VARIANT变量的具体类型。

　　下面的例子是当鼠标划过一段文字时，其颜色从红色变成蓝色，具体步骤如下：

　　(1) 选择File菜单->New菜单->Project命令，创建一个基于WEB对话框的Ex_Dlg方案工程(详细过程这里略)。

　　(2) 切换到方案导航区的Resource View窗口，展开HTML项，双击IDR_HTML_EX_DLG_DIALOG项，这时就在文档窗口中显示相应的HTML模板。

　　(3) 删除HTML模板中所有缺省的元素(包括OK和Cancel按钮)，双击HTML工具箱的Linear Layout Panel按钮，在HTML页面中添加一个直线面板，在其中添加文字："当你用鼠标划过这段文字时，看看有什么变化？"。

　　(4) 在属性窗口中将上述添加的面板的ID号改为Div1，再单击Style项右边的Browse(...)按钮，将其文字颜色设置为红色(Red)。

　　(5) 打开WEB对话框类CEx_DlgDlg文件Ex_DlgDlg.cpp，在文件的前面找到BEGIN_DHTML_EVENT_MAP(CEx_DlgDlg)与END_DHTML_EVENT_MAP()之间的程序段，然后添加下列代码：

　　DHTML_EVENT_ONMOUSEOVER(_T("Div1"),OnMouseOverDiv1)

　　DHTML_EVENT_ONMOUSEOUT(_T("Div1"),OnMouseOutDiv1)

　　其中事件映射宏DHTML_EVENT_ONMOUSEOVER和DHTML_EVENT_ONMOUSEOUT分别用来映射鼠标移至和移出的事件。

　　(6) 打开头文件Ex_DlgDlg.h，添加下面的事件映射函数的声明，并且添加成员变量m_varColor用来保存原来的颜色值：

public:
VARIANT m_varColor;
...
protected:
...
HRESULT OnMouseOverDiv1(IHTMLElement *pElement);
HRESULT OnMouseOutDiv1(IHTMLElement *pElement);


　　(7) 再切换到Ex_DlgDlg.cpp窗口，在程序的最后添加下列代码：

HRESULT CEx_DlgDlg::OnMouseOverDiv1(IHTMLElement *pElement)
{
IHTMLStyle *phtmlStyle;
pElement->get_style(&phtmlStyle);
if (phtmlStyle)
{
VARIANT varColor;
varColor.vt = VT_I4;
varColor.lVal = 0x0000ff;
phtmlStyle->get_color(&m_varColor);
phtmlStyle->put_color(varColor);
phtmlStyle->Release();
}

return S_OK;
}

HRESULT CEx_DlgDlg::OnMouseOutDiv1(IHTMLElement *pElement)
{
IHTMLStyle *phtmlStyle;
pElement->get_style(&phtmlStyle);
if (phtmlStyle)
{
phtmlStyle->put_color(m_varColor);
phtmlStyle->Release();
}

return S_OK;
}


　　(8) 编译并运行，然后看看当鼠标划过那段文字后，颜色是不是会有变化？当移出时，颜色是不是以恢复到原来的红色？



　　至此，通过以上的方法和技巧，我们就可以对HTML元素属性进行设置和程序控制。要提出来的是，在Visual C++.NET的Beta 1版中，WEB对话框类CDHtmlDialog的GetElementProperty和SetElementProperty好像并能有效获取和设置HTML元素的属性。