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:取值;
  • 簡寫

    CSS其他屬性

三、背景圖屬性

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的 源文件格式,適用於顏色數量較少的圖像;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章