CSS从⼊门到精通——背景样式
第1关：背景颜⾊
任务描述
本关任务：在本关中，我们将学习如何使⽤CSS去更改HTML元素的背景属性。
本关任务完成之后的效果图如下：
背景⾊
我们可以使⽤background-color为元素设置背景⾊，通常属性值为颜⾊名称或颜⾊编码。
因为HTML⽂档中body元素包含了HTML⽂档的所有内容，所以如果要改变整个页⾯的背景颜⾊，只需要设置body元素的background-color属性。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: lightyellow;
}
h1 {
color: gray;
background-color: palegreen;
}
p {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<h1>CSS让⽹页样式更丰富</h1>
<p>这是⼀个段落</p>
</div>
</body>
</html>
显⽰效果如图：
编程要求
学会了基本设置背景颜⾊的⽅式，现在让我们来实践⼀下吧。请在右侧的编辑框中修改style.css⽂件，完成如下要求：设置body的背景颜⾊(background)为象⽛⾊(ivory)；
设置段落p的背景颜⾊(background)为浅蓝⾊(lightblue)。
测试说明
平台会对你的代码进⾏运⾏测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
step1/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step1/CSS/style.css">
</head>
<body>
<h1>CSS让⽹页样式更丰富</h1>
<p>使⽤CSS(Cascading Style Sheets)，可以使⽹页样式更加的丰富多彩，它解决内容与表现分离的问题，提⾼了⼯作效率。</p>
</body>
</html>
step1/sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: lightyellow; }
h1 {
color: gray;
background-color: palegreen; }
p {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<h1>CSS让⽹页样式更丰富</h1> <p>这是⼀个段落。</p>
</div>
</body>
</html>
step1/CSS/style.css
/* ********** BEGIN ********** */
body{
background-color:ivory;
}
/* ********** END ********** */
h1 {
font-size: 40px;
text-align: center;
}
p {
font-size: 18px;
color: grey;
/
* ********** BEGIN ********** */
background-color:lightblue ;
/* ********** END ********** */
}
第2关：背景图⽚
任务描述
本关任务：在本关中，我们将学习如何使⽤CSS去更改⽹页的背景图⽚。
本关任务完成之后的效果图如下：
相关知识
背景图⽚
设置背景图⽚
我们可以使⽤background-image属性设置元素的背景属性，常见的⽹页背景图就是这样设置的。其中，属性值通过url指定图⽚链接。书写格式：
background-image: url(“图⽚链接”)
例如：
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
/*设置背景图⽚*/
background-image: url("./Assert/memphis-colorful.png")
}
div {
width:90%;
height: 100%;
margin: auto;
background-color: #FCFDF8;
}
</style>
</head>
参考代码：
step2/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step2/CSS/style.css">
</head>
<body>
<div>
<h1>CSS让⽹页样式更丰富</h1>
<p>这是⼀个段落</p>
</div>
</body>
</html>
step2/CSS/style.css
body {
/* ********** BEGIN ********** */
/*设置背景图⽚*/
background-image: url("www.educoder/attachments/download/211106");
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}
第3关：背景定位与背景关联
css中的position属性任务描述
本关任务：在本关中，我们将学习如何使⽤CSS去更改HTML元素的背景定位和背景关联属性。
本关任务完成之后的效果图如下：
相关知识
为了完成本关任务，请⼤家认真阅读以下内容。
背景定位
当图像作为背景和⽂本显⽰在同⼀个位置时，为了页⾯排版更优美、更易于⽂本的阅读，我们可以使⽤background-position属性改变图像在背景中的位置:
举例如下：
body {
/*设置背景图⽚*/
background-image: url("www.educoder/attachments/download/211104");
background-repeat: no-repeat;
background-position: right top;
}
显⽰效果如图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论