第5课设置网页元素的背景、边框和宽高（视频）-小学生学JS编程-教学资料-长沙网学教育科技有限公司官网

视频课程

设置元素背景

设置背景颜色，用CSS属性：background-color

取值：任何颜色的英文单词

例如：background-color:black;

给整个网页设置背景色，只需在<body>标记上加背景色样式。

设置背景图片，用CSS属性：background-image

取值：url(图片文件名)

例如：background-image:url(123.jpg);

背景色和背景图可以同时设置，但只有当背景图有透明区域时才可以看到底下的背景色。

也可以个图片设置背景色，同样的，只要图片有透明区域就可以看得到背景色。

设置元素边框

统一设置四条边框的粗细、线型、颜色，用CSS属性：border

border:粗细线型颜色;

边框粗细的取值：整数，单位px

边框线型的取值： solid 实线、dashed 虚线、double 双倍线、none无边框

边框颜色的取值：任何颜色的英语单词

例如：border:1px solid red;

即：设置1像素粗细的实线，颜色为红色。

单独设置四条边的粗细、线型、颜色。

border-left:粗细线型颜色; ---设置左边框的粗细、线型、颜色
border-right:粗细线型颜色; ---设置右边框的粗细、线型、颜色
border-top:粗细线型颜色; ---设置顶边框的粗细、线型、颜色
border-bottom:粗细线型颜色; ---设置底边框的粗细、线型、颜色

设置元素宽高

设置元素宽度，用CSS属性：width

取值：

像素值px
百分比，相对于父元素的宽度
auto，占据最大宽度

设置元素高度，用CSS属性：height

取值：

像素值px
百分比，相对于父元素的高度
auto，高度由元素里面的内容决定

溢出部分处理，用CSS属性：overflow

取值：

hidden 溢出部分隐藏
auto 自动，内容超出时出现滚动条，没有超出则不出现。

小学生学JS编程

第5课 设置网页元素的背景、边框和宽高（视频）