css的基本使用3-背景样式

---

背景样式

背景颜色

• background-color：颜色|transparent
• transparent 是完全透明黑色(black) 的速计法，类似rgba(0，0，0，0，)这种值
• 颜色值(颜色名称/rgb/十六进制)
• 背景区包括内容(padding)。内边距。和边框。不报错外边距(margin)

背景图片

• 设置背景图片 background -image ：URl|none
• url 的地址可以是相对地址也可以是绝对地址
• 元素的背景占据了元素的全部尺寸，包括内边距和边框，不包括外边距
• 默认背景图片位于元素的左上角，并在水平垂直方向重复

背景图片显示方式

• 背景图片显示方式

• background-attachment ：sroll|fixed

  • scroll：默认值，背景图片随滚动条滚动
  • fixed ：当页面的其余部分滚动时，背景图片不过移动

背景图片重复方式

• background-repeat

  • repeat：默认背景水平方向和垂直方向重复

  • repeat -x ：背景图片水平方向重复

  • repeat-y ：背景图片垂直方向重复

  • no-repeat：背景不重复

背景图片的定位

• background-position ：百分比|值|top|right|bottom|left|center

值	说明	注意
长度值(x y)	第一个水平位置，第二个垂直位置左上角	只写一个参数的话第二个默认居中
百分比(x% y%)	第一个水平百分比位置，第二个垂直百分比位置左上角	只写一个参数的话第二个默认居中
top	顶部显示 相当于垂直方向0	只写一个参数的话第二个默认居中
right	右边显示 相当于水平方向100%	只写一个参数的话第二个默认居中
left	左边显示 相当于水平方向0	只写一个参数的话第二个默认居中
bootom	底部显示 相当于垂直方向为100%	只写一个参数的话第二个默认居中
center	居中显示 水平方向和垂直方向50%	水平垂直方向都居中

css列表样式

列表项标记

• 设置列表项的标识样式类型

• list-style-type 关键字|node

• 无序列表

  值	说明
  node	无标记
  Disc	实心的圆点
  circle	空心的圆点
  square	实心的方块

• 有序列表

  值	说明
  node	无标记
  decimal	从1开始的整数
  lower-roman	小写罗马数字
  lower-alpha	小写英文字母
  upper-alpha	大写英文字母

• 使用图片设值列表项的标记

  • list-style-image：URL|node

• 设置列表项的标记位置

  • list-style -inside|outside

  • inside ：列表项目标记在文本之内，且环绕文本根据标记对齐

  • outside ：默认值 列表项目标记放置在文本以外，且环绕文本不根据标记对齐