控制VC++.NET中WEB对话框的HTML元素属性
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(自定义)选项,来定义具体的背景图像的位置。