CSS是一種網頁設計語言，用于控制網頁的視覺外觀和布局。當我們在編寫網頁時，通常需要給不同的元素添加樣式，以便達到我們想要的效果。今天我們來談談如何只顯示一篇文章的頂部部分，下面我們來看看具體實現方法。
在HTML中，我們通常使用p標簽來分段，代碼則使用pre標簽來保留原有格式。我們可以針對這兩種標簽來設置樣式，使得只顯示文章的頂部部分。
首先，我們需要添加一個CSS樣式表，并設置p標簽和pre標簽的樣式。以下是樣式表的代碼：

css
p {
font-size: 18px;  /* 設置字體大小 */
margin: 20px 0;  /* 設置段落的上下邊距 */
}
pre {
background-color: #f7f7f7;  /* 設置背景顏色 */
border: 1px solid #ddd;  /* 設置邊框樣式 */
padding: 10px;  /* 設置邊距 */
overflow-x: auto;  /* 自動滾動條 */
}

接下來，我們需要使用CSS選擇器來選擇只想要顯示文章頂部部分的元素。我們可以使用:first-child偽類選擇器來選擇元素的第一個子元素。例如，以下代碼將只顯示第一個p標簽和pre標簽：

css
p:first-child,
pre:first-child {
display: block;  /* 顯示元素 */
}
p:not(:first-child),
pre:not(:first-child) {
display: none;  /* 隱藏元素 */
}

這樣，我們就能夠只顯示文章的頂部部分了。當用戶滾動頁面時，下面的部分會自動顯示出來。通過這種方式，我們可以讓用戶在不影響閱讀體驗的情況下，快速地了解文章的內容。
總的來說，針對不同的標簽設置樣式并使用選擇器來控制元素的顯示和隱藏，是CSS的基本使用方法。希望這篇文章能夠幫助你更好地掌握CSS技巧，制作出更加美好的網頁。