网页设计与开发 ：css样式 背景和颜色的使用

css样式

---

8.5背景与颜色的使用

• 设置颜色的方法
• 背景颜色的方法
• 背景图片的属性

背景图片的属性

• background-image 插入背景图片
• background-attachment插入背景附件
• background-repeat设置重复背景图片
• background-position 设置背景图片位置

2. 详解background -attachment

背景附件属性是用来设置背景图片是否随着滚动条的移动
一起移动
基本语法:

-  background- attachment:scroll|fixed

语法说明：

• scroll表示背景图片随着滚动条的移动而移动，是浏览器的默认值;fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动

3.详解 background- repeat

背景重复是用来设置背景图的重复显示模式
基本语法:

- background-repeat:reapt| repeat -x| repeat-y| no-repeat

• 语法说明:
  reapeat 表示背景图片再不水平和垂直方向平铺，是默认值；repeat-x表示背景图在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeate 表示背景图片不平铺

4.详解 background -position

background - position : 百分比|长度|关键字
当在网页中插入背景图片时，每一次插入的位置，都是在网页左上角
所以都是通过position 来修改位置

基本语法:

• background- position: 百分比| 长度|关键字
  语法说明：
• 利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。 水平位置的参考点时网页页面的左边，垂直位置的参考点是网页页面的上百年。关键字在啊水平方向主要有 left、center、right,关键字 在垂直方向的主要top 、center 、bottom。水平方向和 垂直方向 相互搭配使用

8.7矩形模块的概念和使用

• 矩形模块
• 设置边界
• 设置元素边框
• 设置元素内边界

---

• margin 边距 0 auto 上下距离零 左右距离auto
• border 边框
• padding 元素里面的内容距离边框的距离
• 
  
• top right bottom left
  
• border- style 边框样式属性
  -
  
  
  
  
  
  给div添加一个1px的边框