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