Project:自定义_CSS_类

指导

参考

列表

下面的内容，将介绍如何在 Devmo wiki 中自定义 CSS 类。无论任何原因，如果您需要为本 wiki 创建自定义 CSS 类，请随时联系 Dria.

定义 CSS 类

类	结果
`div.tip`	显示 tip 文本，范围不超出一个页的 body 部分。
`div.bug`	显示 bug 文本，范围不超出一个页的 body 部分。
`.float-left`	创建一个左向流 left-float 元素(通常是图形)
`.float-right`	创建一个右向流 right-float 元素（通常是图形）
`.figure`	定义一个未使用内容，不包含任何当前风格
`.standard-table`	基础标准表（table）风格。
`.standard-table td.header`	标准表（table）的表头风格。
`.fullwidth-table`	宽度设置为 100% 的表。（就像现在你正在看的这个表）
`.fullwidth-table td.header`	宽度设为 100% 的表的表头风格。
`div.breadcrumbs`	breadcrumbs 用户导航风格
`div.breadcrumbs a.breadcrumbs`	breadcrumbs 字符串用户导航风格。
`div.breadcrumbs span.breadcrumbs`	breadcrumbs 字符串导航中的本页内部标题风格。
`div.side-note-left div.side-note-right`	用来创建一个靠单方向的文本框。它将在父级文本（通常是文档本身）中，占据一个50%宽度的文本框。建议在使用的时候，左右方向交替使用，以便提高文档的可读性。
`div.highlight`	在左侧为段落创建一个三像素宽的蓝条。
`.highlightred`	文本颜色变为红色
`.highlightblue`	文本颜色变为蓝色
`.highlightgreen`	文本颜色变为绿色

例子

高亮的代码

我们经常会希望提请读者注意某段代码。这是可能通过使用spans，还用mediawiki内建的代码格式"indent-at-least-one-space" （“缩进至少一个空格”）。请注意，在<pre>块内使用spans是没有用的，因为mediawiki分析器忽略了spans，而直接把他们作为代码的一部分输出。

<span class="highlightred">这样不会有效</span>

取代它的方法是，缩进你想要放在高亮部分的代码，并且在内部使用spans。注意，在代码中，空行也是需要缩进的。如果在空行前面没有空格，那么前一个段落将被解释器关闭，并另起一个新段落。

here is an example of
   a codeblock with a blank line

   that is not indented.

很显然，上面是一个反面例子，正确的做法应该像下面这样的：

here is an example of
   a codeblock with a blank line

   that is indented.

例子请参见 Core JavaScript 1.5 Reference:About 。

table.standard-table

表标题 1	表标题 2
这里是一个例子:	`table.standard-table`

table.fullwidth-table

表标题 1	表标题 2
这是一个例子:	`table.fullwidth-table`

Divs

Tips

使用 div class="note" 格式化 tip:

这是一个 tip

Bugs

使用 div class="bug" 引用已知的 bug，可以创建指向bugzilla的bug连接：

Bug 176320: Minimal innerWidth/innerHeight values for popup windows

Warnings

使用 div class="warning" 将一段文档做成警告高亮。最后，我们回做一些很酷的事情，并且加一些图标啊什么的。

这是一个 warning.

Notes

div class="note" (via Template:Note) 用来将一段文档标记为一段笔记。不要直接使用 div 类，最好用模板template.

这是个左边的 note。

分别演示side-note-levt和side-note-right

这是个右边的 note。

高亮段落

div class="highlight" 的例子:

这是一个段落 CSS 高亮的例子。通过这个方法可以让你的代码引起注意。最初，这个功能是在 XUL Tutorial 中添加进来的。

这段例子
   演示了使用
   div
   高亮的情况