“新样式”和“修改样式”对话框,位置

通过**“新建样式”对话框和“修改样式”对话框的“定位”**类别可为网页上 UI 元素的定位定义级联样式表 (CSS) 样式规则。 可以直接将这些样式规则应用于 HTML 元素,也可以将它们添加到当前页或外部样式表中。

为当前页上的 UI 元素定义 CSS 位置样式规则

  1. 在**“设计”视图或“源”**视图中打开该页。

  2. 还可以选择要将样式应用到的文本或 HTML 元素。

  3. 在**“格式”菜单中单击“新建样式”**。

    将显示**“新建样式”**对话框。

  4. 在**“类别”窗格中选择“定位”**。

    将在右窗格中显示定位样式选择。

当对**“设计”视图中选定的文本应用样式时,将以内联方式向页的 HTML 标记中插入样式特性。 切换到“源”**视图以检查新样式特性。

向外部样式表中定义的 CSS 样式规则中添加定位特性

  1. 打开现有的外部样式表。

  2. 将光标置于要修改的样式规则的大括号内。

  3. 执行下列操作之一。

    • 右键单击编辑器的样式表,然后从快捷方式菜单中选择 生成样式

    • 在样式表工具栏上,选择 生成样式

    将显示**“修改样式”**对话框。

  4. 在左窗格中单击**“定位”**。

    将在右窗格中显示定位样式选择。

下面的表列出了**“新建样式”“修改样式”对话框中的“定位”**类别下提供的选项。

定位选项

  • 位置
    用于在网页上放置元素的算法。 值如下:

    • absolute   使用**“top”“right”“bottom”“left”**属性指定元素的位置。 这些属性是相对于包含块而言的。

    • fixed   使用**“top”“right”“bottom”“left”**属性指定元素的位置。 这些属性是相对于浏览器窗口而言的。 元素不随网页一起滚动。

    • relative   根据正常流计算元素的位置,然后使用**“top”“right”“bottom”“left”**属性进行偏移。 该偏移相对于元素的正常位置。

    • static   根据正常流计算元素的位置。 忽略**“top”“right”“bottom”“left”**属性。 这是默认值。

    • inherit   元素从父元素继承定位算法。

  • z-index
    元素的堆栈级别。 堆栈级别较高的元素显示在堆栈级别较低的元素之前。

  • 宽度
    元素的宽度。 如果指定一个值,则可在列表中选择值的单位。

  • 高度
    元素的高度。 如果指定一个值,则可在列表中选择值的单位。

  • top
    元素的上边缘。 如果**“position”属性设置为“static”**,则将忽略此属性。 如果指定一个值,则可在列表中选择值的单位。

  • right
    元素的右边缘。 如果**“position”属性设置为“static”**,则将忽略此属性。 如果指定一个值,则可在列表中选择值的单位。

  • bottom
    元素的下边缘。 如果**“position”属性设置为“static”**,则将忽略此属性。 如果指定一个值,则可在列表中选择值的单位。

  • left
    元素的左边缘。 如果**“position”属性设置为“static”**,则将忽略此属性。 如果指定一个值,则可在列表中选择值的单位。

其他 UI 元素

  • 选择器
    (仅限于**“新建样式”对话框)使您可以键入类名或单击 HTML 元素,以应用样式。 类名必须以句点 (.) 开头。 还可以选择“(级联样式)”**,从而以内联方式将样式应用于所选的文本或 HTML 元素。

  • 定义位置
    (仅限于**“新建样式”**对话框)使您可以指定写入样式规则定义的位置。 值如下:

    • 当前网页   将样式规则写入当前页中的 style 元素。

    • 新建样式表   将一个新的 CSS 样式表添加到项目中,并将规则写入该样式表。

    • 现有样式表   将样式规则添加到您使用**“URL”**列表指定的 CSS 样式表中。

  • URL
    (仅限于**“新建样式”对话框)使您可以选择现有的 CSS 样式表。 仅当“定义位置”设置为“现有样式表”**时,才启用此选项。

  • 将新样式应用于文档选择内容
    (仅限于**“新建样式”**对话框)指定将样式应用于所选的文本、类或 HTML 元素。

  • 预览
    显示样式规则在应用之后的显示情况的示例。

  • 说明
    显示样式规则的 CSS 定义。

请参见

其他资源

使用 CSS 概述