一. 其它(共1题,100分)
1. (其它)CSS样式必须引入到HTML文档才能被浏览器识别并应用到HTML元素。因此,通过实验实现CSS样式引入的三种方式(元素级样式、页面级样式、项目级样式)到一个HTML文档。请给出HTML代码及外部CSS文件代码和网页运行效果。
我的答案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式引入实验 - 外部样式</title>
<link rel="stylesheet" href="05.css">
</head>
<body>
<p>寒雨连江夜入吴</p>
<p>平明送客楚山孤</p>
<p>洛阳亲友如相问</p>
<p>一片冰心在玉壶</p>
</body>
</html>
外部CSS文件代码
body {
background-color: #e9e9e9;
}
p {
color: darkblue;
line-height: 1.5;
text-align: center;
font-size: 50px;
font-family: 隶书;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式引入实验 - 内联样式</title>
</head>
<body style="background-color: #e9e9e9;">
<p style="color: darkblue; line-height: 1.5; text-align: center; font-size: 50px; font-family: '隶书';">寒雨连江夜入吴</p>
<p style="color: darkblue; line-height: 1.5; text-align: center; font-size: 50px; font-family: '隶书';">平明送客楚山孤</p>
<p style="color: darkblue; line-height: 1.5; text-align: center; font-size: 50px; font-family: '隶书';">洛阳亲友如相问</p>
<p style="color: darkblue; line-height: 1.5; text-align: center; font-size: 50px; font-family: '隶书';">一片冰心在玉壶</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式引入实验 - 内部样式</title>
<style>
body {
background-color: #e9e9e9;
}
p {
color: darkblue;
line-height: 1.5;
text-align: center;
font-size: 50px;
font-family: '隶书';
}
</style>
</head>
<body>
<p>寒雨连江夜入吴</p>
<p>平明送客楚山孤</p>
<p>洛阳亲友如相问</p>
<p>一片冰心在玉壶</p>
</body>
</html>