幫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

以我為中心的宇宙 發表在 痞客邦 PIXNET 留言(0) 人氣()