1.背景颜色
任务描述
本关任务:在本关中,我们将学习如何使用CSS去更改HTML元素的背景属性。
本关任务完成之后的效果图如下:
完成如下要求:
- 设置
body
的背景颜色(background)为象牙色(ivory); - 设置段落
p
的背景颜色(background)为浅蓝色(lightblue)。
相关知识
背景色
我们可以使用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>
显示效果如图:
代码文件
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/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/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去更改网页的背景图片。
本关任务完成之后的效果图如下:
完成如下要求:
- 设置背景图片,图标url地址为
https://www.educoder.net/attachments/download/211106
。
相关知识
背景图片
- 设置背景图片
- 我们可以使用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>
显示效果如图:
本例设置了body背景图像。
- 平铺背景图像
- 指定了背景图像之后,默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式,可以设置
background-repeat
属性。
具体属性值设置如下:
样式 | 属性值 |
---|---|
水平平铺重复 | repeat-x |
垂直平铺重复 | repeat-y |
不重复平铺 | no-repeat |
例如:
1.默认平铺
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
}
2.repeat-x
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-x;
}
3.repeat-y
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: repeat-y;
}
4.no-repeat
body {
/*设置背景图片*/
background-image:url("./Assert/sun.jpg");
background-repeat: no-repeat;
}
代码文件
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("https://www.educoder.net/attachments/download/211106")
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}
3.背景定位与背景关联
任务描述
本关任务:在本关中,我们将学习如何使用CSS去更改HTML元素的背景定位和背景关联属性。
本关任务完成之后的效果图如下:
以简写背景的方式,设置背景图片,满足如下要求:
- 图片地址:
https://www.educoder.net/attachments/download/211104
; - 图片模式:no-repeat;
- 背景图片定位: right top;
- 设置背景关联: fixed。
相关知识
- 背景定位
- 当图像作为背景和文本显示在同一个位置时,为了页面排版更优美、更易于文本的阅读,我们可以使用
background-position
属性改变图像在背景中的位置:
举例如下:
body {
/*设置背景图片*/
background-image: url("https://www.educoder.net/attachments/download/211104");
background-repeat: no-repeat;
background-position: right top;
}
显示效果如图:
本例中,设置right top
代表放置在元素内边距区的右上角。
对于具体位置,大家可以使用如下关键字的组合:
属性值 |
---|
top left |
top center |
top right |
center left |
center center |
center right |
bottom left |
bottom center |
bottom right |
如果值定义了一个关键词,那么第二个值将是”center“。当然也可以使用百分比和长度值,现在只作为了解。
- 背景关联
- 当页面较长时,滚动页面,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用
background-attachment
属性,将其值设置为fixed
。
body {
background-image: url("https://www.educoder.net/attachments/download/211104");
background-repeat: no-repeat;
background-attachment: fixed;
}
- 简写背景
- 从上面的实例中,大家学习了多种背景属性的设置,为了简化这些属性的书写,我们可以将这些属性合并在同一个属性中。
例如:
body {
background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}
使用简写属性时,属性值的顺序为:
- background-color;
- background-image;
- background-repeat;
- background-attachment;
- background-position。
以上属性无需全部使用,大家可以按照页面设置使用。
代码文件
step3/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step3/CSS/style.css">
</head>
<body>
<div>
<h1>CSS让网页样式更丰富</h1>
<p>这是一个段落</p>
</div>
</body>
</html>
step3/CSS/style.css:
body {
margin-right: 200px;
/* ********** BEGIN ********** */
/*设置背景图片*/
background:url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top;
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}