自訂 CSS 類別

以下是 MDC Wiki 上自行定義的樣式類別,若你也想新增類別,請聯絡 Dria

現有 CSS 類別

樣式 使用結果
div.tip 顯示網頁內容中的小技巧文字。
div.bug 顯示網頁內容中的程式錯誤文字。
.float-left 製作向左浮動的元素(通常是圖片)。
.float-right 製作向右浮動的元素(通常是圖片)。
.figure 這個樣式目前還沒有實際作用,是為日後使用準備的。
.standard-table 標準的表格樣式。
.standard-table td.header 標準表格的標題樣式。
.fullwidth-table 寬度設定為 100% 的表格(就像現在這個表格一樣)。
.fullwidth-table td.header 寬度設為 100% 之表格的標題樣式。
div.breadcrumbs 頁面導覽的樣式。
div.breadcrumbs a.breadcrumbs 頁面導覽字串中連結部分的樣式。
div.breadcrumbs span.breadcrumbs 頁面導覽字串中目前頁面標題的樣式。
div.side-note-left div.side-note-right 用以建立文章內的邊欄。此區域之寬度將佔其母元素(通常就是文件本體)的 50%。若要建立邊欄請使用這個樣式,以確保內容顯示上容易閱讀。
div.highlight 在區段左側放上 3 個像素寬的藍色邊框。/td>
.highlightred 將文字改以紅色顯示。
.highlightblue 將文字改以藍色顯示。
.highlightgreen 將文字改以綠色顯示。

範例

標示部分程式碼

通常我們會讓程式碼以特別的區塊顯示,這可以利用 span 搭配 MediaWiki 系統「行前空一格就自動縮排」的功能。須注意的是在 <pre> 區段中不能用 span 元素,因為此時 MediaWiki 會直接把 span 元素當成要顯示的內容而輸出。

<span class="highlightred">這樣是沒用的</span>

這種狀況下就應該將程式碼縮排,然後在其中使用 span 元素。如果程式中有空白行,該行也必須縮排,否則系統會認為空白行的前後為分開的兩個區段。

像這樣,
   程式碼的空白行並沒有縮排,
   所以就顯示成兩個區段了。

顯然這樣跟我們想要的有所差異,所以你應該這麼做:

像這樣,
   空白行前也加了個空白字元以示縮排,

   這樣系統就將其顯示為同一個區段。

導覽

 

table.standard-table

<tr> <td>此為</td> <td>table.standard-table</td> <td>的範例</td> </tr> </table>

table.fullwidth-table

表格標題 1</td>

<th>表格標題 2</td> <th>表格標題 3</td>

<tr> <td>此為</td> <td>table.fullwidth-table</td> <td>的範例</td> </tr> </table>

DIV 區段

小技巧

小技巧區段以 div class="tip" 標示,例如:

這就是個小技巧
程式錯誤

已知的程式錯誤可用 div class="bug" 標示參照,內含 bugzilla 上的對應資訊連結,例如:

警告

請使用 div class="warning" 來標示文件中的警告文字,很快我們會為此樣式加上圖示等特殊效果。

此段為警告文字
注釋

請使用 div class="note" 來標示文件中的注釋文字。

這是注釋,雖然沒什麼意思但還是個注釋。
標示區段

以下為 div class="highlight" 的範例:

此為以 CSS 標示區段的範例,您可用這個方法讓某個程式碼區段更加顯眼。這個樣式最先是為 XUL 教學而加進 MDC 的。

而這是
   標示之區段中
   文字預先格式化的
      範例
表格標題 1</td>

<th>表格標題 2</td> <th>表格標題 3</td>

Document Tags and Contributors

標籤: 
最近更新: irvinfly,