一、列表屬性
-
定義列表符號樣式
{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 可以設置背景顏色和背景圖片,並且可以對圖片進行相關設置。
背景顏色
選擇符{background-color:red;}
/* 簡寫:*/
background:red;
背景圖片
-
說明
網頁中有兩種圖片形式:一種是插入圖片,另一種是背景圖。
插入圖片:屬於網頁內容,也就是結構。
背景圖:屬於網頁的表現,背景圖上可以顯示文字、插入圖片、表格等。
-
語法
選擇器{background-image : none | url (url) }
參數:
none : 無背景圖(默認的)
url : 背景圖像路徑背景圖片的顯示原則:
- 容器尺寸等於圖片尺寸,背景圖片正好顯示在容器中;
- 容器尺寸大於圖片尺寸,背景圖片將默認平鋪,直至鋪滿元素;
- 容器尺寸小於圖片尺寸,只顯示元素範圍以內的背景圖。
- 加載背景圖必須有容器區域;
-
注意
- background-image 允許指定一張圖片展示在背景中(只有CSS3纔可以多背景),通常可以和 background-color 連用。 如果圖片不重複,圖片覆蓋不到的地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顏色。
- 建議背景圖片後面的地址,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或數值
-
說明
- 水平向右 垂直向下移動 是正數值
- 水平向左 垂直向上移動 是負數值
- 兩個值 :第一個值表示水平位置的值,第二個值表示垂直的位置。
- 當兩個值都是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的 源文件格式,適用於顏色數量較少的圖像;