--- title: MDN样式指南 slug: MDN/Guidelines/CSS_style_guide translation_of: MDN/Guidelines/CSS_style_guide ---

MDN有许多内置的全局样式，可以在设置文章样式和布局文章时使用，本文是可用类以及何时使用它们的指南。其中一些样式可以通过MDN编辑器的工具栏访问。在这种情况下，我们将在样式标题下包含短语“编辑工具栏”，以及相关工具栏按钮的图像。

请注意，这些样式的开发是为了涵盖在设置文章内容样式时出现的最常见情况，并且只要可能，您就应该尝试使用可用的类；与标准内容的外观相差太大不利于一致性和可读性。如果你觉得你的页面绝对需要某种特殊的定制样式，你应该首先在MDN讨论论坛中提出这个主题。

注意：如果要搜索MDN上使用给定类的位置，可以使用表单的URL执行此操作

https://developer.mozilla.org/en-US/search?locale=en-US&css_classnames=desired-css-class. 例如，要查找使用卡片网格布局的页面，请尝试URL/zh-CN/search?locale=*&css_classnames=card-grid.

重要提示: 本指南不完整。有关如何帮助我们完成此指南的信息，请参阅“更新此指南”。

内联样式

本节列出MDN上样式内容块可用的内联样式。

`.button`

MDN提供任何button样式。通常用于设置链接样式（出于安全原因，HTMLElement（“button”）元素从文章源代码中剥离。）

下载源代码

Example syntax

<a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Download source code</a>

`.external-icon` and `.ignore-external`

指向MDN外部内容的链接会自动设置格式，以便将类外部图标添加到这些链接中，从而创建一个图标，指示它们离开站点。但是，在某些情况下，此图标是不需要的，并且会干扰其他样式。可以通过将忽略外部类添加到链接中来删除它。

注意: 大多数时候，我们不想用这些。外部图标将自动添加，以帮助防止用户在不知不觉中离开MDN。唯一通常可以接受的用例是指向特定于MDN的域或子域的链接，例如我们用于示例代码或其他服务的那些域或子域。

Link to MDN
Link away from MDN
Link away from MDN with ignore-external

Example syntax

<a href="/">Link to MDN</a>
<a href="http://wikipedia.org">Link away from MDN</a>
<a href="http://wikipedia.org" class="ignore-external">Link away from MDN with <code>ignore-external</code></a>

`.glossaryLink`

这是一个类，用于设置词汇表链接的样式，以使它们在页面上不那么显眼。这个类是使用KumaScript宏添加的，如常用宏中所述，因此不会手动插入。

Example macro syntax

\{{Glossary("HTML")}}

`.hidden`

允许您隐藏wiki文章中的内容，但可以在编辑器中查看。通常，这用于向创建实时代码示例的脚本提供HTML、CSS和JavaScript，而只向读者显示相关语言。

Example syntax

<h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html;">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<h5 id="CSS">CSS</h5>

<pre class="brush: css;">
button {
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript_Content">JavaScript Content</h5>

<pre class="brush: js;">
document.getElementById("test").addEventListener("click", works);
function works() {
    window.alert("you clicked it!");
}
</pre>

<p>\{{EmbedLiveSample("Hidden_Code_Sample")}}</p>

Hidden code Sample

HTML

<button id="test">Click Me</button>

CSS

button{
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}

JavaScript

document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}

`.seoSummary`

这是一个对页面内容没有可见影响的类，但是，如果该类应用于元素（通常是span），KumaScript将使用元素的内容创建描述meta标记。它们提供了一个简短的描述，可用于搜索引擎和分享网站，如Facebook和Twitter。这个类可以通过MDN编辑器WYSIWYG样式下拉列表中的“SEO摘要”选项获得。

Note: If .seoSummary is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.

The final page display won't show any styling change, but in the editor the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:

The below examples are taken from the Mozilla Add-ons page.

Example syntax

<p>
  <span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey, and Thunderbird.</span>
  There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.
</p>

Example of the generated {{HTMLElement("meta")}} elements

<meta property="og:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="twitter:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">

Example of how Facebook uses it

SEOSummary as it is used by Facebook

注意: 这与“.summary”类不同，后者创建了一个特殊的“关于此页”样式的模糊框。该类不设置搜索引擎使用的SEO摘要或MDN用于生成工具提示和自动生成列出子页面的菜单的宏。

