在網(wǎng)頁設計時,圖片的效果很大程度上影響到網(wǎng)頁效果,要使網(wǎng)頁圖文并茂并且布局結構合理,就要注意圖片的設置。通過CSS統(tǒng)一管理,不但可以更加精確地調(diào)整圖片的各種屬性,還可以實現(xiàn)很多特殊效果。本節(jié)將對圖片的邊框、圖片的大小與縮放、圖片對齊等屬性進行介紹。
在HTML語法中,可以直接通過<.img>標簽的border屬性來為圖片添加邊框,語法如下:<img src="圖片路徑" border="數(shù)值">
【示例1】
啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<body>標簽內(nèi)輸入以下代碼:
<img src="images/11.jpg" border="0">
<img src="images/11.jpg" border="1">
<img src="images/11.jpg" border="2">
<img src="images/11.jpg" border="3">按F12鍵,在瀏覽器中預覽。
可以看到,用HTML控制圖片邊框是無法設計出豐富多彩的圖片效果的,需要使用CSS中的border-style、border-color和border-width 3個屬性來定義邊框。其語法如下:
border-style:參數(shù);
border-color:參數(shù);
border-width:數(shù)值;
border-style屬性用于設置邊框的樣式,用的最多的兩個參數(shù)是dotted表示點劃線,用dashed表示虛線,其他的一些值會在后面的章節(jié)中詳細說明。在網(wǎng)站建設中,border-color屬性用于設置邊框的顏色。bor-der-width屬性用于設置邊框的寬度。
【示例2】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test1.html,在<body>標簽內(nèi)輸入以下代碼:
<img src="images/22.jpg" class="pic1"/>
<img src="images/22.jpg" class="pic2"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。
.pic1 { border-style: dotted; /*點劃線*/
border-color: #000066; /*邊框顏色*/
border-width: 2px; /*邊框粗細*/}
.pic2 { border-style: dashed; /*點劃線*/
border-color: #FF0000; /*邊框顏色*/
border-width: 10px; /*邊框粗細*/}
【示例3】下面示例為圖像四邊設計不同的邊框樣式。
在CSS中,還可以分別設置4個邊框的不同樣式,即分別設置border-left、border-right、border-top、border-bottom的樣式。啟動Dreamweaver,新建一個網(wǎng)頁,保存為test2.html,在<body>標簽內(nèi)輸入以下代碼:
<img src="images/33.jpg"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。
img { border-left-style: dotted; /*左點劃線*/
border-left-color: #FF9900; /*左邊框顏色*/
border-left-width: 5px; /*左邊框粗細*/
border-right-style: dashed;
border-right-color: #33CC33;
border-right-width: 2px;
border-top-style: solid; /*上實線*/
border-top-color: #CC00FF; /*上邊框顏色*/
border-top-width: 10px; /*上邊框粗細*/
border-bottom-style: groove;
border-bottom-color: #666666;
border-bottom-width: 15px;}
【示例4】在示例3中介紹了分別設置4個邊框的方法,border屬性還可以將各個值寫到同一語句,用空格分隔,這樣可以大大縮短代碼長度。
啟動Dreamweaver,新建一個網(wǎng)頁,保存為test3.html,在<body>標簽內(nèi)輸入以下代碼:
<img src="images/44.jpg" class="pic1"/>
<img src="images/44.jpg" class="pic2"/>
在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義圖片邊框樣式。
.pic1 { border: 5px double #FF00FF; /*將各個值合并*/}.pic2 {
border-right: 5px double #000; border-left: 8px solid #45673A;}
可以看到代碼的長度明顯減少,這樣不但清晰易讀,而且大大加快了網(wǎng)頁下載速度。
【拓展】示例4是將border的各個屬性值寫到一起,有的時候還會出現(xiàn)這樣的語句:border-style:dotted solid dashed doubel、border-width:5px10px,這種設置方法也是正確的,但是上面這種語句如果寫成這樣:border:dotted solid dasheddoubel、borderh:5px 10px,就不對了。
制作網(wǎng)頁時,在設置邊框樣式時,如果border-style、border-width、bor-der-color只設置一個參數(shù),則該參數(shù)將作用于4個邊,即4個邊的樣式風格一樣;如果設置兩個參數(shù),則第一個參數(shù)作用于上、下邊框,第二個參數(shù)作用于左、右邊框;如果設置3個參數(shù),則第一個參數(shù)作用于上邊框,第二個參數(shù)作用于左、右邊框,第三個參數(shù)作用于下邊框;如果設置4個參數(shù),則按照上-右-下-左的順序作用于各個邊框。
pic1 { border-style: dotted solid; /*上、下邊框為dotted,左、右邊框為solid*/
border-width: 5px 10px 8px 3px; /*上邊框為5px,右邊框為10px,下右邊框為8px,左邊框為3px*/
border-color: #009966 #000; /*分別設置上、下和左、右邊框顏色*/}
.pic2 { border: 5px double #000; /*合并border的各個屬性*/}
CSS中很多其他的屬性也可以進行類似的操作,例如margin和padding:padding:0px 5px、margin:0px 10px 3px 20px。
提示:在設置border-style、border-color和border-width時,設置的順序是有講究的,在設置border(-?)color和border-width之前必須先設置border-style,否則border-color和border-width的效果將不會顯示。