导入式CSS样式

最新推荐文章于 2025-07-05 14:29:28 发布

Begin to change

最新推荐文章于 2025-07-05 14:29:28 发布

阅读量6.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：网页设计

本文链接：https://blog.youkuaiyun.com/qq_41404557/article/details/83478028

网页设计专栏收录该内容

13 篇文章

订阅专栏

3 《关山月》

一、案例描述

考核知识点

导入式CSS样式

练习目标

熟练运用标记选择器控制元素。
掌握CSS导入式的引用方法。

需求分析

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

案例分析

效果如图3-5所示。

《关山月》效果

具体实现步骤如下：

新建两个外部样式表red.css、blue.css。
使用导入式引入CSS样式表。
在外部样式表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>