在我們進入文章主題前，先復習一下CSS是什么，CSS是層疊樣式表(Cascading Style Sheet)的縮寫，是一種用于描述網頁樣式展示的語言。
美化網頁是前端開發者必備技能之一，在這篇文章里，我們將通過實踐來掌握CSS如何美化網頁。
首先我們需要了解幾個css屬性：顏色(color)、字體(font)、背景圖片(background-image)等屬性，接下來看一段html代碼：
<!DOCTYPE html> <html> <head> <title>CSS美化網頁</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>歡迎使用CSS美化網頁</h1> <p>CSS美化網頁，讓你的網頁更加醒目！</p> <ul> <li>顏色</li> <li>字體</li> <li>背景圖片</li> </ul> </body> </html>
代碼中，我們引入了一個style.css的外部樣式表，在該樣式表中設置網頁的樣式。以下為style.css的代碼段：
body {
background-color: #f2f2f2; /* 設置背景顏色 */
font-family: Arial, sans-serif; /* 設置字體族 */
}
h1 {
color: #ff0000; /* 設置標題顏色 */
}
p {
font-size: 18px; /* 設置段落字號 */
}
li {
background-image: url('bullet.png'); /* 設置列表項背景圖片 */
background-repeat: no-repeat; /* 無重復 */
background-position: left center; /* 圖片位置 */
padding: 5px; /* 內邊距 */
margin-bottom: 10px; /* 外邊距 */
}代碼中，我們以選擇器{屬性:值;}的形式設置了樣式，例如：body{background-color:#f2f2f2;}用于設置頁面背景顏色為淺灰色。
最終效果如下：
以上便是關于如何通過 CSS 美化網頁的實踐，當然,這只是入門級別的案例，希望能給想學習 CSS 的讀者一些啟發。
上一篇css美化登陸代碼