将样式用于 HTML 的示例

本节介绍将样式用于 HTML 标签的示例。您将创建对某些内置标签进行样式设置并定义某些样式类的样式表。随后将该样式表应用于包含 HTML 格式文本的 TextField 对象。

在您喜欢使用的文本编辑器中，创建一个文件。

将以下样式表定义添加到该文件中：

p {
  color: #000000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  display:inline;
}

a:link {
  color:#FF0000;
}

a:hover{
  text-decoration:underline;
}

.headline {
  color: #000000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  font-weight:bold;
  display:block;
}

.byline {
  color: #666600;
  font-style:italic;
  font-weight:bold;
  display:inline;
}

此样式表定义两个内置 HTML 标签（&ltp> 和 &lta>）的样式，这些样式将应用于这些标签的所有实例。它还定义两个样式类（.headline 和 .byline），样式类将应用于特定段落和文本范围。

将该文件另存为 html_styles.css。
在 Flash 中，创建一个 FLA 文件。
使用“文本”工具，创建一个大约 400 像素宽、300 像素高的文本字段。
打开属性检查器（“窗口”>“属性”）并选择该文本字段。
在属性检查器中，从“文本类型”菜单中选择“动态文本”，从“线条类型”菜单中选择“多行”，选择“将文本呈现为 HTML”选项，然后在“实例名称”文本框中键入 news_txt。
在时间轴（“窗口”>“时间轴”）中选择图层 1 中的第 1 帧。

打开“动作”面板（“窗口”> “开发面板”>“动作”），将以下代码添加到“动作”面板中：

// 创建新样式表对象
var style_sheet = new TextField.StyleSheet();
// 定义样式的 CSS 文件的位置
var css_url = "html_styles.css";
// 创建一些要显示的 HTML 文本
var storyText:String = "<p class='headline'>Flash Player now supports Cascading Style Sheets!</p><p><span class='byline'>San Francisco, CA</span>--Macromedia Inc. announced today a new version of Flash Player that supports Cascading Style Sheet (CSS) text styles.For more information, visit the <a href='http://www.macromedia.com'>Macromedia Flash web site.</a></p>";
// 加载 CSS 文件并定义 onLoad 处理函数：
style_sheet.load(css_url);
style_sheet.onLoad = function(ok) {
  if (ok) {
    // 如果样式表加载没有错误，
    // 则将其分配到文本对象，
    // 然后将 HTML 文本分配到文本字段。
    news_txt.styleSheet = style_sheet;
    news_txt.text = storyText;
  }
};

注意：为简便起见，设置了样式的 HTML 文本被“硬编码”到脚本中；在实际应用程序中，您可能要从外部文件加载文本。有关加载外部数据的信息，请参见使用外部数据。

将该文件（使用文件名 news_html.fla）保存到包含以前创建的 CSS 文件的同一个目录中。
运行影片（“控制”>“测试影片”）自动查看应用于 HTML 文本的样式。

将样式用于 HTML 的示例

若要使用样式表设置 HTML 的格式，请执行以下操作：