块级样式

本节列出MDN上样式内容块可用的块级样式。

`.callout-box`

允许您创建一个右浮动框，用于包含要突出显示的标注或相关信息。这是一个示例内容

Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.

Example syntax

<div class="callout-box">
  <p>This is an exciting callout</p>
</div>
<p>Example content to float around</p>
<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

`.card-grid`

允许您将多张卡片相邻放置，以调出特定内容或映射出多步行动要求。卡片在可用的水平空间中均匀分布；大约2-3张效果最好。

CSS Reference
An exhaustive reference for seasoned Web developers describing every property and concept of CSS.
CSS Tutorial
A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.
CSS3 Demos
A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

Example syntax

<ul class="card-grid">
  <li>My card content</li>
  <li>My second card content</li>
  <li>My third card content</li>
</ul>

`.column-container`

表示特定宽度列的容器。通常与其他类一起使用，如下所示。

My first equal width column.

My second equal width column.

My third equal width column.

Example syntax

<div class="column-container">
  <div class="column-4">
    <p>My first equal width column.</p>
  </div>
  <div class="column-4">
    <p>My second equal width column.</p>
  </div>
  <div class="column-4">
    <p>My third equal width column.</p>
  </div>
</div>

`.column-1`, `.column-2`, `.column-3` ... all the way up to `.column-11`

指定要由.column container包含的特定宽度的列，即列容器宽度（基于12列网格布局）的一定数量的二分之一。每对列之间都留有一个檐沟。

1/12

11/12

5/12

7/12

6/12

4/12

2/12

Example syntax

<div class="column-container">
  <div class="column-1" style="background-color: yellow;">1/12</div>
  <div class="column-11" style="background-color: lime;">11/12</div>
</div>

<div class="column-container">
  <div class="column-5" style="background-color: yellow;">5/12</div>
  <div class="column-7" style="background-color: lime;">7/12</div>
</div>

<div class="column-container">
  <div class="column-6" style="background-color: yellow;">6/12</div>
  <div class="column-4" style="background-color: lime;">4/12</div>
  <div class="column-2" style="background-color: pink;">2/12</div>
</div>

`.column-quarter`, `.column-third`, `.column-half`

指定要由.column container包含的特定宽度的列，该列是列容器宽度的特定部分。每对列之间都留有一条边沟。

Half

Third

Quarter

These classes are equivalents of commonly-used numerical width classes, as follows:

.column-quarter — equivalent to .column-3
.column-third — equivalent to .column-4
.column-half — equivalent to .column-6

Example syntax

<div class="column-container">
  <div class="column-half" style="background-color: yellow;">Half</div>
  <div class="column-half" style="background-color: lime;">Half</div>
</div>

<div class="column-container">
  <div class="column-third" style="background-color: yellow;">Third</div>
  <div class="column-third" style="background-color: lime;">Third</div>
  <div class="column-third" style="background-color: pink;">Third</div>
</div>
<div class="column-container">
  <div class="column-quarter" style="background-color: yellow;">Quarter</div>
  <div class="column-quarter" style="background-color: lime;">Quarter</div>
  <div class="column-quarter" style="background-color: pink;">Quarter</div>
  <div class="column-quarter" style="background-color: cyan;">Quarter</div>
</div>

`<details>`

可以包装在一个内容块周围以隐藏该内容，而不是显示一个“详细信息”链接，单击该链接可展开/折叠其中包含的内容。您可以在本文中看到它的用法。

Example syntax

This is an example syntax section for {{HTMLElement("details")}} that was hidden with {{HTMLElement("details")}}. Ooooooh, how meta.

<details>
<h4>Example syntax</h4>
<p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p>
</details>

`.example-bad` and `.example-good`

可以使用.example Good和.example bad类突出显示好的和坏的示例。它们通常用于表示示例代码段的<pre>块，但也可以用于其他块。

Good code example

<label for="test">Form label:</label>
<input type="text" id="test">

Bad code example

<input type="text">

You should always use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)

Example syntax

<h5 id="Good_code_example">Good code example</h5>

<pre class="brush: html example-good">
  &lt;label for="test"&gt;Form label:&lt;/label&gt;
  &lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad">
  &lt;input type="text"&gt;
