在網頁設計中，使用CSS樣式表來設置各種元素的樣式，其中div和p是非常常見的標簽。在本文中，我們將討論如何使用CSS設置單行文章的樣式，同時使用p標簽來設置段落，pre標簽來顯示代碼。 首先，我們需要創建一個div標簽，用于容納我們的文章。在CSS樣式表中，我們可以使用以下代碼來定義該div標簽的樣式： ```css div { width: 80%; /* 設置寬度為80% */ margin: 0 auto; /* 居中對齊 */ font-size: 18px; /* 設置字體大小為18px */ line-height: 1.5; /* 設置行高為1.5倍 */ } ``` 這些屬性將使文章在頁面上居中對齊，并設置字體大小和行高。 現在，我們可以使用p標簽來定義文章的段落。將每個段落放入一個p標簽中，然后使用CSS樣式表來設置p標簽的樣式。以下是一些基本樣式： ```css p { margin: 10px 0; /* 設置段落上下邊距為10像素 */ text-indent: 2em; /* 設置首行縮進為2個字符 */ } ``` 現在，我們已經設置好了文章的整體樣式和段落樣式，但如果文章中包含代碼，我們需要一個不同的樣式來區分它。這時候，我們可以使用pre標簽來包含代碼，然后使用CSS樣式表來為其設置樣式。以下是一個簡單的例子： ```css pre { background-color: #f5f5f5; /* 設置背景顏色 */ padding: 10px; /* 設置內邊距為10像素 */ font-size: 14px; /* 設置字體大小為14px */ line-height: 1.5; /* 設置行高為1.5倍 */ border: 1px solid #e5e5e5; /* 設置邊框 */ overflow: auto; /* 添加滾動條 */ } ``` 上面的代碼將使我們的代碼塊添加一個背景顏色，內邊距，邊框和滾動條。當然，這只是基礎樣式，你可以根據具體需求進行適當修改。 通過以上的設置，我們可以輕松地創建出一個簡單的單行文章，同時可以使用p標簽來設置段落，pre標簽來顯示代碼。這些樣式可以幫助我們的文章更好地呈現，并提高用戶的閱讀體驗。