背景屬性邊框屬性
背景屬性
背景顏色
語法:選擇符{background-color:顏色值;}
簡寫:background:color值;
背景圖片的設定
語法:background-image:url(背景圖片的路徑及全稱);
說明:
網頁上有兩種圖片形式:插入圖片、背景圖;
插入圖片:屬於網頁內容,也就是結構。
背景圖:屬於網頁的表現,背景圖上可以顯示文字、插入圖片、表格等。
背景圖片的顯示原則
1)容器尺寸等於圖片尺寸,背景圖片正好顯示在容器中;
2)容器尺寸大於圖片尺寸,背景圖片將預設平鋪,直至鋪滿元素;
3)容器尺寸小於圖片尺寸,只顯示元素範圍以內的背景圖。
背景圖片平鋪屬性
語法:選擇符 {background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平鋪
repeat:平鋪
repeat-x:橫向平鋪
repeat-y :縱向平鋪
背景圖的固定
語法:選擇符{background-attachment:scroll(滾動)/fixed(固定);}
說明:
fixed 固定,不隨內容一塊滾動;
scroll 隨內容一塊滾動。
背景圖片的位置
語法:background-position:值1 值2;
選擇符{background-position:left/center/right/數值 top/center/bottom/數
值;}
水平方向上的對齊方式(left/center/right)或值
垂直方向上的對齊方式(top/center/bottom)或值
說明:
兩個值 :第一個值表示水平位置的值,
第二個值表示垂直的位置。
當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置。向左方
向,向上方向都是負值
背景屬性的縮寫語法:
background:屬性值1 屬性值2 屬性值3;
背景縮寫:
background:#背景色 url(背景圖片的路徑及全稱) no-repeat center top;
網頁上常用的圖片格式(壓縮圖片)
1)jpg:有失真壓縮格式,靠損失圖片本身的質量來減小圖片的體積,適用於顏
色豐富的影象;(畫素點組成的,畫素點越多會越清晰 )
2)gif:有失真壓縮格式,靠損失圖片的色彩數量來減小圖片的體積,支援透
明,支援動畫,適用於顏色數量較少的影象;
3)png:有失真壓縮格式,損失圖片的色彩數量來減小圖片的體積,支援透明,
不支援動畫,是fireworks的 原始檔格式,適用於顏色數量較少的影象;
邊框屬性
綜合設定: border:3px red solid;
邊框: border:粗細(數值+單位) 顏色 線型(solid/dashed/dotted/double)
;
右邊框:border-right:粗細(數值+單位) 顏色 線型
(solid/dashed/dotted/double);
左邊框:border-left:粗細(數值+單位) 顏色 線型
(solid/dashed/dotted/double);
上邊框:border-top:粗細(數值+單位) 顏色 線型
(solid/dashed/dotted/double);
下邊框:border-bottom:粗細(數值+單位) 顏色 線型
(solid/dashed/dotted/double);
solid:實線,dashed:虛線,dotted:點狀線,double:雙線
三角形設定
div{
width:0px;
border:10px solid transparent;
border-left:#f00;
}