</pre>

`.moreinfo`

这个类最初被设计为提供一个链接列表以供进一步阅读，但它可以用于任何远离当前页面的信息。

基于JavaScript知识构建的工具

JavaScript frameworks: Developed by Google Angular.js is one of the best known frameworks.; Ember.js is open source and community driven.
JavaScript Compilers: Babel lets you write ES2015 and compiles to more backwards compatible code.

Example syntax

<div class="moreinfo">
  <!-- content goes here -->
</div>

`.blockIndicator.note`

将内容的一部分转换为便签框，这通常是一个有用的便签，与当前主题相切，但不直接适合信息流。

注意: 这就是我们通常在MDN文章中呈现注释的方式。

This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<div class="blockIndicator note" role="complementary">
  <p><strong>Note</strong>: This is how we usually present a note in an MDN article.</p>
</div>

`.pull-aside`

将内容拉到一边。

有些内容会偏离主题。

有些内容不太靠边站。

Example Syntax

<div class="pull-right">Some content that goes off to the side.</div>
<p>Some content that does not go off to the side.</p>

Other uses

Combined with the .moreinfo class.

Some content that does not go off to the side.

<div class="pull-aside"><div class="moreinfo">Some content that goes off to the side.</div></div>
<p>Some content that does not go off to the side.</p>
<p>Some content that does not go off to the side.</p>

`.summary` {{Obsolete_Inline}}

为页面创建摘要框，在视觉上显示为带有额外填充的灰色框-应用于文章的开头段落（但不用于参考文章），以使其在页面上具有额外的重要性。

重要提示: 这与anch“.seoSummary”类不同，该类建立文本部分，搜索引擎使用该文本部分在结果列表中汇总页面，MDN使用该文本部分创建页面标题及其摘要的工具提示和菜单。这门课完全是一种视觉效果。如果希望同时使用这两个类，可以为页面建立可见和有效的摘要。

这是本文的开头。下面我们将讨论 puppies, giraffes, 和 dugongs.

This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<p class="summary">This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.</p>

`.topicpage-table`

创建用粗灰色边框分隔的两列。常用于登录页。这通常最适合嵌套（“div”）。注意，这两个子元素必须被赋予.section类。

Column 1

Column 2

Example syntax

<div class="topicpage-table">
  <div class="section">Column 1</div>
  <div class="section">Column 2</div>
</div>

`.threecolumns`

使内容块显示在三个等宽列中。

Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.

This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.

Note: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.

Example syntax

<div class="threecolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

`.twocolumns`

使内容块显示在两个等宽列中。

This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<div class="twocolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

`.blockIndicator.warning`

将内容的一部分转换为警告框，警告框通常传达读者需要非常小心的一个重要事实（例如，他们需要做一些事情，或避免一些事情来避免严重问题）

Warning: Here be dragons!

This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<div class="blockIndicator warning">
  <p><strong>Warning</strong>:Here be dragons!</p>
</div>

表格样式

MDN为HTML“table”元素提供了特定的样式。这一节包括这些。

没有添加类：

Favorite teas, December 2015
Variety	Caffeine	Steeping Time	Water Temperature
Black	High	2-3 minutes	99 °C
Green	Low to Medium	1-2 minutes	75 to 80 °C
Caffeine free
Herbal	None	3-6 minutes	99 °C

`.standard-table`

Favorite teas, December 2015
Variety	Caffeine	Steeping Time	Water Temperature
Black	High	2-3 minutes	99 °C
Green	Low to Medium	1-2 minutes	75 to 80 °C
Caffeine free
Herbal	None	3-6 minutes	99 °C

A standard table can be created using the Table button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers ({{HTMLElement("th")}}), and a visible {{HTMLElement("caption")}} and {{HTMLAttrxRef("summary", "table")}} attribute to provide more information for screenreaders, if desired.

A diagram showing the Table button in the MDN edit interface, which has a picture of a table on it, and the dialog box that it brings up, which has options on it to set row number, column number, which cells are headings, and more.

Style notes

Note the different styling applied to the headers ({{HTMLElement("th")}}), and the fact that they have {{HTMLAttrxRef("scope", "th")}} attributes applied for accessibility purposes.
By default, alternating rows have zebra stripes applied, but these can be removed by adding the .no-stripe class to them.
You can force a table to span the full width of the content area (or other immediate containing box, if it is not the content area) by adding the .fullwidth class to the {{HTMLElement("table")}} element.

