第1关：字体颜色、类型与大小
本关任务
本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下：
相关知识
一般而言，用于文本的CSS属性可以分为如下两类：
字体样式：用于字体的属性，包含字体类型、大小、粗细等；
文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。
在本关卡中，我们首先学习第一种字体样式属性。
字体颜色 color
字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<style type="text/css">
p {font-size: 25px;}
.main {color:lightslategray}
.error {color: brown}
.info {color:mediumseagreen}
</style>
</head>
<body>
<p class="main">这是一行段落。</p>
<p class="error">这是一行段落。</p>
<p class="info">这是一行段落。</p>
</body>
</html>
显示效果如下：
提示：
在右侧编辑器左上方，点击代码文件，选择font-color.html，修改任意代码之后，可以预览实时显示效果。你也可以自己尝试设置其他字体颜色。
字体类型 font-family
如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用font-family 属性定义文本的字体系列。
字体系列
CSS中， 有两种类型的字体系列：
通用字体系列 - 有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）；
特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）。
通过设置HTML表格中不同格的字体属性，页面表格直观展示了字体类型：
表格HTML：
<body>
<table>
<thead>
<tr>
<th>通用字体系列</th>
<th>字体系列</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>Serif</td>
<td class="times">This is Times New Roman font.</td>
<td class="times">Serif字体中字符在行的末端拥有额外的装饰</td>
</tr>
<tr>
<td class="georgia">This is Georgia font.</td>
<td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td>
</tr>
<tr class="arial">
<td>Sans-serif</td>
<td>Arial Verdana</td>
<td>Sans字体在末端没有额外的装饰</td>
</tr>
<tr>
<td rowspan=2>Monospace</td>
<td class="courier">This is Courier New font.</td>
<td class="courier">所有的等宽字符具有相同的宽度</td>
</tr>
<tr>
<td class="lucida">This is Lucida Console font.</td>
<td class="lucida">所有的等宽字符具有相同的宽度</td>
</tr>
</tbody>
</table>
使用CSS设置字体属性：
.times {
font-family: “Times New Roman”;
}
.georgia {
font-family: “Georgia”;
}
.arial {
font-family: “Arial”;
}
.courier {
font-family: “Courier New”;
}
.lucida {
font-family: “Lucida Console”;
}
不同类型字体的效果如下：
字体栈
在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack)给浏览器提供多种选择。例如：
font-family: “Trebuchet MS”, Verdana, sans-serif;
使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。
字体大小 font-size
在CSS中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。
设置方式
我们可以使用绝对和相对两种方式设置字体的大小，两种设置不同在于：
绝对大小：
将文本设置为指定的字体大小；
用户不能在不同的浏览器中改变文本大小；
绝对大小在确定用户设备大小时很有用。
相对大小：
相对于周围的元素来设置大小；
允许用户在不同的浏览器中改变文本大小。
常用单位
设置字体大小时，会使用到不同的单位。下面，我们来了解几种设置字体的常用单位。
像素
像素即px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。
例如，
HTML:
<body>
<h1>一级标题通常最大</h1>
<h2>二级标题次之</h2>
<p>段落文字大小适中</p>
</body>
CSS:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 18px;
}
设置字体之后的显示效果：
这种方式可以在Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。但是，这种调整是整个页面，而不仅仅是文本。
em
em的方式可以解决在部分Internet Explorer 中无法调整文本。
浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。
em 单位与像素转换公式为：
px/16=em
所以刚才同样的大小，通过em的方式设置为：
h1 {
font-size:2.5em; /* 40px/16=2.5em /
}
h2 {
font-size:1.875em; / 30px/16=1.875em /
}
p {
font-size:1.125em; / 18px/16=1.125em */
}
百分比结合em
为body元素设置默认大小时，可以使用百分百，同样是相对于16px：
body {
font-size:100%;
}
编程要求
学习了字体的颜色、大小和类型之后，让我们来使用CSS丰富九寨沟介绍页面吧，请在右侧的编辑框中修改style.css文件。
设置 h1， h2 的font-family 为： PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
字体大小：
使用em的方式设置（需要转换px与em单位）：
h1元素为 35px 的字体大小；
h2元素为 28px 的字体大小；
h3元素为 20px 的字体大小；
.intro .subhead （intro类下的subhead子类）为 18px 的字体大小。
字体颜色：
设置h2元素的字体颜色为：#7d717c；
设置h3元素的字体颜色为：green；
设置 .intro 类元素的字体颜色为 #fefefe。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
step7/CSS/style.css
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
/* ********** BEGIN ***********/
font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/* ********** END ***********/
}
h1 {
/* ********** BEGIN ***********/
font-size:2.1875em;
/* ********** END ************/
}
h2 {
background-color: #eaebef;
/* ********** BEGIN ***********/
font-size:1.75em;
color:#7d717c;
/* ********** END ************/
}
h3 {
background-color: white;
/* ********** BEGIN ***********/
font-size:1.25em;
color:green;
/* ********** END ************/
padding-left: 10px;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
footer {
margin: 10px auto;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* ********** BEGIN ***********/
color:#fefefe;
/* ********** END ************/
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* ********** BEGIN ***********/
font-size:1.125em;
/* ********** END ************/
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
a:link {
color: #e10000;
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}
step7/font-color.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<style type="text/css">
p {font-size: 25px;}
.main {color:lightslategray}
.error {color: brown}
.info {color:mediumseagreen}
</style>
</head>
<body>
<p class="main">这是一行段落。</p>
<p class="error">这是一行段落。</p>
<p class="info">这是一行段落。</p>
</body>
</html>
step7/font-family.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Font</title>
<style type="text/css">
body {
font-size: 1.1em;
}
table {
border-collapse: collapse;
}
caption {
font-weight: bold;
margin-bottom: .5em;
}
th,
td {
padding: .5em .75em;
border: 1px solid #000;
}
tfoot {
font-weight: bold;
}
.tiems {
font-family: "Times New Roman";
}
.georgia {
font-family: "Georgia";
}
.arial {
font-family: "Arial";
}
.courier {
font-family: "Courier New";
}
.lucida {
font-family: "Lucida Console";
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>通用字体系列</th>
<th>字体系列</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>Serif</td>
<td class="times">This is Times New Roman font.</td>
<td class="times">Serif字体中字符在行的末端拥有额外的装饰</td>
</tr>
<tr>
<td class="georgia">This is Georgia font.</td>
<td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td>
</tr>
<tr class="arial">
<td>Sans-serif</td>
<td>Arial Verdana</td>
<td>Sans字体在末端没有额外的装饰</td>
</tr>
<tr>
<td rowspan=2>Monospace</td>
<td class="courier">This is Courier New font.</td>
<td class="courier">所有的等宽字符具有相同的宽度</td>
</tr>
<tr>
<td class="lucida">This is Lucida Console font.</td>
<td class="lucida">所有的等宽字符具有相同的宽度</td>
</tr>
</tbody>
</table>
</body>
</html>
step7/font-size.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>font-size</title>
<style type="text/css">
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>一级标题通常最大</h1>
<h2>二级标题次之</h2>
<p>段落文字大小适中</p>
</body>
</html>
step7/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>九寨沟简介</title>
<link rel="stylesheet" href="step7/CSS/style.css">
</head>
<body>
<article class="architect">
<div class="intro">
<h1>九寨沟简介</h1>
<p class="subhead">五岳归来不看山,九寨归来不看水</p>
<p><a href="#">九寨沟</a>位于四川省西北部岷山山脉南段的阿坝藏族羌族自治州九寨沟县漳扎镇境内，地处岷山南段弓杆岭的东北侧。距离成都市400多千米，系长江水系嘉陵江上游白水江源头的一条大支沟。 九寨沟自然保护区地势南高北低，山谷深切，高差悬殊。北缘九寨沟口海拔仅2000米，中部峰岭均在4000米以上，南缘达4500米以上，主沟长30多公里。</p>
<p>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、*自然保护区、国家地质公园、世界生物圈保护区网络，也是中国第一个以保护自然风景为主要目的的自然保护区。</p>
</div>
<section class="chapter origin">
<h2 id="origin">九寨沟由来</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189497/20171114052.jpg" width="320" height="213" alt="Red bubbles" />
<img src="https://www.educoder.net/attachments/download/189498/20171114053.jpg" width="320" height="213" alt="Tile Pieces" />
</div>
<p>九寨沟的得名来自于景区内九个藏族寨子（树正寨、则查洼寨、黑角寨、荷叶寨、盘亚寨、亚拉寨、尖盘寨、热西寨、郭都寨），这九个寨子又称为“何药九寨”。由于有九个寨子的藏民世代居住于此，故名为“九寨沟”。</p>
<p>世界自然遗产组织的官员，在1992年第一次到九寨沟考察时，从沟口进去时，大家被大雨蒙住了视线。当他们一行来到火花海景点时，天空突然放睛，阳光穿过空中的雾霭，在天空中画出了一道美丽的彩虹，妖娆艳丽的火花海呈现在这些世界级官员的眼前，他们被眼前的美景惊呆了。随即，他们俯下身跪在海子边上，向这大自然的造化叩拜。事后他们回忆说，这里的景色太美了，让他们太吃惊了。他们不曾想象过，大自然竟有如此的鬼斧神工，将中国的九寨沟点画得如天仙般的美丽。</p>
<p>他们的叩拜，是对大自然的敬仰；他们的叩拜，是感谢中国，为世界留下了一块瑰宝，为人间留住了一片仙境。</p>
</section>
<section class="chapter guell">
<h2 id="park-guell">童话世界</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189480/308.jpg" width="320" height="213" alt="Blue Mosaic" />
<img src="https://www.educoder.net/attachments/download/189494/323.jpg" width="320" height="213" alt="Glass Mosaic" />
</div>
<p>目前，九寨沟景区仅保留了树正寨、荷叶寨、则查洼寨这三个村寨，善良淳朴的他们，用微笑迎接着前来九寨沟的每一个人。而在这些村寨中，最壮观的莫过于树正寨前的<a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>“九宝莲花菩提塔”</cite></a>，七彩经幡随风飘荡，圣洁的白塔在阳光下仿若闪着光，这里也是众多游客到来时，都会双手合十，轻声祭拜的地方。</p>
<p>九寨沟是大自然鬼斧神工之杰作。这里四周雪峰高耸，湖水清澈艳丽，飞瀑多姿多彩，急流汹涌澎湃，林木青葱婆娑。蓝蓝的天空，明媚的阳光，清新的空气和点缀其间的古老村寨、栈桥、磨坊，组成了一幅内涵丰富、和谐统一的优美画卷，历来被当地藏族同胞视为<em>“神山圣水”</em>。九寨沟景区享誉中外，东方人称之为“人间仙境”，西方人则将之誉为“童话世界”。</p>
</section>
<hr>
<section class="season spring">
<h3 id="spring-flower">春和景明，花开浪漫</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189481/310.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189482/311.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189483/312.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>春风吹拂，沉睡的九寨沟苏醒了。冰雪融化，新绿发芽，春水的颜色映着山色，娇嫩得让人不忍探视，仿佛只要轻轻地一口气都能让它消失。水边道旁，闹哄哄开满了不知名的美丽山花，桃红、绛紫、靓蓝、鹅黄，繁华似锦，烂漫一路。温柔而慵懒的春阳吻接湖面，爱抚春芽，也悸动了你久闭的心门......</p>
<p>嫩芽悄然出现，一抹抹新绿因重获生机而生长得日益茂盛，春风吹醒了封冻的海子，吹皱了一汪碧水，水色是幽静的蓝、清新的绿、浅浅的黄。无风的晴日，山林树色尽数倒映其中，呈现出对称之美。</p>
<p>春日，九寨沟呈现着季节更替的慌忙景象，山林还是一片残冬，长海尚未解冻，山脚下却早已是一幅初春画卷，野桃花开得如火如荼，在春阳下摇摆着一树花枝，将浓烈的春意诉说。天空湛蓝碧净，更衬得一树的花朵玲珑可爱，一簇簇拥挤在一起，争抢着呼吸春的气息。</p>
</section>
<section class="season autumn">
<h3 id="autumn-leaf">彩林漫漫，炫雅妩媚</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189484/313.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189485/314.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189486/315.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>浪漫的秋风也吹来了九寨沟最为灿烂的时节。山林晕染成色，除了绿色以外，还呈现出金黄、火红等色彩，五彩缤纷，倒映在明丽的湖水中，湖山同色，湖水也斑斓似锦了，一时间竟然不能分清哪里是山哪里是水，十分迷人。</p>
<p>五彩斑斓的世界深沉且厚重，彩色的湖水、彩色的天空、彩色的世界，她似一个少女，藏着五彩斑斓的心事；她秀美婉约，灵动优雅，秋阳点染着静谧的山谷，树树含着秋韵，山山堆着落晖。</p>
<p>缤纷的落叶在湖光流韵间漂浮，悠远的晴空碧净而湛蓝，秋天的九寨沟美得仿佛不真实，无时无刻不在演绎着赤、橙、黄、绿、青、蓝、紫的梦幻组合，古人说的“造化钟神秀”，也就不过如此吧。</p>
</section>
<section class="season summer">
<h3 id="summer-water">夏绿九寨，恣意清凉</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189487/316.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189488/317.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189489/318.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>炎炎夏日，似火骄阳与粘湿汗水笼罩了整个大地，而此时的九寨沟却截然不同。她掩映在整片整片苍翠欲滴的浓阴之中，茂盛的林木守卫着海子，欢快的流水梳理着树枝与水草，一切都透着清爽。</p>
<p>森林树脂的清新，海子浓淡相宜的妆容，银帘般的瀑布抒发四季中最为恣意的激情，凉爽的夏风吹拂着经幡。此时此刻，天是蓝的，树是绿的，海子是斑斓不可言说的，心情是*的……</p>
<p>骄阳流金，蝉鸣踏歌，萤火森森，这样的九寨总是让人仿佛置身在桃花源的仙境里，不禁感叹，十里轻风不如你，七米暖阳不及卿。</p>
</section>
<section class="season winter">
<h3 id="winter-snow">冰雪童话，灵韵冬色</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189490/319.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189491/320.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189492/321.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>寂静的冬日，九寨沟变得尤为宁静，也更具诗情画意。山峦与树林银装素裹，瀑布变成了一幅幅巨大的天然艺术冰雕，湖泊冰清玉洁，湖面的蓝色冰层在日出日落的温差中，变幻着奇妙的冰纹。</p>
<p>除长海、熊猫海冰冻60厘米外，其他的海子都不会完全结冰，冰块与冰花，有的像丝锦，有的像哈达，有的像流云，有的像青纱……</p>
<p>那撩人心魄的飞雪，纷纷扬扬、飘飘洒洒，如同春天的柳絮一般，不停地飞舞着，放肆地亲吻着山峦，亲吻着海子，亲吻着你的脸宠。如此洁白而高雅的世界，真的可以让你忘却世间无畏的纷争和烦恼。</p>
</section>
</article>
</body>
<footer>Copyright (c) 2002 - 2018 <a target="_blank" href="https://www.jiuzhai.com/about/jiuzhai-valley">九寨沟风景名胜区管理局</a> Holder All Rights Reserved.</footer>
</html>
第2关：字体粗细与风格
本关任务
本关任务是使用CSS字体属性设置页面字体的粗细和风格，设置之后页面标题和页脚效果如下：
相关知识
字体粗细 font-weight
我们使用font-weight属性设置文本的粗细。印刷世界中，根据内容的需要会设置不同的字体粗细，同样的在网页中也要更具内容设置。
font-weight设置的数值在100~900之间，分为9级加粗度。有些字体会内置加粗的级别。例如100 对应最细的字体，900 对应最粗的字体； 400对应normal·，而 700 则等价于 bold。
另外，设置值为lighter, bolder代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步。
例如，对于如下实例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style type="text/css">
#normal {
font-weight: 400;
}
#light {
font-weight: 100;
}
</style>
</head>
<body>
<h1>Blod: 温馨提示 </h1>
<p id="normal">Normal: 少一串脚印，多一份绿意。</p>
<p id="light">Light: 保护环境，从我做起。light</p>
</body>
</html>
其在网页中的显示效果如下：
字体风格 font-style
我们在设置斜体文本时使用 font-style 属性。
它属性有三个值：
normal - 文本正常显示；
italic - 文本斜体显示；
oblique - 文本倾斜显示。
例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style type="text/css">
p {font-size: 25px;}
.normal {font-style:normal}
.italic {font-style:italic}
.oblique {font-style:oblique}
</style>
</head>
<body>
<p class="normal">This is a normal paragraph.</p>
<p class="italic">This is a italic paragraph.</p>
<p class="oblique">This is a oblique paragraph.</p>
</body>
</html>
字体显示效果如下：
你可能注意到本实例使用英文作为内容，在中文中，是不推荐使用斜体的，换句话说，中文是没有斜体的。虽然可以使用样式倾斜，但不利于阅读。
提示：
在使用时选择normal的情况很好判断，但是如何在italic和oblique中进行选择呢？ 其实，一般情况下，italic 和 oblique 文本在网页中看起来完全一样。斜体（italic）是一种简单的字体风格。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
编程要求
学习了字体的风格和粗细之后，让我们来使用这些样式使九寨沟介绍页面细节更完善吧，请在再右侧的编辑框中修改style.css文件。
同时设置 h1, h2 的font-weight为normal；
设置footer的字体粗细为light；显示效果为斜体(italic)。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
step8/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>九寨沟简介</title>
<link rel="stylesheet" href="step8/CSS/style.css">
</head>
<body>
<article class="architect">
<div class="intro">
<h1>九寨沟简介</h1>
<p class="subhead">五岳归来不看山,九寨归来不看水</p>
<p><a href="#">九寨沟</a>位于四川省西北部岷山山脉南段的阿坝藏族羌族自治州九寨沟县漳扎镇境内，地处岷山南段弓杆岭的东北侧。距离成都市400多千米，系长江水系嘉陵江上游白水江源头的一条大支沟。 九寨沟自然保护区地势南高北低，山谷深切，高差悬殊。北缘九寨沟口海拔仅2000米，中部峰岭均在4000米以上，南缘达4500米以上，主沟长30多公里。</p>
<p>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、*自然保护区、国家地质公园、世界生物圈保护区网络，也是中国第一个以保护自然风景为主要目的的自然保护区。</p>
</div>
<section class="chapter origin">
<h2 id="origin">九寨沟由来</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189497/20171114052.jpg" width="320" height="213" alt="Red bubbles" />
<img src="https://www.educoder.net/attachments/download/189498/20171114053.jpg" width="320" height="213" alt="Tile Pieces" />
</div>
<p>九寨沟的得名来自于景区内九个藏族寨子（树正寨、则查洼寨、黑角寨、荷叶寨、盘亚寨、亚拉寨、尖盘寨、热西寨、郭都寨），这九个寨子又称为“何药九寨”。由于有九个寨子的藏民世代居住于此，故名为“九寨沟”。</p>
<p>世界自然遗产组织的官员，在1992年第一次到九寨沟考察时，从沟口进去时，大家被大雨蒙住了视线。当他们一行来到火花海景点时，天空突然放睛，阳光穿过空中的雾霭，在天空中画出了一道美丽的彩虹，妖娆艳丽的火花海呈现在这些世界级官员的眼前，他们被眼前的美景惊呆了。随即，他们俯下身跪在海子边上，向这大自然的造化叩拜。事后他们回忆说，这里的景色太美了，让他们太吃惊了。他们不曾想象过，大自然竟有如此的鬼斧神工，将中国的九寨沟点画得如天仙般的美丽。</p>
<p>他们的叩拜，是对大自然的敬仰；他们的叩拜，是感谢中国，为世界留下了一块瑰宝，为人间留住了一片仙境。</p>
</section>
<section class="chapter guell">
<h2 id="park-guell">童话世界</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189480/308.jpg" width="320" height="213" alt="Blue Mosaic" />
<img src="https://www.educoder.net/attachments/download/189494/323.jpg" width="320" height="213" alt="Glass Mosaic" />
</div>
<p>目前，九寨沟景区仅保留了树正寨、荷叶寨、则查洼寨这三个村寨，善良淳朴的他们，用微笑迎接着前来九寨沟的每一个人。而在这些村寨中，最壮观的莫过于树正寨前的<a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>“九宝莲花菩提塔”</cite></a>，七彩经幡随风飘荡，圣洁的白塔在阳光下仿若闪着光，这里也是众多游客到来时，都会双手合十，轻声祭拜的地方。</p>
<p>九寨沟是大自然鬼斧神工之杰作。这里四周雪峰高耸，湖水清澈艳丽，飞瀑多姿多彩，急流汹涌澎湃，林木青葱婆娑。蓝蓝的天空，明媚的阳光，清新的空气和点缀其间的古老村寨、栈桥、磨坊，组成了一幅内涵丰富、和谐统一的优美画卷，历来被当地藏族同胞视为<em>“神山圣水”</em>。九寨沟景区享誉中外，东方人称之为“人间仙境”，西方人则将之誉为“童话世界”。</p>
</section>
<hr>
<section class="season spring">
<h3 id="spring-flower">春和景明，花开浪漫</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189481/310.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189482/311.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189483/312.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>春风吹拂，沉睡的九寨沟苏醒了。冰雪融化，新绿发芽，春水的颜色映着山色，娇嫩得让人不忍探视，仿佛只要轻轻地一口气都能让它消失。水边道旁，闹哄哄开满了不知名的美丽山花，桃红、绛紫、靓蓝、鹅黄，繁华似锦，烂漫一路。温柔而慵懒的春阳吻接湖面，爱抚春芽，也悸动了你久闭的心门......</p>
<p>嫩芽悄然出现，一抹抹新绿因重获生机而生长得日益茂盛，春风吹醒了封冻的海子，吹皱了一汪碧水，水色是幽静的蓝、清新的绿、浅浅的黄。无风的晴日，山林树色尽数倒映其中，呈现出对称之美。</p>
<p>春日，九寨沟呈现着季节更替的慌忙景象，山林还是一片残冬，长海尚未解冻，山脚下却早已是一幅初春画卷，野桃花开得如火如荼，在春阳下摇摆着一树花枝，将浓烈的春意诉说。天空湛蓝碧净，更衬得一树的花朵玲珑可爱，一簇簇拥挤在一起，争抢着呼吸春的气息。</p>
</section>
<section class="season autumn">
<h3 id="autumn-leaf">彩林漫漫，炫雅妩媚</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189484/313.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189485/314.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189486/315.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>浪漫的秋风也吹来了九寨沟最为灿烂的时节。山林晕染成色，除了绿色以外，还呈现出金黄、火红等色彩，五彩缤纷，倒映在明丽的湖水中，湖山同色，湖水也斑斓似锦了，一时间竟然不能分清哪里是山哪里是水，十分迷人。</p>
<p>五彩斑斓的世界深沉且厚重，彩色的湖水、彩色的天空、彩色的世界，她似一个少女，藏着五彩斑斓的心事；她秀美婉约，灵动优雅，秋阳点染着静谧的山谷，树树含着秋韵，山山堆着落晖。</p>
<p>缤纷的落叶在湖光流韵间漂浮，悠远的晴空碧净而湛蓝，秋天的九寨沟美得仿佛不真实，无时无刻不在演绎着赤、橙、黄、绿、青、蓝、紫的梦幻组合，古人说的“造化钟神秀”，也就不过如此吧。</p>
</section>
<section class="season summer">
<h3 id="summer-water">夏绿九寨，恣意清凉</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189487/316.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189488/317.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189489/318.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>炎炎夏日，似火骄阳与粘湿汗水笼罩了整个大地，而此时的九寨沟却截然不同。她掩映在整片整片苍翠欲滴的浓阴之中，茂盛的林木守卫着海子，欢快的流水梳理着树枝与水草，一切都透着清爽。</p>
<p>森林树脂的清新，海子浓淡相宜的妆容，银帘般的瀑布抒发四季中最为恣意的激情，凉爽的夏风吹拂着经幡。此时此刻，天是蓝的，树是绿的，海子是斑斓不可言说的，心情是*的……</p>
<p>骄阳流金，蝉鸣踏歌，萤火森森，这样的九寨总是让人仿佛置身在桃花源的仙境里，不禁感叹，十里轻风不如你，七米暖阳不及卿。</p>
</section>
<section class="season winter">
<h3 id="winter-snow">冰雪童话，灵韵冬色</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189490/319.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189491/320.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189492/321.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>寂静的冬日，九寨沟变得尤为宁静，也更具诗情画意。山峦与树林银装素裹，瀑布变成了一幅幅巨大的天然艺术冰雕，湖泊冰清玉洁，湖面的蓝色冰层在日出日落的温差中，变幻着奇妙的冰纹。</p>
<p>除长海、熊猫海冰冻60厘米外，其他的海子都不会完全结冰，冰块与冰花，有的像丝锦，有的像哈达，有的像流云，有的像青纱……</p>
<p>那撩人心魄的飞雪，纷纷扬扬、飘飘洒洒，如同春天的柳絮一般，不停地飞舞着，放肆地亲吻着山峦，亲吻着海子，亲吻着你的脸宠。如此洁白而高雅的世界，真的可以让你忘却世间无畏的纷争和烦恼。</p>
</section>
</article>
</body>
<footer>Copyright (c) 2002 - 2018 <a target="_blank" href="https://www.jiuzhai.com/about/jiuzhai-valley">九寨沟风景名胜区管理局</a> Holder All Rights Reserved.</footer>
</html>
step8/font-weight.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style type="text/css">
#normal {
font-weight: 400;
}
#light {
font-weight: 100;
}
</style>
</head>
<body>
<h1 id="blod">Blod: 温馨提示 </h1>
<p id="normal">Normal: 少一串脚印，多一份绿意。</p>
<p id="light">Light: 保护环境，从我做起。</p>
</body>
</html>
step8/font-style.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style type="text/css">
p {font-size: 25px;}
.normal {font-style:normal}
.italic {font-style:italic}
.oblique {font-style:oblique}
</style>
</head>
<body>
<p class="normal">This is a normal paragraph.</p>
<p class="italic">This is a italic paragraph.</p>
<p class="oblique">This is a oblique paragraph.</p>
</body>
</html>
step8/CSS/style.css
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
/* 设置h1, h2 的font-family*/
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/* ********** BEGIN ***********/
font-weight:normal;
/* ********** END ***********/
}
h1 {
/* 设置h1元素为 35px 的字体大小 */
font-size: 2.1875em;
/* 35px/16px */
}
h2 {
background-color: #eaebef;
/* 设置h2元素的字体颜色为：#7d717c */
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
}
h3 {
background-color: white;
/* 使用em的方式设置h3元素为 20px 的字体大小 */
font-size: 1.25em;
/* 设置h3元素的字体颜色为：green */
color: green;
padding-left: 10px;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
/* 子选择器 */
em,
a:link,
.intro .subhead {
font-weight: bold;
}
footer {
/* ********** BEGIN ***********/
font-weight:light;
font-style:italic;
/* ********** END ***********/
margin: 10px auto;
}
footer a {
font-style: normal;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* 设置 .intro 类元素的字体颜色为 #fefefe */
color: #fefefe;
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
font-size: 1.125em;
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
a:link {
/* 设置 a:link 元素的字体颜色为 #b44f4f */
color: #e10000;
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}
第3关：文本装饰与文本布局
本关任务
本关任务是使用CSS字体属性设置页面装饰与文本布局。任务完成之后，页面效果如下：
相关知识
文本装饰 text-decoration
我们使用text-decoration设置字体上的文本装饰。
其可用值有：
none: 取消已经存在的任何文本装饰；
underline: 文本下划线；
overline: 文本上划线；
line-through: 贯穿文本的线；
blink：闪烁文本。
使用时，可以根据需求，同时添加多个装饰值。
例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本装饰</title>
<style type="text/css">
a {
text-decoration: none;
}
p {
text-orientation: line-through;
color: gray;
}
</style>
</head>
<body>
<p>你好，欢迎学习educoder平台的<a href="#">CSS实训课程</a>。</p>
</body>
</html>
使用此方法在设置链接时可以设置取消链接上的默认下划线。显示效果如下：
文本布局
接下来，我们来看用来影响文本布局的属性。
文本对齐 text-align
我们使用text-align来改变一个元素中的文本行互相之间的对齐方式。
其可用值有：
left: 左对齐文本；
right: 右对齐文本；
center: 居中文字；
justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同。
不同的语言中默认的对齐方式不同，大部分西方语言都是从左向右读，text-align 的默认值是 left。而对于希伯来语和阿拉伯语之类的的语言，阅读时从右向左读，text-align 则默认为 right。
例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<head>
<meta charset="UTF-8">
<title>CSS text-align</title>
<style>
h1 {
text-align: center;
}
p.from {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>端午节</h1>
<p class="from"><a href="https://zh.wikipedia.org/zh-sg/端午节">*</a></p>
<p class="main">端午节是东亚文化圈的重要传统节日，定在每年农历五月初五，别称端阳节、端日节、午日节、粽子节、天中节、五月节、五日节、艾节、端五、重午、重五、午日、夏节、菖蒲节，本来是夏季的一个送离五瘟神，驱除瘟疫的节日。后来楚国的爱国诗人屈原于端午节投江自尽，后在中国演化为端午节，以纪念屈原，有人称其为诗人节（有些地方是纪念吴国忠臣伍子胥的忌日），是华人四大节日之一，与新年、中秋等节日同属东亚文化圈的*、香港、澳门、*、琉球、日本、朝鲜半岛、越南的重要传统节日。</p>
<p>
<b>注意：</b> 重置浏览器窗口大小可查看 "justify" 的实际效果。</p>
</body>
</html>
显示效果如图：
行高 line-height
我们使用 line-height 属性来设置行高。
注意：行高属性值不能为负。
其可用值有：
normal：默认。设置合理的行间距；
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；
length：设置固定的行间距；
%：基于当前字体尺寸的百分比行间距；
inherit：从父元素继承 line-height 属性的值。
例如：
<html>
<head>
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-height: 200%
}
</style>
</head>
<body>
<p>
标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。
</p>
<p class="small">
本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。
</p>
<p class="big">
本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。
</p>
</body>
</html>
显示效果如下：
本实例中使用百分比设置行高，同样的，我们有可以使用像素值设置行高：
p.small {
line-height: 10px
}
p.big {
line-height: 30px
}
或者使用数字：
p.small {
line-height: 0.5
}
p.big {
line-height: 2
}
字符间距和字间距 letter-spacing word-spacing
letter-spacing 属性用于控制字符间的间隔多少；
其可用值有：
normal：默认值，字符间没有额外的间隔；
length：定义字符间的固定间隔（可以为负值）；
inherit：从父元素继承 letter-spacing 属性的值。
同样的，word-spacing 属性用于控制字与字的间隔多少。
其可用值有：
normal：默认；
length：定义字之间的固定间隔；
inherit：从父元素继承 word-spacing 属性的值。
举例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>letter & word spacing</title>
<style>
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<h1> 这是标题一 This is heading 1</h1>
<h2> 这是标题二 This is heading 2</h2>
<p>这是一些文本。This is some text.</p>
</body>
</html>
显示效果如下：
编程要求
学习完本关的知识，现在到你实践巩固的时候了，来完成下面的任务吧。请在右侧的编辑框中修改style.css文件。
同时设置 h1, h2 文字居中对齐；
设置footer, photos居中对齐；
设置h3文字左对齐；
设置a:link元素的text-decoration属性为none；
设置a:hover元素的text-decoration属性为underline。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
step9/text-decoration.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本装饰</title>
<style type="text/css">
a {
text-decoration: none;
}
p {
text-orientation: line-through;
color: gray;
}
</style>
</head>
<body>
<p>你好，欢迎学习educoder平台的<a href="#">CSS实训课程</a>。</p>
</body>
</html>
step9/text-align.html
<!DOCTYPE html>
<html lang="zh">
<head>
<head>
<meta charset="UTF-8">
<title>CSS text-align</title>
<style>
h1 {
text-align: center;
}
p.from {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>端午节</h1>
<p class="from"><a href="https://zh.wikipedia.org/zh-sg/端午节">*</a></p>
<p class="main">端午节是东亚文化圈的重要传统节日，定在每年农历五月初五，别称端阳节、端日节、午日节、粽子节、天中节、五月节、五日节、艾节、端五、重午、重五、午日、夏节、菖蒲节，本来是夏季的一个送离五瘟神，驱除瘟疫的节日。后来楚国的爱国诗人屈原于端午节投江自尽，后在中国演化为端午节，以纪念屈原，有人称其为诗人节（有些地方是纪念吴国忠臣伍子胥的忌日），是华人四大节日之一，与新年、中秋等节日同属东亚文化圈的*、香港、澳门、*、琉球、日本、朝鲜半岛、越南的重要传统节日。</p>
<p>
<b>注意：</b> 重置浏览器窗口大小可查看 "justify" 的实际效果。</p>
</body>
</html>
step9/spacing.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>letter & word spacing</title>
<style>
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<h1> 这是标题一 This is heading 1</h1>
<h2> 这是标题二 This is heading 2</h2>
<p>这是一些文本。This is some text.</p>
</body>
</html>
step9/line-height.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS line-height</title>
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-height: 200%
}
</style>
</head>
<body>
<p>
标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。
</p>
<p class="small">
本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。
</p>
<p class="big">
本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。
</p>
</body>
</html>
step9/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>九寨沟简介</title>
<link rel="stylesheet" href="step9/CSS/style.css">
</head>
<body>
<article class="architect">
<div class="intro">
<h1>九寨沟简介</h1>
<p class="subhead">五岳归来不看山,九寨归来不看水</p>
<p><a href="#">九寨沟</a>位于四川省西北部岷山山脉南段的阿坝藏族羌族自治州九寨沟县漳扎镇境内，地处岷山南段弓杆岭的东北侧。距离成都市400多千米，系长江水系嘉陵江上游白水江源头的一条大支沟。 九寨沟自然保护区地势南高北低，山谷深切，高差悬殊。北缘九寨沟口海拔仅2000米，中部峰岭均在4000米以上，南缘达4500米以上，主沟长30多公里。</p>
<p>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、*自然保护区、国家地质公园、世界生物圈保护区网络，也是中国第一个以保护自然风景为主要目的的自然保护区。</p>
</div>
<section class="chapter origin">
<h2 id="origin">九寨沟由来</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189497/20171114052.jpg" width="320" height="213" alt="Red bubbles" />
<img src="https://www.educoder.net/attachments/download/189498/20171114053.jpg" width="320" height="213" alt="Tile Pieces" />
</div>
<p>九寨沟的得名来自于景区内九个藏族寨子（树正寨、则查洼寨、黑角寨、荷叶寨、盘亚寨、亚拉寨、尖盘寨、热西寨、郭都寨），这九个寨子又称为“何药九寨”。由于有九个寨子的藏民世代居住于此，故名为“九寨沟”。</p>
<p>世界自然遗产组织的官员，在1992年第一次到九寨沟考察时，从沟口进去时，大家被大雨蒙住了视线。当他们一行来到火花海景点时，天空突然放睛，阳光穿过空中的雾霭，在天空中画出了一道美丽的彩虹，妖娆艳丽的火花海呈现在这些世界级官员的眼前，他们被眼前的美景惊呆了。随即，他们俯下身跪在海子边上，向这大自然的造化叩拜。事后他们回忆说，这里的景色太美了，让他们太吃惊了。他们不曾想象过，大自然竟有如此的鬼斧神工，将中国的九寨沟点画得如天仙般的美丽。</p>
<p>他们的叩拜，是对大自然的敬仰；他们的叩拜，是感谢中国，为世界留下了一块瑰宝，为人间留住了一片仙境。</p>
</section>
<section class="chapter guell">
<h2 id="park-guell">童话世界</h2>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189480/308.jpg" width="320" height="213" alt="Blue Mosaic" />
<img src="https://www.educoder.net/attachments/download/189494/323.jpg" width="320" height="213" alt="Glass Mosaic" />
</div>
<p>目前，九寨沟景区仅保留了树正寨、荷叶寨、则查洼寨这三个村寨，善良淳朴的他们，用微笑迎接着前来九寨沟的每一个人。而在这些村寨中，最壮观的莫过于树正寨前的<a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>“九宝莲花菩提塔”</cite></a>，七彩经幡随风飘荡，圣洁的白塔在阳光下仿若闪着光，这里也是众多游客到来时，都会双手合十，轻声祭拜的地方。</p>
<p>九寨沟是大自然鬼斧神工之杰作。这里四周雪峰高耸，湖水清澈艳丽，飞瀑多姿多彩，急流汹涌澎湃，林木青葱婆娑。蓝蓝的天空，明媚的阳光，清新的空气和点缀其间的古老村寨、栈桥、磨坊，组成了一幅内涵丰富、和谐统一的优美画卷，历来被当地藏族同胞视为<em>“神山圣水”</em>。九寨沟景区享誉中外，东方人称之为“人间仙境”，西方人则将之誉为“童话世界”。</p>
</section>
<hr>
<section class="season spring">
<h3 id="spring-flower">春和景明，花开浪漫</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189481/310.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189482/311.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189483/312.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>春风吹拂，沉睡的九寨沟苏醒了。冰雪融化，新绿发芽，春水的颜色映着山色，娇嫩得让人不忍探视，仿佛只要轻轻地一口气都能让它消失。水边道旁，闹哄哄开满了不知名的美丽山花，桃红、绛紫、靓蓝、鹅黄，繁华似锦，烂漫一路。温柔而慵懒的春阳吻接湖面，爱抚春芽，也悸动了你久闭的心门......</p>
<p>嫩芽悄然出现，一抹抹新绿因重获生机而生长得日益茂盛，春风吹醒了封冻的海子，吹皱了一汪碧水，水色是幽静的蓝、清新的绿、浅浅的黄。无风的晴日，山林树色尽数倒映其中，呈现出对称之美。</p>
<p>春日，九寨沟呈现着季节更替的慌忙景象，山林还是一片残冬，长海尚未解冻，山脚下却早已是一幅初春画卷，野桃花开得如火如荼，在春阳下摇摆着一树花枝，将浓烈的春意诉说。天空湛蓝碧净，更衬得一树的花朵玲珑可爱，一簇簇拥挤在一起，争抢着呼吸春的气息。</p>
</section>
<section class="season autumn">
<h3 id="autumn-leaf">彩林漫漫，炫雅妩媚</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189484/313.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189485/314.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189486/315.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>浪漫的秋风也吹来了九寨沟最为灿烂的时节。山林晕染成色，除了绿色以外，还呈现出金黄、火红等色彩，五彩缤纷，倒映在明丽的湖水中，湖山同色，湖水也斑斓似锦了，一时间竟然不能分清哪里是山哪里是水，十分迷人。</p>
<p>五彩斑斓的世界深沉且厚重，彩色的湖水、彩色的天空、彩色的世界，她似一个少女，藏着五彩斑斓的心事；她秀美婉约，灵动优雅，秋阳点染着静谧的山谷，树树含着秋韵，山山堆着落晖。</p>
<p>缤纷的落叶在湖光流韵间漂浮，悠远的晴空碧净而湛蓝，秋天的九寨沟美得仿佛不真实，无时无刻不在演绎着赤、橙、黄、绿、青、蓝、紫的梦幻组合，古人说的“造化钟神秀”，也就不过如此吧。</p>
</section>
<section class="season summer">
<h3 id="summer-water">夏绿九寨，恣意清凉</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189487/316.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189488/317.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189489/318.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>炎炎夏日，似火骄阳与粘湿汗水笼罩了整个大地，而此时的九寨沟却截然不同。她掩映在整片整片苍翠欲滴的浓阴之中，茂盛的林木守卫着海子，欢快的流水梳理着树枝与水草，一切都透着清爽。</p>
<p>森林树脂的清新，海子浓淡相宜的妆容，银帘般的瀑布抒发四季中最为恣意的激情，凉爽的夏风吹拂着经幡。此时此刻，天是蓝的，树是绿的，海子是斑斓不可言说的，心情是*的……</p>
<p>骄阳流金，蝉鸣踏歌，萤火森森，这样的九寨总是让人仿佛置身在桃花源的仙境里，不禁感叹，十里轻风不如你，七米暖阳不及卿。</p>
</section>
<section class="season winter">
<h3 id="winter-snow">冰雪童话，灵韵冬色</h3>
<div class="photos">
<img src="https://www.educoder.net/attachments/download/189490/319.jpg" width="215" height="143" alt="星光点芦苇" />
<img src="https://www.educoder.net/attachments/download/189491/320.jpg" width="215" height="143" alt="碧蓝映彩池" />
<img src="https://www.educoder.net/attachments/download/189492/321.jpg" width="215" height="143" alt="一树桃花摇曳" />
</div>
<p>寂静的冬日，九寨沟变得尤为宁静，也更具诗情画意。山峦与树林银装素裹，瀑布变成了一幅幅巨大的天然艺术冰雕，湖泊冰清玉洁，湖面的蓝色冰层在日出日落的温差中，变幻着奇妙的冰纹。</p>
<p>除长海、熊猫海冰冻60厘米外，其他的海子都不会完全结冰，冰块与冰花，有的像丝锦，有的像哈达，有的像流云，有的像青纱……</p>
<p>那撩人心魄的飞雪，纷纷扬扬、飘飘洒洒，如同春天的柳絮一般，不停地飞舞着，放肆地亲吻着山峦，亲吻着海子，亲吻着你的脸宠。如此洁白而高雅的世界，真的可以让你忘却世间无畏的纷争和烦恼。</p>
</section>
</article>
</body>
<footer>Copyright (c) 2002 - 2018 <a target="_blank" href="https://www.jiuzhai.com/about/jiuzhai-valley">九寨沟风景名胜区管理局</a> Holder All Rights Reserved.</footer>
</html>
step9/CSS/style.css
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
font-weight: normal;
/*********** BEGIN ***********/
text-align:center;
/************ END ************/
}
h1 {
/* 设置h1元素为 35px 的字体大小 */
font-size: 2.1875em;
/* 35px/16px */
}
h2 {
background-color: #eaebef;
/* 设置h2元素的字体颜色为：#7d717c */
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
}
h3 {
background-color: white;
/* 使用em的方式设置h3元素为 20px 的字体大小 */
font-size: 1.25em;
/* 设置h3元素的字体颜色为：green */
color: green;
padding-left: 10px;
/*********** BEGIN ***********/
text-align:left;
/************ END ************/
}
p {
text-align: justify;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
/* 子选择器 */
em,
a:link,
.intro .subhead {
font-weight: bold;
}
footer {
font-weight: light;
font-style: italic;
/* ********** BEGIN ***********/
text-align:center;
/* ********** END ***********/
margin: 10px auto;
}
footer a {
font-style: normal;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* 设置 .intro 类元素的字体颜色为 #fefefe */
color: #fefefe;
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
font-size: 1.125em;
text-align: center;
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
.photos {
/*********** BEGIN ***********/
text-align:center;
/*********** END *************/
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
/* 默认显示样式 */
a:link {
color: #e10000;
/*********** BEGIN ***********/
text-decoration:none;
/*********** END *************/
}
a:visited {
color: #b44f4f;
}
/* 鼠标放在上面的显示样式 */
a:hover {
color: #f00;
/*********** BEGIN ***********/
text-decoration:underline;
/*********** END *************/
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}