CSS其他属性

一、列表属性

• 定义列表符号样式

  {list-style-type：disc|circle| square|none} 
  

  属性值	说明
  disc	实心圆
  circle	空心圆
  square	实心方块
  none	去掉列表符号

• 使用图片作为列表符号

  {list-style-image:url(图像路径)； }
  

  url(所使用图片的路径及全称)

• 定义列表符号的位置

  {list-style-position:  ；}
  

  取值： outside(外边) inside(里边)；

• 简写方法（应用最多）

  {list-style:none ; } /*去掉列表样式*/
  

  简写可直接设置列表属性值

二、边框属性

• 说明

  给边框添加样式

• 语法

  {border-style: solid/dashed/dotted/double; }
  

  属性值	说明
  solid	实线
  dashed	虚线
  dotted	点状线
  double	双线
  none/0	去掉边框

• 边框宽度

  border-width：取值；
  

• 边框颜色

  border-color:取值；
  

• 单独设置某个方向的边框属性：

  border-top：上边框
  border-bottom:下边框
  border-left:左边框
  border-right:右边框
  
  border-top-style:取值； 
  border-top-width：取值； 
  border-top-color:取值；
  

• 简写

border.png

三、背景图属性

CSS 可以设置背景颜色和背景图片，并且可以对图片进行相关设置。

背景颜色

选择符{background-color:red;}
/* 简写：*/
background:red;

背景图片

• 说明

  网页中有两种图片形式：一种是插入图片，另一种是背景图。

  ​ 插入图片：属于网页内容，也就是结构。

  ​ 背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

• 语法

  选择器{background-image : none | url (url) }
  

  参数：

  none : 无背景图（默认的）
  url : 背景图像路径

  背景图片的显示原则：

  1. 容器尺寸等于图片尺寸，背景图片正好显示在容器中;
  2. 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
  3. 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
  4. 加载背景图必须有容器区域；

• 注意

  1. background-image 允许指定一张图片展示在背景中（只有CSS3才可以多背景），通常可以和 background-color 连用。 如果图片不重复，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
  2. 建议背景图片后面的地址，url不要加引号。

背景图片平铺

• 说明

  平铺

• 语法

  选择器{background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
  

  repeat : 　背景图像在纵向和横向上平铺（默认的）

  no-repeat : 　背景图像不平铺

  repeat-x : 　横向平铺

  repeat-y : 　纵向平铺

• 注意

  设置背景图片时，默认把图片在水平和垂直方向铺满。

背景图片位置

• 语法

  选择器{background-position:水平方向属性值 垂直方向属性性;}
  

  水平方向值：left/center/right或数值

  垂直方向值： top/center/bottom或数值

• 说明

  1. 水平向右 垂直向下移动 是正数值
  2. 水平向左 垂直向上移动 是负数值
  3. 两个值 ：第一个值表示水平位置的值，第二个值表示垂直的位置。
  4. 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

背景附着

• 说明

  设置或检索背景图像是随对象内容滚动还是固定的。

• 语法：

  选择器{background-attachment : scroll | fixed }
  

• 参数：

  scroll ：背景图像是随对象内容滚动
  fixed：背景图像固定

背景简写

• 说明

  为了方便记忆，提升可读性，背景图片各属性的书写顺序：

  background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

• 语法

  选择符{background：属性值1 属性值2 属性值3;}
  
  div{background:#00ff00 url（背景图片的路径及全称） no-repeat scroll center top；} 
  

常用的图片格式

• jpg

  有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

• gif

  有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

• png

  有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;