创建和应用样式

重要:  本文是由机器翻译的,请参阅免责声明。请在 此处 中查找本文的英文版本以便参考。

样式是一套格式级联样式表 (CSS) 中定义的特征。您可以应用样式以图形、 图层、 表的内容在网页上,包括文本 (单个字符或整个段落),甚至整个网页的正文。样式使您能够有效地重复使用属性和值的一组,而无需每次您想要将其设置的属性。

全局样式规则应用于 HTML 元素,除非本地样式规则可重写有意义级联 CSS 的样式。一般而言,局部样式规则的优先级高于通用样式规则。例如,在网页中的内部 CSS 中定义的样式将覆盖外部 CSS 中定义的样式。同样,定义的嵌入式 CSS 在网页上的单个 HTML 元素中重写为同一元素在网页上的内部或外部 CSS 中定义的任何样式。与本地 CSS 样式规则不冲突的全局样式规则的部分应用于 HTML 元素,即使是本地样式应用。

本文内容

类型的样式

创建样式

应用样式

类型的样式

基于类的元素或 id 基于可以是位于外部或内部 CSS 中的样式。由其规则集,包括选择器后, 跟一个左大括号 ({}) 和右大括号 (}) 之间出现的属性声明块定义样式。每种类型的样式的选择器; 区分其他样式类型以句点 (.) 前面基于类的样式; 选择器井号 (#) 前面基于 id 的样式; 选择器然后基于元素的样式选择器只包含 HTML 元素,如 H1 元素。

基于类的样式

使用基于类的样式定义一组您想要在网页中的一个或多个项目上使用的属性。如果要修改的样式,您可以编辑该样式的规则集和已经应用了该样式的每个项目都将自动反映所做的更改。

在下面的示例中,"简介"的样式选择器和"字体大小︰ 小"是一个属性声明后, 跟第二个属性声明。

规则集基于类的样式的示例

.introduction {font-size: small; color: white}

基于类的样式应用于 < p > 标记的示例

<p class="introduction">

基于元素的样式

使用基于元素的样式定义一组所需的特定 HTML 元素在网页中使用每个实例的属性。例如,若要在网页上创建 25 像素 (位于 < p > 标签的内容) 的所有段落周围的边距,您创建基于元素的样式,为其选择器中使用 p 元素并包含边距属性的声明下面的代码中所示。

基于元素的样式设置规则的示例

p { margin-left: 25px; margin-right: 25px }

基于 id 的样式

当您想要定义一组的单个项目或多个要区分与一个或多个网页中的所有其他内容的项目的属性,请使用基于 id 的样式。当您想要在网页中的样式的单个 HTML 元素,请使用基于 id 的样式。

将规则集 id 基于样式的示例

#footer {background-color: #CCCCCC; margin: 15px}

应用于 < p > 标记基于 id 的样式的示例

<p id="footer">

嵌入式样式

当您想要在网页中定义一组的单个项目或多个项目的属性,不希望重复使用该样式,请使用嵌入式样式。与基于 id、 基于元素和基于类的样式中的标题网页 (内部 CSS) 的部分或外部 CSS 文件属性中定义其属性的嵌入式样式 (或嵌入式 CSS) 定义直接在您想要使用的样式的 HTML 元素中。

将规则集嵌入式样式的示例

<p style="font-weight: bold; font-style: italic; color: #FF0000">

返回页首

创建样式

您可以从头或通过复制现有样式创建新样式。按任一方式,新建样式对话框中可以定义有关新的样式,包括选择器类型、 属性和样式表包含样式的所有内容。当您想要创建新的嵌入式样式时,您也可以使用CSS 属性任务窗格。当您想要快速创建,而不是设置样式的任何属性应用新样式在页面中时,您还可以使用样式工具栏。

通过使用新建样式对话框中创建样式

  1. 请执行下列操作之一:

    • 若要添加的外部 CSS 样式,请打开.css 文件。

    • 若要添加到内部 CSS 样式,请打开网页。

    • 若要添加嵌入式样式、 打开网页上,然后选择所需样式的内容。

  2. 请执行下列操作之一:

    • 若要创建新样式   单击新建样式这些位置之一:应用样式任务窗格或管理样式任务窗格中、样式工具栏或格式菜单。

    • 若要复制的现有样式   请执行下列操作之一︰

      • 应用样式任务窗格中,指向您想要复制,请单击出现,请向下箭头的样式,然后选择新建样式副本

      • 管理样式任务窗格中或CSS 属性任务窗格中,右键单击要复制的样式,然后选择新建样式副本

  3. 新建样式对话框中,请执行下列操作︰

使用此选项

若要

选择器

  • 若要使用的类选择器,请键入句点 (.) 后, 跟一个唯一名称。

  • 若要使用 id 选择器,请键入井号 (#) 后, 跟一个唯一名称。

    注意: 类和 id 选择器名称不能包含空格,除非您正在创建复杂选择器。

  • 若要使用元素选择器,或者键入 HTML 元素的名称,或单击选择器下拉列表框并选择元素名称。

  • 若要使用嵌入式选择器,选择级联样式

  • 若要创建复杂选择器,请键入选择器。

在定义

选择下列选项之一:

  • 当前页的内部 CSS 中当前网页中添加新样式。

  • 新的样式表添加到新的空白外部 CSS 新样式。

  • 现有样式表将新样式添加到您指定的现有外部 CSS。

将新样式应用于文档选择内容

将样式应用于当前的网页中当前所选内容中。

URL

如果选择现有样式表中的定义中,输入.css 文件的 URL。

类别

选择以下任一,然后在对话框中向右设置显示的属性︰

提示: 在中显示的类别加粗类别列表中包含设置属性。

  • 字体设置字体属性,包括尺寸、 重量、 装饰和颜色。

  • 阻止设置行高、 文本对齐方式、 文本缩进和间距的文本。

  • 背景设置背景颜色和背景图像属性。

  • 设置边框的边框并将其属性。

  • 设置填充和边距属性框和块级别元素。

  • 设置位置的尺寸和框和块级别元素的位置。

  • 布局设置浮动和环绕行为、 剪切以及其他布局属性框和块级别元素的可见性。

  • 列表设置的属性列表元素,包括类型、 位置和图像。

  • 设置的属性表相关的元素,包括间距、 布局和边框属性。

注意: 从一个 CSS 也复制到另一种样式。在管理样式任务窗格中,从包含您想要将其复制到,或在目标 CSS 样式列表中的特定位置的 CSS 名称为该样式的 CSS 拖动样式。

通过使用 CSS 属性任务窗格中创建嵌入式样式

  1. 在设计视图或代码视图,请在网页上,选择您想要添加到嵌入式样式的内容。

  2. CSS 属性任务窗格的应用的规则,或者右键单击要应用嵌入式样式,或者,如果出现"(未应用规则)",请右键单击任意位置下应用的规则,选择的器,然后单击快捷菜单上的新建级联样式

  3. CSS 属性下设置所需的属性。

创建并应用新的未定义的样式

您可以创建样式和将其应用于项目,然后以后定义样式。例如,如果您想要使用的设计器创建您的页面的外观,您可以在页面中,将未定义的样式应用于项目,然后坐与设计器,以更高版本中定义的样式。

  1. 在设计视图或代码视图,请在网页上,选择您想要对其应用样式的项。

  2. 若要创建并应用新样式,而不定义ID框中的样式工具栏上的任何属性,键入新样式的唯一名称。

返回页首

应用样式

您可以使用应用样式任务窗格、管理样式任务窗格中,或样式工具栏上以从您内部和外部级联样式表 (CSS) 应用基于类或基于 id 的样式。应用样式任务窗格使您可以将多个样式应用到所选内容,同时管理样式任务窗格和样式工具栏限于应用一种样式。样式工具栏使您能够快速命名并应用新的未定义的样式,在您的页面。

您不需要应用使用元素选择器 (基于元素的样式),因为这些类型的样式将自动应用于整个网页及其关联的元素的样式。应用样式任务窗格列表下上下文选择器,基于元素的样式和以及的管理样式任务窗格中显示的样式名称旁边的蓝点。样式工具栏中并未列出基于元素的样式。

  1. 设计视图或代码视图,请在网页上,选择您想要对其应用样式的项。

  2. 请执行下列操作之一:

    • 若要应用多个现有样式   在应用样式任务窗格,请按住 CTRL,同时单击每个所需的样式。

    • 若要应用的一个现有样式   请执行下列操作之一︰

      • 应用样式任务窗格中,单击所需的类或 id 样式。

      • 样式工具栏中的ID下拉列表框中,单击所需的样式。

      • 管理样式任务窗格中,右键单击类或 id 所需的样式,然后单击快捷菜单上的应用样式

    • 若要创建并应用不带定义的任何属性的新样式   在样式工具栏上,在ID框中,键入新样式的唯一名称。

返回页首

注意: 机器翻译免责声明:本文是由无人工介入的计算机系统翻译的。Microsoft 提供机器翻译是为了帮助非英语国家/地区用户方便阅读有关 Microsoft 产品、服务和技术的内容。由于机器翻译的原因,本文可能包含词汇、语法或文法方面的错误。

扩展你的技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×