[第五季]9.CSS样式分类及背景样式

来源：互联网发布：office2016 for mac 编辑：程序博客网时间：2024/05/16 23:47

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-repeatbackground-repeat:no-repeat/repeat/repeat-x/repeat-yrepeat=重复,当图片覆盖补料整个区域的时候,是否需要重复.设置x轴覆盖和y轴覆盖.(4)图片是否更正滚动background-attachment:fixed/scrollfixed=固定的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}

阅读全文

0 0