在Blogger中添加CSS樣式

在Blogger中添加可以應用在所有文章內容的CSS樣式。以在其他部落格中常見的code block為例， 便於我們在張貼程式碼能時有特別的樣式highlight出來。

首先，進入Blogger的控制面板。並點選左列的「主題」，接者點選「自訂」按鈕。

接著會進入到Blogger主題設計工具的頁面。點選最左列的「進階」，接著點選「新增CSS」。 在「新增自訂CSS」中就能添加自己的CSS了！


將下面的CSS樣式輸入進去，並點選「套用至網誌」，再把要套入樣式的HTML標籤加上class='code_seg'， 就能獲得跟下面樣式一樣的效果。

.code_seg {
    display: block;
    font-family: Courier New;
    font-size: 8pt;
    overflow: auto;
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 15px;
    max-height: 200px;
    line-height: 1.2em;
}

display: block
每個HTML的element都會有個預設的display屬性。例如：
div、p、form等的預設display為block，block的特性是會讓其內容在新的一行開始顯示，並盡可能把容器撐滿。 a、span、img等為inline，inline的element會連在一起，不會換行。

font-family: Courier New
字型設為Courier New

font-size: 8pt
字型大小設為8pt

overflow: auto
若文字超過block則自動產生捲軸

background: #f0f0f0
背景顏色設為#f0f0f0

border: 1px solid #ccc
邊框的寬度1px、樣式solid及顏色#ccc。

padding: 10px 10px 10px 15px
邊框內的內距，padding-top 10px、padding-right 10px、padding-bottom 10px及padding-left 10px。

max-height: 200px
element的最大高度200px。

line-height: 1.2em
行間距為1.2em