“样式生成器”对话框 ->“布局”

更新:2007 年 11 月

使用“样式生成器”对话框的“布局”对话框可以定义级联样式表 (CSS) 页面布局属性。页面布局属性确定元素在 HTML 流中如何放置。可以直接将这些属性应用于 HTML 元素或者将其添加到 CSS 样式规则中。

将布局属性直接应用于页面上的 HTML 元素

  1. 在 HTML 设计器的“设计”视图中打开 HTML 文档,然后使用“文档大纲”窗口选择要格式化的元素。

  2. 单击“格式”菜单上的“样式”,以打开“样式生成器”对话框。

  3. 单击“样式生成器”对话框左窗格中的“布局”。

    将在右窗格中显示“样式生成器”对话框 ->“布局”。

当对“设计”视图中选定的元素应用样式时,将向这些元素的 HTML 标记中内联插入 CSS 样式属性。切换到“HTML”视图以检查插入的新样式属性。

向外部样式表中定义的 CSS 样式规则中添加布局属性

  1. 打开一个现有的外部样式表,然后将插入点放在所需样式规则的选择器后面的大括号 ({ }) 中。

  2. 单击“样式”菜单上的“生成样式”,以打开“样式生成器”对话框。

  3. 单击“样式生成器”对话框左窗格中的“布局”。

    将在右窗格中显示“样式生成器”对话框 ->“布局”。

说明:

当您打开外部 CSS 样式表进行编辑时,将出现“样式”菜单。将插入点置于样式规则选择器后的大括号内时,“样式”菜单上的“生成样式”选项即变为可用。

外部样式表中定义的 CSS 样式类可以应用于网页的 <BODY> 元素内的元素(在这种情况下,包括 <BODY> 元素本身),方法是将 CSS 样式选择器指定为该元素的 CLASS 属性。

“样式生成器”对话框的“布局”页中包括的可用选项如下。

任务

用户界面元素

流控制

这组属性控制 HTML 文档中的元素流。在您选择选项时,“流控制”选择器旁边的预览区域随之更新。下列属性对于在浏览器中查看页面时的外观和性能都会有影响。

  • 可见性
    为可见性属性设置隐藏(不可见)或可见值。选择“<未设置>”(未选择任何选项)、“隐藏”或“可见”。例如,如果选择“隐藏”,则插入以下 CSS 标记:

    VISIBILITY:hidden

    说明:

    当该属性为“<未设置>”时,不会向样式中添加任何代码。

  • 显示
    为元素设置 DISPLAY 属性值。您可以指定某元素是否显示,以及所显示的元素是作为块元素显示还是在线性流内显示。选择“<未设置>”(未选择任何选项)、“不显示”、“作为块元素”或“作为内流元素”。一个块元素通常开始一个新行,且不能大于其父容器。例如,在 <BODY> 元素中某个样式为 <H1> 的元素不能大于包含它的 <BODY> 元素。内联元素通常不开始新行,根据其本身内容的高度和宽度调整大小。例如,如果选择“作为块元素”,则插入以下 CSS 标记:

    DISPLAY:block

    说明:

    当该属性的值为“<未设置>”时,不会向样式中添加任何代码。

    说明:

    Visibility 属性和 Display 属性相关,但并不相同。隐藏元素不会减少浏览器显示一页所需的时间。但是,浏览器忽略不显示的元素。因此,当页面中包含不显示的元素时,其在浏览器中的显示速度比同样的元素只是被隐藏的页面要快。另外,在文字环绕隐藏元素时,文字似乎是在环绕空白。在选择布局属性时请考虑这些依赖项。

  • 允许文本流动
    设置属性,确定文本如何环绕元素。选择“<未设置>”(未选择任何选项)、“边上不允许文本”、“靠右”或“靠左”。例如,如果选择“靠右”,则插入以下 CSS 标记:

    FLOAT:left

    说明:

    当该属性为“<未设置>”时,不会向样式中添加任何代码。

  • 允许浮动对象
    设置属性,控制是否允许对象在页面上浮动。选择“<未设置>”(未选择任何选项)、“任何一边”(对象可以在页面的左边或右边浮动)、“仅右边”(对象只能在页面的右边浮动)、“仅左边”(对象只能在页面的左边浮动)或“不允许”(对象不能在页面上浮动)。例如,如果选择“仅右边”,则插入以下 CSS 标记:

    CLEAR:left

    说明:

    当该属性为“<未设置>”时,不会向样式中添加任何代码。

内容

  • 溢出
    设置属性,控制元素在其所包含的内容超过元素所定义的高度和宽度所能容纳的内容时的行为。选择“<未设置>”(未选择任何选项)、“需要时使用滚动条”(如果内容溢出所定义的元素大小则出现滚动条)、“始终使用滚动条”(始终显示滚动条)、“不剪辑内容”(元素扩展以适应内容)或“剪辑内容”(不显示溢出元素大小的内容)。例如,如果选择“不剪辑内容”,则插入以下 CSS 标记:

    OVERFLOW:visible

    说明:

    当该属性的值为“<未设置>”时,不会向样式中添加任何代码。

剪辑

设置属性,控制显示元素的哪个矩形部分。例如,您可以只显示元素的右上角。在一个或多个字段(“顶”、“底”、“左”或“右”)中输入值,然后选择一个单位选项:“px”(默认)、“pt”、“pc”、“mm”、“cm”、“in”、“em”、“ex”或“%”。

只可以剪辑绝对定位的元素。所指定的值与元素边界相关。例如,如果设置 Top 剪辑值为 40px,则元素中位于 0px(元素顶部)和 40px 之间的部分不可见。例如,如果在“顶”和“底”字段中均输入 50,然后接受默认的单位选项,则插入以下 CSS 标记:

CLIP: rect(50px auto 50px auto)
说明:

如果您并未指定所有四个剪辑字段的值,则其余字段将被分配 auto 值,未指定值的边界不被剪辑。

打印分页符

下列属性控制使用该样式的元素内何时出现分页符。

  • Before(段前)
    选择“<未设置>”(未选择任何选项)、“自动”或“强制分页”。例如,如果选择“强制分页”,则插入以下 CSS 标记:

    PAGE-BREAK-BEFORE:always

  • After(段后)
    选择“<未设置>”(未选择任何选项)、“自动”或“强制分页”。例如,如果选择“强制分页”,则插入以下 CSS 标记:

    PAGE-BREAK-AFTER:always

请参见

概念

使用 CSS 概述

参考

“样式生成器”对话框 ->“背景”

“样式生成器”对话框 ->“字体”

“样式生成器”对话框 ->“文本”

“样式生成器”对话框 ->“位置”

“样式生成器”对话框 ->“边缘”

“样式生成器”对话框 ->“列表”

“样式生成器”对话框 ->“其他”

“颜色选择器”对话框