前面（HTML圖片）
漂亮的網頁肯定少不了邊框與背景的修飾，本篇筆記就是說明如何為網頁上的元素設置邊框或者背景（背景顏色和背景圖片）。
之前，先了解一下HTML中的圖片元素，因為圖片標簽的使用非常簡單，所以就插在這里說明一下。
HTML中的圖片，我們只需要掌握它的標簽寫法以及它的三個屬性就基本OK了。
寫法格式：<img src="圖像源文件的路徑"/>
主要屬性：
說明：圖片<img/>標簽跟段落<p></p>標簽不太一樣，<img/>是一個自閉合標簽，不是成對出現的。另外，src屬性指明的圖片文件路徑可以為相對路徑也可以為絕對路徑。
相對路徑：以當前網頁文件所在的文件夾為基准定位，如當前網頁所在的文件夾里面有個images文件夾，該文件夾里有一張圖片“風景1.jpg”，那么，這張圖片的相對路徑就是：“images/風景1.jpg”
絕對路徑：絕對路徑是指文件的完整路徑，如：D:/學習/HTML/images/風景1.jpg。
另外，我們可以在CSS中使用width和height來定義圖片的大小。這樣，不管圖片的實際大小是多少，我們都可以按照網頁的實際需求來定義圖片的顯示大小。
一個例子：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*設置ID為img1的圖片的寬：80px；高：111px*/ #img1{width:80px;height:111px;} </style> </head> <body><!--alt:圖片未正常顯示時提示文字，title:當鼠標移入圖片時提示文字--> <img src="images/汽車人1.jpg" alt="汽車人" title="擎天柱"/> <img id="img1" src="images/汽車人1.jpg" alt="汽車人" title="擎天柱"/> </body> </html>
CSS 邊框
我們可以為網頁上的元素設置邊框，比如圖片、表格、文本塊等等。要為某個元素加上邊框，一般只需設置三個屬性即可。
注意：上表中的三個屬性寫起來很麻煩，因此CSS提供了一個簡潔的寫法：
一個例子：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> img { /*未采用簡寫方式，邊框為紅色虛線*/ border-width:2px; border-style:dashed; border-color:red; } span { /*采用簡寫方式，邊框為綠色實線*/ border:2px solid green; } </style> </head> <body> <img src="images/汽車人1.jpg" alt="擎天柱"/> <span>左邊是擎天柱</span> </body> </html>
CSS 背景
背景也是網頁設計中最常用的樣式之一，要想頁面美觀，漂亮的背景是必須的。在CSS中，主要通過背景顏色和背景圖像兩種方式來設置背景樣式。
背景顏色 background-color
在CSS中，可以通過 background-color 屬性來定義元素的背景顏色。顏色的取值可以是關鍵字（如：red、blue、green等，基本上都是顏色的英文名稱），也可以是一個16進制的RGB值。
color 和 background-color：color是前景色（就是元素文本的顏色），background-color是背景色。
例子：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div { width:180px; height:60px; background-color:red; } span { color:white; /*文字顏色：白色*/ background-color:blue; /*背景顏色：藍色*/ } </style> </head> <body> <div>我是div元素，紅色背景</div> <span>我是span元素，藍底白字</span> </body> </html>
背景圖像
如果背景顏色已經滿足不了需求，那么就可以使用漂亮的圖片做背景，如果需要設置背景圖像，需要掌握以下四個屬性設置：
background-image：設置背景圖像的地址路徑，這是個必選屬性。
background-repeat：設置背景的重復方式，屬性取值repeat表示水平垂直方向上都平鋪，repeat-x 和 repeat-y只在水平或垂直方向上重復，no-repeat表示不平鋪。
background-position：定義背景圖片的位置。
background-attachment：當文檔比較長，該屬性可定義背景圖像是否隨文檔滾動。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed可以固定背景圖像。
例子：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div {/*為所有的DIV元素設置同樣的大小和邊框*/ width:280px; height:150px; border:2px solid red; } #div1 { background-image:url("images/背景.png"); background-repeat:no-repeat; background-position:center; } #div2 { background-image:url("images/背景.png"); background-repeat:repeat; } </style> </head> <body> <div id="div1">第一個DIV，背景圖片位置居中，不平鋪。</div> <div id="div2">第一個DIV，背景圖片重復平鋪。</div> </body> </html>