Example syntax

<table class="standard-table" summary="This table details what tea we liked to drink back in the heady month of December 2015">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
 </tbody>
</table>

`.standard-table.nostripe`

Favorite teas, December 2015
Variety	Caffeine	Steeping Time	Water Temperature
Black	High	2-3 minutes	99 °C
Green	Low to Medium	1-2 minutes	75 to 80 °C
Caffeine free
Herbal	None	3-6 minutes	99 °C

`.standard-table.fullwidth`

Favorite teas, December 2015
Variety	Caffeine	Steeping Time	Water Temperature
Black	High	2-3 minutes	99 °C
Green	Low to Medium	1-2 minutes	75 to 80 °C
Caffeine free
Herbal	None	3-6 minutes	99 °C

`.fullwidth-table`

Favorite teas, December 2015
Variety	Caffeine	Steeping Time	Water Temperature
Black	High	2-3 minutes	99 °C
Green	Low to Medium	1-2 minutes	75 to 80 °C
Caffeine free
Herbal	None	3-6 minutes	99 °C

更新本指南

本指南不完整，正在逐步更新。如果您想帮助更新或添加到本指南中，请随时更新或添加！如果您有问题或想讨论并提出改进本文的想法，或者对我们如何改进MDN Web文档的样式或布局有建议，您可以有以下几种选择：

如果你想帮助完成它，或者想报告一个丢失或错误的文档样式，请联系Chris Mills（以chrisdavidmills的身份发言，在Mozil Mozilla IRC as chrismills)

开始讨论MDN Web文档讨论论坛 forum: 如果您有什么想法想与MDN Web Docs社区或工作人员讨论，请随时在Mozilla讨论站点的MDN Web Docs论坛上开始一个主题。
在GitHub中提交您的建议: 如果您想在我们的官方问题跟踪系统中记录您的建议，我们鼓励您这样做。先用上面的一个频道讨论是个好主意，但这不是必需的。
在IRC频道提问: 我们的写作人员和贡献者社区使用 Mozilla's IRC 服务器进行讨论和分享想法。欢迎您加入我们，提出您的问题或建议！（请注意，IRC的参与度很低，可能会在2020年停办；对话是获得答案的最佳选择。）

内联样式

.button

Example syntax

.external-icon and .ignore-external

Example syntax

.glossaryLink

Example macro syntax

.hidden

Example syntax

Hidden code Sample

HTML

CSS

JavaScript

.seoSummary

Example syntax

Example of the generated {{HTMLElement("meta")}} elements

Example of how Facebook uses it

块级样式

.callout-box

Example syntax

.card-grid

Example syntax

.column-container

Example syntax

.column-1, .column-2, .column-3 ... all the way up to .column-11

Example syntax

.column-quarter, .column-third, .column-half

Example syntax

<details>

Example syntax

.example-bad and .example-good

Good code example

Bad code example

Example syntax

.moreinfo

基于JavaScript知识构建的工具

Example syntax

.blockIndicator.note

.pull-aside

Example Syntax

Other uses

.summary {{Obsolete_Inline}}

Example syntax

.topicpage-table

Example syntax

.threecolumns

Example syntax

.twocolumns

Example syntax

.blockIndicator.warning

Example syntax

表格样式

.standard-table

Style notes

Example syntax

.standard-table.nostripe

.standard-table.fullwidth

.fullwidth-table

更新本指南

`.button`

`.external-icon` and `.ignore-external`

`.glossaryLink`

`.hidden`

`.seoSummary`

`.callout-box`

`.card-grid`

`.column-container`

`.column-1`, `.column-2`, `.column-3` ... all the way up to `.column-11`

`.column-quarter`, `.column-third`, `.column-half`

`<details>`

`.example-bad` and `.example-good`

`.moreinfo`

`.blockIndicator.note`

`.pull-aside`

`.summary` {{Obsolete_Inline}}

`.topicpage-table`

`.threecolumns`

`.twocolumns`

`.blockIndicator.warning`

`.standard-table`

`.standard-table.nostripe`

`.standard-table.fullwidth`

`.fullwidth-table`