path: root/files/zh-cn/archive/meta_docs/custom_classes/index.html

---
title: 'Project:自定义_CSS_类'
slug: Archive/Meta_docs/Custom_classes
tags:
  - 所有分类
translation_of: Archive/Meta_docs/Custom_classes
---
<p></p><div class="standardSidebar">
	<div><a href="/Help:cn/%E7%9B%AE%E5%BD%95" style="font-size: large;">帮助目录</a></div>

	<dl>
        <dt>指导</dt>
		<dd>
			<ul style="padding: 0;">
				<li><a href="/zh-CN/docs/Project:%E7%8E%B0%E5%9C%A8%E5%B0%B1%E5%BC%80%E5%A7%8B">现在就开始</a></li>
				<li><a href="/zh-CN/docs/Project:%E7%BC%96%E8%80%85%E5%90%91%E5%AF%BC">编者向导</a></li>
				<li><a href="/zh-CN/docs/Project:%E9%A1%B5%E9%9D%A2%E5%91%BD%E5%90%8D%E6%8C%87%E5%8D%97">页面命名指南</a></li>
				<li><a href="/zh-CN/docs/Project:%E6%B6%88%E6%AD%A7%E4%B9%89">消歧义页</a></li>
				<li><a href="/zh-CN/docs/Project:%E6%9C%AC%E5%9C%B0%E5%8C%96%E9%A1%B9%E7%9B%AE">开始一项新的mdc本地化项目</a></li>
				<li><a href="/zh-CN/docs/Project:%E7%89%88%E6%9D%83">版权和许可</a></li>
			</ul>
		</dd>

		<dt>参考</dt>
		<dd>
			<ul style="padding: 0;">
				<li><a href="/zh-CN/docs/Project:Wiki%E6%A0%87%E8%AE%B0%E8%AF%AD%E6%B3%95%E5%8F%82%E8%80%83">维基语法参考</a></li>
				<li><a href="/zh-CN/docs/Project:%E8%87%AA%E5%AE%9A%E4%B9%89_CSS_%E7%B1%BB">自定义 CSS 类</a></li>
				<li><a href="/zh-CN/docs/Project:%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF">自定义模板</a></li>
				<li><a href="/zh-CN/docs/Project:MediaWiki_%E6%89%A9%E5%B1%95">MediaWiki 扩展</a></li>
				<li><a href="/zh-CN/docs/Project:%E5%A4%96%E9%83%A8%E9%87%8D%E5%AE%9A%E5%90%91">外部重定向</a></li>
				<li><a href="/zh-CN/docs/Project:%E9%9C%80%E8%A6%81%E9%87%8D%E5%AE%9A%E5%90%91">需要重定向</a></li>
			</ul>
		</dd>

    	<dt>列表</dt>
		<dd>
			<ul style="padding: 0;">
				<li><a href="/zh-CN/docs/Project:%E6%96%87%E6%A1%A3%E8%AF%B7%E6%B1%82%E5%88%97%E8%A1%A8">文档请求列表</a></li>
				<li><a href="/zh-CN/docs/Project:To_Do_List">Editing/review to do list</a></li>
				<li><a href="/zh-CN/docs/Project:%E5%B7%B2%E6%9C%89%E5%86%85%E5%AE%B9">合并列表</a></li>
			</ul>
		</dd>
    </dl>

</div><p></p>

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

<h3 id=".E5.AE.9A.E4.B9.89_CSS_.E7.B1.BB" name=".E5.AE.9A.E4.B9.89_CSS_.E7.B1.BB">定义 CSS 类</h3>

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

<h3 id=".E4.BE.8B.E5.AD.90" name=".E4.BE.8B.E5.AD.90">例子</h3>

<h4 id=".E9.AB.98.E4.BA.AE.E7.9A.84.E4.BB.A3.E7.A0.81" name=".E9.AB.98.E4.BA.AE.E7.9A.84.E4.BB.A3.E7.A0.81">高亮的代码</h4>

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

<pre>&lt;span class="highlightred"&gt;这样不会有效&lt;/span&gt;
</pre>

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

<pre class="eval">here is an example of
   a <span class="highlightred">codeblock</span> with a blank line
</pre>

<pre class="eval">   that is not <span class="highlightblue">indented</span>.
</pre>

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

<pre class="eval">here is an example of
   a <span class="highlightred">codeblock</span> with a blank line

   that is <span class="highlightblue">indented</span>.
</pre>

<h4 id="Breadcrumbs" name="Breadcrumbs">Breadcrumbs</h4>

<p> </p>

<ul>
 <li>例子请参见 <a href="cn/Core_JavaScript_1.5_Reference/About">Core JavaScript 1.5 Reference:About</a> 。</li>
</ul>

<h4 id="table.standard-table" name="table.standard-table">table.standard-table</h4>

<table class="standard-table">
 <tbody>
  <tr>
   <th>表标题 1</th>
   <th>表标题 2</th>
  </tr>
  <tr>
   <td>这里是一个例子:</td>
   <td><code>table.standard-table</code></td>
  </tr>
 </tbody>
</table>

<h4 id="table.fullwidth-table" name="table.fullwidth-table">table.fullwidth-table</h4>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>表标题 1</th>
   <th>表标题 2</th>
  </tr>
  <tr>
   <td>这是一个例子:</td>
   <td><code>table.fullwidth-table</code></td>
  </tr>
 </tbody>
</table>

<h4 id="Divs" name="Divs">Divs</h4>

<h5 id="Tips" name="Tips">Tips</h5>

<p>使用 <code>div class="note"</code> 格式化 tip:</p>

<div class="note">这是一个 tip</div>

<h5 id="Bugs" name="Bugs">Bugs</h5>

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

<div class="bug"><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=176320">Bug 176320: Minimal innerWidth/innerHeight values for popup windows</a></div>

<h5 id="Warnings" name="Warnings">Warnings</h5>

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

<div class="warning">这是一个 warning.</div>

<h5 id="Notes" name="Notes">Notes</h5>

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

<div class="side-note-left">这是个左边的 note。</div>

<p>分别演示side-note-levt和side-note-right</p>

<div class="side-note-right">这是个右边的 note。</div>

<p> </p>

<h5 id=".E9.AB.98.E4.BA.AE.E6.AE.B5.E8.90.BD" name=".E9.AB.98.E4.BA.AE.E6.AE.B5.E8.90.BD">高亮段落</h5>

<p><code>div class="highlight"</code> 的例子:</p>

<div class="highlight">
<p>这是一个段落 CSS 高亮的例子。通过这个方法可以让你的代码引起注意。最初，这个功能是在 <a href="cn/XUL_Tutorial">XUL Tutorial</a> 中添加进来的。</p>

<pre>这段例子
   演示了使用
   div
   高亮的情况
</pre>
</div>

<p></p>