1.背景当中常用的属性:
(1)background-color 设置背景颜色
(2)background-image 自定义图片设置为背景
(3)background-repeat 设置图像是否重复以及如何重复
其中的属性:
①no-repeat:不重复(默认图片的起始位置 top left) ②repeat-x x轴重复 ③repeat-y y轴重复 ④repeat 重复
(4)background-position 设置背景图像的起始位置
其中的属性:top,center,right(分别指定图片的位置和浏览器的位置)
2.背景属性的简写格式:
background:背景颜色 背景图片 背景图片是否重复以及如何重复 背景图像的起始位置
3.背景图片的起始位置图解:
css背景练习:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css背景</title> <style type="text/css"> body{ /*background-color 设置背景颜色。 */ /* background-color:#0FF; */ /*background-image 将某个图像设置为背景 */ /* background-image:url(../05.素材/高圆圆.jpg); */ /*background-repeat:设置图像是否重复以及如何重复 几个值: no-repeat:不重复(默认图片的起始位置 top left) repeat-x:x轴重复 repeat-y:y轴重复 repeat:重复 */ /* background-repeat:no-repeat; */ /* background-position 设置背景图像的起始位置 */ /* background-position:top right; */ /*background的简写属性: background:背景颜色 背景图片 背景图片是否重复以及如何重复 背景图像的起始位置 */ background:#0F0 url(../images/Reus.jpg) no-repeat top center ; } </style> </head> <body> </body> </html>
效果:
合并表格边框 border-collapse:collapse ;
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS表格属性</title> <style type="text/css"> /*css表格属性:合并表格边框*/ table{ border-collapse:collapse ; } </style> </head> <body> <table border="1px" align="center" width="400px" height="200px"> <caption>2017年XXX学校学生成绩表</caption> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td>软工1班</td> <td>78</td> </tr> <tr> <td>李四</td> <td>软工2班</td> <td>85</td> </tr> <tr> <td>王五</td> <td>软工3班</td> <td>90</td> </tr> </table> </body> </html>
效果: