匯入式CSS樣式

遠飛夢發表於2018-10-28
CSS

3  《關山月》

一、案例描述

  1. 考核知識點

匯入式CSS樣式

  1. 練習目標
  • 熟練運用標記選擇器控制元素。
  • 掌握CSS匯入式的引用方法。
  1. 需求分析

通過前兩個案例，我們知道了兩種引入CSS樣式表的方法，下面將介紹另一種引入CSS樣式表的方法：匯入式。同時，還將介紹一種新的基礎選擇器—標記選擇器。本案例通過使用標記選擇器來控制元素，並運用CSS匯入式的方法來輸出一首詩《關山月》。

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

  1. 《關山月》效果
  1. 具體實現步驟如下：
  1. 新建兩個外部樣式表red.css、blue.css。
  2. 使用匯入式引入CSS樣式表。
  3. 在外部樣式表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>

 

相關文章