W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
我們已經(jīng)對(duì)CSS樣式有了一個(gè)初步的認(rèn)識(shí),那么究竟CSS是什么樣子的,如何實(shí)現(xiàn)呢?下面通過(guò)例子進(jìn)行說(shuō)明,該例子通過(guò)CSS樣式去控制圖片、包括圖片效果。
CSS開(kāi)發(fā)工具很多,最常見(jiàn)的就是Dreamweaver工具了,同時(shí)還可以使用Office中的Frontpage開(kāi)發(fā)網(wǎng)頁(yè)。本教程中采用的是Dreamweaver CS6版本。首先我們建立一個(gè)頁(yè)面,并選擇頁(yè)面的類型。具體操作如下:
網(wǎng)頁(yè)創(chuàng)建完成后,手動(dòng)在index1.html的<body>標(biāo)簽中加入如下代碼:
<div><img src="flower.jpg"></div>
src表示img要鏈接的圖片,此時(shí)圖片的位置和當(dāng)前網(wǎng)頁(yè)在同一個(gè)文件夾下。然后保存該網(wǎng)頁(yè),最后在鍵盤上按【F12】鍵在瀏覽器中瀏覽,效果如下圖所示:
從上圖中我們可以看到,沒(méi)有經(jīng)過(guò)CSS樣式控制的圖片位置是靠左的,圖片大小未經(jīng)任何控制。接下來(lái)我們通過(guò)CSS去改變圖片的效果和位置,代碼如下:
<style type="text/css>
div{margin:auto;float:right;}
img{width:200;height:200px;filter:blur(add=ture,direction=135,strength=200)}
</style>
上面代碼中,定義一個(gè)div選擇器,其屬性margin定義外部邊距自動(dòng)伸縮,float定義層浮動(dòng)在右邊顯示。img選擇器中,屬性width定義顯示圖片寬度,height定義顯示圖片高度,filter:blur使用了一個(gè)濾鏡效果。
按【F12】鍵在瀏覽器中瀏覽,效果如下圖所示:
這時(shí)我們發(fā)現(xiàn)圖片的大小、位置和效果已經(jīng)完全改變,原先的大圖已經(jīng)被縮?。╥mg選擇器實(shí)現(xiàn)),位置從左邊已經(jīng)調(diào)整到右邊(div選擇器實(shí)現(xiàn)),原先清晰的圖片已經(jīng)加上了模糊濾鏡效果。特別是濾鏡效果,這些在過(guò)往只有在Photoshop中實(shí)現(xiàn)的東西,現(xiàn)在在CSS中也可以實(shí)現(xiàn)。
CSS注解(CSS注釋)可以幫助我們對(duì)自己寫的代碼進(jìn)行說(shuō)明,如說(shuō)明某段是在什么地方、功能、樣式等,以便我們以后維護(hù)時(shí)一看即懂。另外,在團(tuán)隊(duì)開(kāi)發(fā)網(wǎng)頁(yè)時(shí),合理適當(dāng)?shù)淖⒔庥欣趫F(tuán)隊(duì)看懂這些代碼是對(duì)應(yīng)哪里的,以便順利快速地開(kāi)發(fā)網(wǎng)頁(yè)。
CSS注解是以“/*”(斜杠和星號(hào))開(kāi)始,以“*/”(星號(hào)和斜杠)結(jié)束,注解說(shuō)明內(nèi)容放到“/*”與“*/”
之間。本小節(jié)實(shí)例帶有CSS注解的完整代碼如下:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: