免費(fèi)AI編程助手
編寫CSS樣式實(shí)例介紹
我們已經(jīng)對CSS樣式有了一個(gè)初步的認(rèn)識，那么究竟CSS是什么樣子的，如何實(shí)現(xiàn)呢？下面通過例子進(jìn)行說明，該例子通過CSS樣式去控制圖片、包括圖片效果。
一、選擇CSS開發(fā)工具
CSS開發(fā)工具很多，最常見的就是Dreamweaver工具了，同時(shí)還可以使用Office中的Frontpage開發(fā)網(wǎng)頁。本教程中采用的是Dreamweaver CS6版本。首先我們建立一個(gè)頁面，并選擇頁面的類型。具體操作如下：
二、加入CSS控制
網(wǎng)頁創(chuàng)建完成后，手動在index1.html的<body>標(biāo)簽中加入如下代碼：
<div><img src="flower.jpg"></div>
src表示img要鏈接的圖片，此時(shí)圖片的位置和當(dāng)前網(wǎng)頁在同一個(gè)文件夾下。然后保存該網(wǎng)頁，最后在鍵盤上按【F12】鍵在瀏覽器中瀏覽，效果如下圖所示：
三、控制圖片
從上圖中我們可以看到，沒有經(jīng)過CSS樣式控制的圖片位置是靠左的，圖片大小未經(jīng)任何控制。接下來我們通過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定義外部邊距自動伸縮，float定義層浮動在右邊顯示。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)加上了模糊濾鏡效果。特別是濾鏡效果，這些在過往只有在Photoshop中實(shí)現(xiàn)的東西，現(xiàn)在在CSS中也可以實(shí)現(xiàn)。
四、CSS的注釋
CSS注解（CSS注釋）可以幫助我們對自己寫的代碼進(jìn)行說明，如說明某段是在什么地方、功能、樣式等，以便我們以后維護(hù)時(shí)一看即懂。另外，在團(tuán)隊(duì)開發(fā)網(wǎng)頁時(shí)，合理適當(dāng)?shù)淖⒔庥欣趫F(tuán)隊(duì)看懂這些代碼是對應(yīng)哪里的，以便順利快速地開發(fā)網(wǎng)頁。
CSS注解是以“/*”（斜杠和星號）開始，以“*/”（星號和斜杠）結(jié)束，注解說明內(nèi)容放到“/*”與“*/”
之間。本小節(jié)實(shí)例帶有CSS注解的完整代碼如下：
更多建議：