[第五季]9.CSS样式分类及背景样式_分类背景 css-优快云博客

本文链接：https://blog.youkuaiyun.com/zeephom/article/details/76359979

本文详细介绍如何使用CSS设置背景颜色、背景图片及重复属性等，并通过具体示例代码演示了div和body标签的样式配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①首先要运用div里写各种测试内容,然后把div里的内容移到CSS文件里去.
div设置中设置背景颜色为温和点的颜色,可以设置div的颜色,也可以设置窗口的颜色.
先CSS中设置宽和高都设置500px.
设置背景颜色为为何一点的颜色.
设置背景图片重复为无重复.
设置图片为熊出没图片.
设置图片的位置为 x轴居中,y轴在底部.
②body标签
背景颜色设置一个温和点的颜色,比方说淡紫色
设置背景图片为nv2.png.
设置背景图片重复为x轴平铺.
设置图片模式为固定不动.
设置图片位置为居中居中

5.自测代码

#a
{
    width:200px;
    height:100px;
    font-size:50px;
    color:blue;
    background-color:#F0C;
}

<div id="a">
这是一段文字
</div>

注意:
(1)首先要运用div里写各种测试内容,然后移到CSS文件用id应用.
(2)background就是背景的意思,这个和background-image区分.
还有就是字体颜色就是color,但是字体大小为font-size:200px;
(3)div定义的背景是可以设置宽度和高度的,类似于悬浮在body背景上的一个特殊的模块.
(4)复习笔记里的那些要求的英文命令都要背出来.

2.课堂笔记

(1)背景
backgroundcolor:颜色,可以设置div的背景颜色,也可以窗口的背

景颜色.
选择器:类选择器(class,.),id选择器(id,#),标签选择器()
body标签改变整个body的颜色
(2)background-image:url(地址)
想让div有个图片.
在.a中设置background-image
在body中设置background-image
(3)background-repeat
background-repeat:no-repeat/repeat/repeat-x/repeat-y
repeat=重复,当图片覆盖补料整个区域的时候,是否需要重复.
设置x轴覆盖和y轴覆盖.
(4)图片是否更正滚动
background-attachment:fixed/scroll
fixed=固定的
scroll=滚动的
分别设置一下
(5)background-postion:X Y
 X:left,center,right Y:top,center,bottom
 X,Y也可以设置左边距和右边距(50px,50px)

3.课程效果图

body标签
这里写图片描述

div标签
这里写图片描述

1.代码

test1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="myfile.css">
</head>

<body>

<div>
这是一段文字
</div>
</body>
</html>

myfile.css

div
{
    height:500px;
    weight:500px;
    background-color:#F96;
    background-repeat:no-repeat;
    background-image:url(xiong.png);
    background-position:center bottom;
}

body
{
    background-color:#3F0;
    background-image:url(nv2.png);
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position
}