/*第1关 初识CSS:丰富多彩的网页样式<!DOCTYPE html>*/
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
text-align: center;
}
h1 {
/* ********** BEGIN ********** */
text-align: center;
font-size:40px;
/************ END ********** */
color: #62A8CB;
}
img {
height: 250px;
}
p {
/* ********** BEGIN ********** */
font-size:18px;
color:grey;
/* ********** END ********** */
}
</style>
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
<img src="https://www.educoder.net/attachments/download/189467">
<p>使用CSS(Cascading Style Sheets),可以使网页样式更加的丰富多彩,它解决内容与表现分离的问题,提高了工作效率。</p>
</body>
</html>
第2关 CSS样式引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>O Captain! My Captain!</title>
<!-- ********** BEGIN ********** -->
<link rel="stylesheet" href="step2/CSS/style.css">
<!-- ********** END ********** -->
<style type="text/css">
h1 {
color:cornflowerblue;
}
img {
float: left;
margin-right: 1em;
}
</style>
</head>
<body>
<div>
<!-- ********** BEGIN ********** -->
<h1 >O Captain! My Captain!</h1>
<!-- ********** END ********** -->
<img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
<p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
<!-- ********** BEGIN ********** -->
<p><small >© Walt Whitman</small></p>
<!-- ********** END ********** -->
</div>
</body>
</html>