CSS綜合例項

在Web頁面中經常使用欄目顯示分類內容。本例將使用HTML和CSS結合編寫一個分類欄目模型，用於演示前面介紹的CSS應用。通過使用獨立的檔案定義樣式表，並在HTML文件中使用link標記與其連結，使HTML程式碼和CSS程式碼完全分離。在HTML文件中只負責輸出欄目的內容，而欄目的樣式則完全由CSS控制。建立一個名為list.html的HTML文件檔案，程式碼如下所示：

在上面的HTML檔案中輸出一個分類欄目，包括欄目標題、欄目內容區塊及內容列表等。但沒有定義欄目的顯示格式，而是連結一個外部樣式表文件style.css，由這個檔案中的CSS程式碼控制輸出欄目的樣式格式。程式碼如下所示：

通過將樣式檔案style.css加入到HTML檔案list.html中，則HTML文件中定義的各個元素使用了CSS進行控制，而HTML可以保持簡單明了的初衷。直接訪問list.html檔案的輸出結果如圖所示。

圖 HTML和CSS結合使用輸出欄目內容