原始碼中所有的換行、空格、TAB,在 HTML 的解析中都只當作為一個空格,除非使用 <pre> 標籤,才能夠將原始碼中的換行、空格、TAB 等得以保留。

此乃放置原始碼的方框,其中的原始碼為套用至本方框所用 <pre> 標籤之 CSS 原始碼。方框顏色參考英文維基百科中放置 CSS 原始碼之方框的顏色。

pre {
margin: 0;
padding: 1em;
border: 1px dashed #2f6fab;
background-color: #f9f9f9;
color: black;
line-height: 1.4em;
font-family: verdana, helvetica, sans-serif;
}


margin: 0
取消 <pre> 上邊和下邊留有的 margin。偶通常是在原始碼說明的下方緊貼原始碼方框,有時會在原始碼方框下方緊跟一段簡短補充。原始碼方框下方需要留空白的話就使用一個 <br />。

padding: 1em
<pre> 預設沒有 padding,原始碼內容會緊貼著方框的 border。為了美觀,令原始碼內容同方框各邊 border 之間留有一定的距離,在這邊偶指定為留有 1em 的 padding。

border: 1px dashed #2f6fab
指定四個邊的 border 以將原始碼內容同文章內文隔開,border 寬度使用 1px 即一個像素即可;dashed 表示 border 為虛線;#2f6fab 指定 border 顏色為 #2f6fab

background-color: #f9f9f9
指定原始碼方框的背景顏色為 #f9f9f9

color: black
如果網頁的預設文字顏色不是黑色,就需要特別指定原始碼方框中原始碼的文字顏色為黑色,因為黑色同原始碼方框的背景顏色搭配,其他顏色不一定搭配。

line-height: 1.4em
指定原始碼方框中原始碼相鄰兩行之間的距離,距離過大或過小看上去都不美觀。可以先不指定 line-height 看預設效果如何,不滿意再加以調整。

font-family: verdana, helvetica, sans-serif
指定原始碼方框中原始碼的文字使用英文字型,因為原始碼基本上沒有中文,網頁預設的中文字型顯示英文的效果不及英文字型。原始碼中的中文會自動使用中文字型。一次多指定幾個常用不錯看的英文字型,優先使用所指定字型中的第一個。若訪客的作業系統中沒有第一個字型,則會使用第二個,依此類推;若這些字型都沒有則會使用訪客於瀏覽器中指定的預設字型。

創作者介紹

呆丸北拜已搬家至 Blogger

呆丸北拜 發表在 痞客邦 留言(0) 人氣()