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.

 

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连接:

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
   高亮的情况

文档标签和贡献者

标签: 
 此页面的贡献者: jigs12, ziyunfei, Mhoudg
 最后编辑者: jigs12,