幫blogger加上了一個新功能，讓文章內文有程式碼時具有背景，以增進閱讀，順便復習一下 CSS 的 tag、Class、ID 易混淆的用法...
<code> : 設定 code tag，這個主要是用來寫部落格文章時，對程式碼加上背景增進閱讀
CSS:code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow: auto;
background: #ccc url(http://chiulin.wei.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height: 200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
width: 90%;
}
HTML:<code> 程式碼內容 程式碼內容 程式碼內容 </code>
<code.cmd> : 除了<code>的一般性使用，如果想將command下的程式指令用不同背景，加了下面的 CSS ，讓文章撰寫時更多元呈現~
CSS:code.cmd {
font-size: 10pt;
color: #ccc;
background: #000 url(http://chiulin.wei.googlepages.com/BG_CMD.gif) left top repeat-y;
}
HTML:<code class="cmd"> 程式碼內容 程式碼內容 程式碼內容 </code>
巢狀CSS，specify properties to selectors within other selectors:
CSS:#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
HTML:<div id="top">
<h1> Chocolate curry </h1>
<p> This is my Test </p>
<p> Mmm mm mmmmm </p>
</div>
資料來源:HTML dog
留言列表
