CSS圖像屬性課件

CSS圖像屬性

圖像基本設(shè)置重點難點圖像大小圖像內(nèi)外邊距圖像邊框左漂右漂圖像對齊背景圖像屬性給圖像添加投影一、圖像基本設(shè)置1、圖像大小設(shè)置（width/height）img{width:150;height:150;}<imgsrc=“name.gif">參考1圖像大小設(shè)置.html2、圖像邊框

border-top-width:1px; border-top-style:solid; border-top-color:#FF0000;border-top:10px

solidred;簡寫方法：粗細樣式顏色圖像邊框樣式border-top-style:solid實線groove凹槽double雙線ridge凸槽dashed虛線inset凹邊dotted點狀線outset凸邊邊框練習參考2邊框練習.html3、圖像左漂右漂（left/right）

img{

float:left;

}

<imgsrc="cup.gif">注意：只能設(shè)置左右漂，不能設(shè)置居中用于圖文混排參考3左漂右漂.html4、設(shè)置圖像的外邊距

img{margin:數(shù)值;}例如：margin：20px；表示上下左右邊距都為20margin-top上邊距

margin-right右邊距

margin-bottom下邊距

margin-left左邊距參考4外邊距.html圖像topleftrightbottom書寫順序：上右下左如何簡寫？margin:20px;=margin:20px20px20px20px；margin:30px40px；=margin:30px40px30px40px;margin:30px40px50px;=margin:30px40px50px40px;

省略規(guī)則：如果margin只有一個值，按照值的順序為margin:top;如果margin只有兩個值，按照值的順序為margin:topright;如果margin只有三個值，按照值的順序為margin:toprightbottom;margin練習Margin:50px;Margin:35px20px70px;Margin:50px90px;Margin:20px65px;Margin:10px55px30px;Margin:20px;Margin:45px25px60px;Margin:15px25px;5、設(shè)置圖像的內(nèi)邊距

img{padding:數(shù)值;(邊框到內(nèi)容的距離)}例如：padding：20px；表示上下左右邊距都為20

padding-top上內(nèi)邊距

padding-right右內(nèi)邊距

padding-bottom下內(nèi)邊距

padding-left左內(nèi)邊距img{border:5pxsolid#ff0000;padding:10px;}參考5內(nèi)邊距.html小技巧：給圖像設(shè)置padding時在FF里正常顯示，在IE里卻不可以，怎樣解決這一問題呢？方法很簡單在代碼的開始處寫入：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">參考5內(nèi)邊距.html6、圖像水平對齊：錯誤方法：img{text-align:center;}正確方法：p/div{text-align:center;}<p或div><imgsrc=“one.jpg”/></p或/div>7、圖像旁的文字垂直對齊：vertical-align:top/middle/bottom;參考6水平對齊.html參考7垂直對齊.html二、背景圖像1、設(shè)置背景圖像

<styletype="text/css">body{background-image:url(images/bg.gif)；}</style>參考8背景圖像.html2、設(shè)置背景圖像平鋪

background-repeat:

repeat水平垂直兩個方向平鋪

no-repeat不平鋪

repeat-x水平方向平鋪

repeat-y垂直方向平鋪參考9背景圖像平鋪.html3、設(shè)置背景顏色

background-color:#3399ff；4、設(shè)置背景圖像的位置

background-position:bottomright；注意：一個值表示水平方向位置，一個值表示垂直方向位置。參考10背景顏色.html參考11、12背景圖像位置.html5、設(shè)置圖像背景滾動/固定

background-attachment:scroll/fixed；body{background-image:url(images/bg.gif);background-attachment:fixed;}參考13背景固定文字滾動.html6、背景樣式簡寫background-image:url(images/bg.gif)；background-repeat:no-repeat；background-color:#3399ff；background-position:bottom

right；backgroun