CSS是級聯樣式表，用來表現HTML等文件樣式的語言，CSS能夠真正做到網頁的表現與內容分離的設計語言，也就是說，做好了一款網頁，可以通過另一個后綴名是css的文件進行修改其中的樣式，不過在html的<head>標簽中，需要使用<link>標簽來調用css樣式表。
CSS背景
CSS允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果，下表是CSS關於背景的一些屬性
| 屬性 | 描述 |
| background-color | 設置元素的背景眼睛 |
| background-image url() | 把圖片設置為背景 |
| background-repeat | 設置背景圖片是否及如果重復 |
| background-position | 設置背景圖片的起始位置 |
| backgroud-attachment | 背景圖像是否固定或者隨着頁面的其余部分滾動 |
先創建一個測試用的html，然后用css修改它的背景效果
（注：css樣式與html要在同一目錄下，否則就需要href屬性就要設置調用css的路徑）
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 調用css文件，href是css的路徑+文件名，沒有填路徑代表css與html在同一目錄下 --> <link rel="stylesheet" type="text/css" href="CssStyle.css"> </head> <body> </body> </html>
然后可以創建css樣式表來修改html了
background-color
body{ /*修改body背景顏色*/ background-color: #7DBBDA; }
background-image url(圖片路徑):
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); }
添加圖片后，發現圖片會鋪滿整個頁面，所以還可以設置background-repeat的屬性no-repeat，來使其圖片不要重復
background-repeat: no-repeat
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片不要重復*/ background-repeat: no-repeat; }
當然也可以設置重復x軸，或者重復y，這樣有個好處就是可以用很小的圖片，然后通過重復x軸，讓他變成頁面的標題。這樣用戶在訪問這個頁面時會非常的快。因為用戶訪問頁面時，計算機會下載資源，然后解析顯示出來給用戶看。如果下載資源的東西小了。頁面顯示的速度就會非常快。就像1G需要幾個小時，而1K下載不到0.1秒
background-repeat: repeat-x;
background-repeat: repeat-y;
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片只重復x軸*/ background-repeat: repeat-x; }
background-position;
這個是用來設置圖片的初始位置，可以直接填寫x,y軸的坐標。也可以填寫right、left、center來布局位置，不過在使用right時，需要通過top來固定頂點，要么圖片默認會上下居中的。
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片不重復*/ background-repeat: no-repeat; /*設置圖片的初始位置*/ background-position: right; }
上圖就是沒有設置top，導致圖片的y軸默認是center的，現在來設置top
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片不重復*/ background-repeat: no-repeat; /*設置圖片的初始位置*/ background-position: right top; }
可以發現，圖片長了不少。。。我的這個圖片太小了，看起來效果不那么明顯，如果是一張照片，就會看到，在沒有設置top的時候，圖片的靠右，並且上下居中的，導致圖片縮進了瀏覽器邊緣，沒有顯示全
backgroud-attachment
這個是將圖片固定在頁面上，當你文章很長的時候，你拖動滾動條，圖片不會因為滾動條而消失
把html文件的body中，多加點空格，來讓滾動條出現
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 調用css文件，href是css的路徑+文件名，沒有填路徑代表css與html在同一目錄下 --> <link rel="stylesheet" type="text/css" href="CssStyle.css"> </head> <body> <br /><h1>測試用的數據</h1><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1>測試用的數據</h1><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h2>測試用的數據</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html>
來設置backgroud-attachment，使圖片固定
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片只重復x軸*/ background-repeat: repeat-x; /*設置圖片固定，不會隨着滾動條向下滾動時而消失*/ background-attachment: fixed; }
background-size
規定背景圖片的尺寸，可以自己定義。這個標簽是CSS3才有的
body{ /*修改body背景顏色*/ background-color: #7DBBDA; /*在body中增加圖片*/ background-image: url("bt.png"); /*設置圖片不重復*/ background-repeat: no-repeat; /*自定義圖片大小*/ background-size: 100px 500px; }
可以看到，設置了以后，這個圖片變的很大