任务描述
本关任务:采用内嵌式方法为网页元素添加样式。
效果如下:
内嵌式效果
相关知识
为了完成本关任务,你需要掌握:在HTML的头部添加CSS样式属性
在HTML头部添加CSS样式
在HTML标签中,使用style标签来添加CSS样式,其方法是将CSS代码集中写在HTML文档的头部的style标签中。
示例如下:
常用的背景样式属性有:
background-color:设置元素的背景颜色
background-image:设置元素的背景图像,取值格式为url(背景图像的路径)
background-size:设置元素的背景图像大小。取值为cover时,会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小;取值为contain时,会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小;取值为长度值,第一个参数设置宽度,第二个参数设置高度,两个参数之间空格分隔。
background-repeat:设置元素的背景平铺方式。取值为no-repeat表示不平铺;取值为repeat-x表示横向平铺;取值为repeat-y表示纵向平铺;取值为repeat表示双向平铺。
编程要求
请在右侧编辑器中的Begin - End区域内补充代码,为body标签添加样式规则,具体要求是:
1.为网页设置背景图,图像的url地址为https://www.educoder.net/api/attachments/1427381
2.设置背景图像的大小,使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
3.上述样式设置顺序:
(1)设置背景图
(2)设置背景图的大小
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
注意:因测评需要,每条样式规则可以分行写出,但行尾分号不要缺省
越努力越幸运,祝你成功!
代码示例
<!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>