3  《关山月》

一、案例描述

  1. 考核知识点

导入式CSS样式

  1. 练习目标
  • 熟练运用标记选择器控制元素。
  • 掌握CSS导入式的引用方法。
  1. 需求分析

通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《关山月》。

  1. 案例分析
  2. 效果如图3-5所示。

导入式CSS样式_选择器

  1. 《关山月》效果
  2. 具体实现步骤如下：
  3. 新建两个外部样式表red.css、blue.css。
  4. 使用导入式引入CSS样式表。
  5. 在外部样式表red.css中，通过标记选择器分别设置标题、作者为30px字体、红色、居中效果。

在外部样式表blue.css中，通过标记选择器设置段落为16px字体、蓝色、居中效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>关三月</title>
  <style type="text/css">
  @import url("red.css");
  @import url("blue.css");
  </style>
</head>
<body>
  <h1>关三月</h1>
  <h2>李白</h2>
  <p>花间一壶酒，独酌无相亲。</p>
  <p>举杯邀明月，对影成三人。</p>
  <p>月既不解饮，影徒随我身。</p>
  <p>暂伴月将影，行乐须及春。</p>
  <p>我歌月徘徊，我舞影零乱。</p>
  <p>醒时同交欢，醉后各分散。</p>
  <p>永结无情游，相期邈云汉。</p>
</body>
</html>