一、列表屬性

• 定義列表符號(hào)樣式

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

  屬性值	說(shuō)明
  disc	實(shí)心圓
  circle	空心圓
  square	實(shí)心方塊
  none	去掉列表符號(hào)

• 使用圖片作為列表符號(hào)

  {list-style-image:url(圖像路徑)； }
  

  url(所使用圖片的路徑及全稱)

• 定義列表符號(hào)的位置

  {list-style-position:  ；}
  

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

• 簡(jiǎn)寫方法（應(yīng)用最多）

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

  簡(jiǎn)寫可直接設(shè)置列表屬性值

二、邊框?qū)傩?/h2>

• 說(shuō)明

  給邊框添加樣式

• 語(yǔ)法

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

  屬性值	說(shuō)明
  solid	實(shí)線
  dashed	虛線
  dotted	點(diǎn)狀線
  double	雙線
  none/0	去掉邊框

• 邊框?qū)挾?/p>

  border-width：取值；
  

• 邊框顏色

  border-color:取值；
  

• 單獨(dú)設(shè)置某個(gè)方向的邊框?qū)傩裕?/p>

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

• 簡(jiǎn)寫

border.png

三、背景圖屬性

CSS 可以設(shè)置背景顏色和背景圖片，并且可以對(duì)圖片進(jìn)行相關(guān)設(shè)置。

背景顏色

選擇符{background-color:red;}
/* 簡(jiǎn)寫：*/
background:red;

背景圖片

• 說(shuō)明

  網(wǎng)頁(yè)中有兩種圖片形式：一種是插入圖片，另一種是背景圖。

  ? 插入圖片：屬于網(wǎng)頁(yè)內(nèi)容，也就是結(jié)構(gòu)。

  ? 背景圖：屬于網(wǎng)頁(yè)的表現(xiàn)，背景圖上可以顯示文字、插入圖片、表格等。

• 語(yǔ)法

  選擇器{background-image : none | url (url) }
  

  參數(shù)：

  none : 無(wú)背景圖（默認(rèn)的）
  url : 背景圖像路徑

  背景圖片的顯示原則：

  1. 容器尺寸等于圖片尺寸，背景圖片正好顯示在容器中;
  2. 容器尺寸大于圖片尺寸，背景圖片將默認(rèn)平鋪，直至鋪滿元素；
  3. 容器尺寸小于圖片尺寸，只顯示元素范圍以內(nèi)的背景圖。
  4. 加載背景圖必須有容器區(qū)域；

• 注意

  1. background-image 允許指定一張圖片展示在背景中（只有CSS3才可以多背景），通?？梢院?background-color 連用。 如果圖片不重復(fù)，圖片覆蓋不到的地方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。
  2. 建議背景圖片后面的地址，url不要加引號(hào)。

背景圖片平鋪

• 說(shuō)明

  平鋪

• 語(yǔ)法

  選擇器{background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
  

  repeat : 　背景圖像在縱向和橫向上平鋪（默認(rèn)的）

  no-repeat : 　背景圖像不平鋪

  repeat-x : 　橫向平鋪

  repeat-y : 　縱向平鋪

• 注意

  設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向鋪滿。

背景圖片位置

• 語(yǔ)法

  選擇器{background-position:水平方向?qū)傩灾?垂直方向?qū)傩孕?}
  

  水平方向值：left/center/right或數(shù)值

  垂直方向值： top/center/bottom或數(shù)值

• 說(shuō)明

  1. 水平向右 垂直向下移動(dòng) 是正數(shù)值
  2. 水平向左 垂直向上移動(dòng) 是負(fù)數(shù)值
  3. 兩個(gè)值 ：第一個(gè)值表示水平位置的值，第二個(gè)值表示垂直的位置。
  4. 當(dāng)兩個(gè)值都是center的時(shí)候?qū)懸粋€(gè)值就可以代表的是水平位置和垂直位置。

背景附著

• 說(shuō)明

  設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。

• 語(yǔ)法：

  選擇器{background-attachment : scroll | fixed }
  

• 參數(shù)：

  scroll ：背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
  fixed：背景圖像固定

背景簡(jiǎn)寫

• 說(shuō)明

  為了方便記憶，提升可讀性，背景圖片各屬性的書寫順序：

  background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置

• 語(yǔ)法

  選擇符{background：屬性值1 屬性值2 屬性值3;}
  
  div{background:#00ff00 url（背景圖片的路徑及全稱） no-repeat scroll center top；} 
  

常用的圖片格式

• jpg

  有損壓縮格式，靠損失圖片本身的質(zhì)量來(lái)減小圖片的體積，適用于顏色豐富的圖像;(像素點(diǎn)組成的，像素點(diǎn)越多會(huì)越清晰 )

• gif

  有損壓縮格式，靠損失圖片的色彩數(shù)量來(lái)減小圖片的體積，支持透明，支持動(dòng)畫，適用于顏色數(shù)量較少的圖像;

• png

  有損壓縮格式，損失圖片的色彩數(shù)量來(lái)減小圖片的體積，支持透明，不支持動(dòng)畫，是fireworks的 源文件格式，適用于顏色數(shù)量較少的圖像;