CSS從入門到精通——文字與字型樣式
第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;
}
相關文章
- H5+css從入門到精通H5CSS
- CSS——行高、字型、文字的樣式CSS
- CSS——CSS 給文字加樣式：① 字型屬性CSS
- Thymeleaf從入門到精通
- LESS從入門到精通
- Git 從入門到精通Git
- Shell從入門到精通
- Promise從入門到精通Promise
- vim從入門到精通
- Charles 從入門到精通
- RabbitMQ從入門到精通MQ
- SAP從入門到精通
- redis從入門到精通Redis
- ElasticSearch分散式搜尋引擎——從入門到精通Elasticsearch分散式
- ElasticSearch 7.8.1 從入門到精通Elasticsearch
- Eclipse從入門到精通Eclipse
- RabbitMQ 從入門到精通 （一）MQ
- ActiveMQ從入門到精通（一）MQ
- ActiveMQ從入門到精通（二）MQ
- Kaizen如何從入門到精通?AI
- Celery框架從入門到精通框架
- jsp從入門到精通JS
- Python從入門到精通Python
- MyBatis從入門到精通(一)：MyBatis入門MyBatis
- Mysql從入門到精通原來是這樣做到了？！MySql
- css字型樣式CSS
- 深入理解正規表示式：從入門到精通
- WIFI滲透從入門到精通WiFi
- Hello Spark! | Spark，從入門到精通Spark
- Spark SQL | Spark，從入門到精通SparkSQL
- Docker從入門到精通（五）——DockerfileDocker
- Prometheus從入門到精通：一、部署Prometheus
- Android 混淆從入門到精通Android
- Java學習從入門到精通Java
- Linux從入門到精通（二）Linux
- Docker從入門到精通（三）——概念與執行流程Docker
- Django測試與持續整合：從入門到精通Django
- 【HTML＋CSS網頁設計與佈局 從入門到精通】第2章HTMLCSS網頁