上一页下一页

将样式添加到文本

在 HTML 中设计文本的样式有多种方法。一种方法是使用层叠样式表 (CSS) 来定义特定的 HTML 标签以按照特定方式设置格式。

本课说明如何从预先设计的样式表创建简单的 CSS 样式表，然后将新样式表应用于文本并修改样式。

若要创建 CSS 样式表，请执行以下操作：
  1. 选择“文件”>“新建”。 
  2. 在“新建文档”对话框中，从左边的类别列表中选择“CSS 样式表”类别。

    3. 对话框内中间列的列表重新标为“CSS 样式表”。随即会出现一组预先设计的样式表。

  3. 在“CSS 样式表”列表中，选择一个样式表。对于“Global Car Rental”站点，选择“基本：Verdana”，该样式表通过指定 body、td 和 th 标签的字体对它们进行重新定义。然后单击“创建”。
    这是所描述的功能的图片。

    4. Dreamweaver 将创建一个新的文本文件，该文件包含一小组预先定义的 CSS 样式。

  4. 选择“文件”>“保存”来保存新的 CSS 文件。 将其保存在站点的 Assets 文件夹中并命名为“text.css”（或任何其他所需的名称）。
  5. 选择“文件”>“关闭”以关闭该 CSS 文件。 
若要使用 CSS 样式设置文本的样式，请执行以下操作：
  1. 在“窗口”菜单中，选择一个 HTML 文件（例如 index.htm）。

    2. 备注： 如果您的系统参数选择设置为不显示文件扩展名，则 index.htm 文件在“窗口”菜单中显示时其名称为“index”。

  2. 选择“窗口”>“CSS 样式”以显示“CSS 样式”面板。 
  3. 在“CSS 样式”面板的顶部，单击“编辑样式”单选按钮显示可用的样式。

    4. 如果以前没有为该文档定义样式，则没有样式可用。

  4. 在“CSS 样式”面板的底部，单击“附加样式表”按钮。
    这是所描述的功能的图片。

    5. 即会出现“链接外部样式表”对话框。

  5. 在“链接外部样式表”对话框中，单击“浏览”定位一个样式表。
  6. 在“选择样式表文件”对话框中，浏览到并选择您在 Assets 文件夹中创建的新样式表，然后单击“确定”(Windows) 或“选择”(Macintosh) 附加该样式表。
  7. 在“链接外部样式表”对话框中，单击“确定”附加该样式表。

    8. 该样式表的名称和内容显示在“CSS 样式”面板中。样式表中定义的样式将应用到 HTML 文档的文本中。例如，正文文本以 Verdana 显示。

  8. 保存您的文档。
若要编辑样式表中的样式，请执行以下操作：
  1. 在“CSS 样式”面板的顶部，单击“编辑样式”单选按钮显示可用的样式。
  2. 在“CSS 样式”面板中选择 CSS 文件的名称，然后单击“CSS 样式”面板底部的“编辑样式表”按钮。
    这是所描述的功能的图片。

    3. 即会出现一个对话框，显示该样式表中样式的名称。

  3. 选择其中的一个样式，例如 body，然后单击“编辑”。

    4. 即会出现“CSS 样式定义”对话框。
    这是所描述的功能的图片。

  4. 输入文本的大小，例如 13 像素。按需要调整其他选项。
  5. 单击“确定”重新定义样式。
  6. 编辑其他的样式。为了创建“Global Car Rental”站点中使用的样式，请将 body、td 和 th 样式的大小设置为 13 像素。
  7. 编辑完样式后，单击“保存”按钮保存您的更改并关闭样式表对话框。

    8. 更改后的样式将应用于您的文档。例如，正文文本以 13 像素的 Verdana 显示。 

  上一页下一页