二、初始CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>初识CSS样式</title>
</head>
<body>
<div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;">
<!-- ********* Begin ********* -->
<h1 style="font-family:楷体;text-align:center;line-height:2;">静夜思</h1>
<h2 style="font-family:楷体;text-align:center;">床前明月光</h2><br>
<h2 style="font-family:楷体;text-align:center;">疑是地上霜</h2><br>
<h2 style="font-family:楷体;text-align:center;">举头望明月</h2><br>
<h2 style="font-family:楷体;text-align:center;">低头思故乡</h2>
<!-- ********* End ********* -->
</div>
</body>
</html>
三、用内嵌式引入CSS样式
<!DOCTYPE html>
<html lang="zh">
<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>内嵌CSS样式</title>
<style type="text/css">
/* ********** BEGIN ********** */
body {
background-image:url(https://www.educoder.net/api/attachments/1427381);
background-size:cover;
}
/* ********** END ********** */
div {
position:fixed;
left:400px;
top:100px;
color:#ffffff;
font-family:黑体;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1>静夜思</h1>
<h2>床前明月光</h2>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>
</div>
</body>
</html>
四、用外链式引入CSS
<!DOCTYPE html>
<html lang="zh">
<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>外链CSS样式</title>
<!-- ********** BEGIN ********** -->
<link href="https://www.educoder.net/api/attachments/1433016"
type="text/css" rel="stylesheet"/>
<!-- ********** END ********** -->
</head>
<body>
<div>
<h1>静夜思</h1>
<h2>床前明月光</h2>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>
</div>
</body>
</html>