在網(wǎng)頁設(shè)計(jì)過程中，經(jīng)常會需要展示代碼段或者h(yuǎn)tml源碼，pre標(biāo)簽是當(dāng)前常用的方式之一，然而，CSS也能勝任pre標(biāo)簽的職責(zé)，而且還有更多樣式可選。 預(yù)格式化文本（preformatted text）是指保留空格以及代碼本身的文本，html中的pre標(biāo)簽用于展示這種文本。但是，pre標(biāo)簽的樣式并不好看，它通常只是以等寬字體展示文本。這時，使用CSS可以實(shí)現(xiàn)更好的呈現(xiàn)效果。 首先，我們來介紹兩個CSS屬性： white-space: pre; 用于保留空格和換行符 word-wrap: break-word; 用于防止文本溢出邊界 接下來，我們就可以使用CSS來重現(xiàn)pre標(biāo)簽的效果，如下所示： pre { white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 14px; background-color: #f5f5f5; border: 1px solid #ccc; padding: 10px; margin: 10px 0; } 這段代碼使用了monospace字體，讓每個字符在水平方向上占據(jù)相同的空間，令文本更具可讀性。此外，字體大小、背景顏色、邊框以及填充、邊距等樣式都可根據(jù)需要自定義。 除了展示代碼段，使用CSS還可以制作更復(fù)雜的代碼高亮效果。下面是一個簡單的CSS樣式表，使用了多種層疊樣式來實(shí)現(xiàn)對代碼的高亮： .highlight { background-color: #f7f7f8; border: 1px solid #ccc; border-left: 3px solid #ccc; color: #333; font-size: 14px; margin: 10px 0; padding: 10px; white-space: pre-wrap; } .highlight .keyword { color: #c00; font-weight: bold; } .highlight .comment { color: #999; font-style: italic; } .highlight .string { color: #090; } .highlight .number { color: #06c; } .highlight .operator { color: #9a6e3a; font-weight: bold; } 這個樣式表使用了一個.highlight類，用于圍繞代碼段。在.highlight類里面，通過選擇器分別對關(guān)鍵字、注釋、字符串、數(shù)字以及操作符進(jìn)行樣式定義。 現(xiàn)在，我們就可以通過CSS樣式來實(shí)現(xiàn)更具視覺效果的代碼展示功能。這不僅能夠讓代碼更加美觀易讀，還可以提高代碼片段的易學(xué)習(xí)性和易理解性。