查看“Help:CSS”的源代码

{{NoteTA|G1=MediaWiki}}
'''CSS'''（层叠样式表，{{lang|en|Cascading Style Sheets}}）是一种用来描述文档呈现方式的样式表语言，描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。在实际网页开发中，可以将CSS存储为单独的文件，或者以{{tag|style}}的形式嵌入在页面中，而在本站等基于MediaWiki的软件中，CSS在全局样式表、小工具、模板样式等地方使用，因此本页只涉及CSS能在站内使用的功能。

== CSS的适用范围 ==
=== 内联 ===
CSS可以作为元素的属性，内链为特定元素的样式。这些样式不会影响其他元素。维基文本支持一些HTML元素，自然也可以使用内联样式。这里举个简单的例子，以下的维基文本代码：
<pre>-{}-
<span style="color: red">红色</span>、<span style="color: green">绿色</span>的文字以及<span style="background: cyan">青色底纹</span>。
</pre>
可以得到以下内容：
: <span style="color: red">红色</span>、<span style="color: green">绿色</span>的文字以及<span style="background: cyan">青色底纹</span>。

上面的这个例子将文字中的三个部分使用{{tag|span}}标签包围起来，并通过<code>style</code>属性以应用样式。引号中的内容就是对应元素拥有的CSS样式。这是给文本应用样式的最简单方法。

=== CSS页面 ===
站内有一些以CSS结尾的页面，如[[MediaWiki:Common.css]]、[[MediaWiki:Gadget-navbox.css]]。这些页面存储了CSS格式的内容。每个CSS页面都会定义了哪些元素应用什么规则，不一定指定特定的元素。

例如，如果应用以下的CSS代码：
<syntaxhighlight lang=css>
.important-text {
    background-color: yellow;
    color: red;
}
</syntaxhighlight>
那么，所有带有<code>important-text</code>类的元素都会显示为红色文字加上黄色背景，<span style="background-color: yellow; color: red">就像这样</span>。

本站能使用的CSS页面主要包括以下几类：
* [[MediaWiki:Common.css]]：会应用于本站的所有页面（除了[[Special:用户登录]]等极少数特殊页面）。注意：如果安装了MobileFrontend扩展，那么这些CSS不会在手机版视图生效，不过滚动的天空Wiki未启用此扩展）。
* [[MediaWiki:Vector.css]]、[[MediaWiki:Timeless.css]]等：只会在特定的皮肤（Vector皮肤、Timeless皮肤）的界面生效。目前本站的默认皮肤是Timeless（参见[[Special:Version]]）。
* MediaWiki:Gadget-''小工具名称''.css：当用户启用了某个小工具时生效（小工具可以在[[{{#special:Preferences}}#mw-prefsection-gadgets]]中启用，参见[[Help:小工具]]）。例如，如果用户启用了“{{int:Gadget-hantsect}}”这个小工具，那么[[MediaWiki:Gadget-hantsect.css]]就会生效。
* [[Special:MyPage/common.css|User:我的用户名/common.css]]：您的个人CSS，仅对您自己生效。您也可以在[[{{#special:preferences}}#mw-prefsection-editing]]中找到它。
* [[Special:MyPage/timeless.css|User:我的用户名/timeless.css]]等：您的个人CSS，仅对Timeless皮肤生效，以此类推可将<code>Timeless</code>替换为其他皮肤。

需要注意：您的个人CSS仅自己或者管理员可编辑，且公开可见。除此之外，您也可以安装浏览器扩展（如Stylus）以在本地应用自定义的CSS样式规则。

=== 页面内的内联样式 ===
除了编辑专门的样式表页面之外，你也可以通过{{tlx|#css:}}来为特定的页面应用样式。例如：
<pre>-{}-
{{#css:
.css-test-text {color: magenta}
.css-test-text:hover {color: green}
}}</pre>
{{#css:
.css-test-text {color: magenta}
.css-test-text:hover {color: green}
}}

在页面内加入这一段代码之后，就会使得所有拥有<code>css-test-text</code>类的元素，文字显示为品红色，如果鼠标悬浮则显示为绿色，就像{{tag|span|highlight=1|params=class="css-test-text"|这样}}<span class="css-test-text">这样</span>。需要注意的是，如果您在[[Special:参数设置|参数设置]]中开启了“在不重新加载页面的情况下显示预览”，则此CSS在预览时不会生效，需要提交编辑后才能看到效果。

=== 模板样式 ===
{{main|Help:模板样式}}
你可以在模板[[Help:命名空间|命名空间]]内创建以<code>.css</code>结尾的子页面，这个页面的[[Help:内容模型|内容模型]]将会是“已过滤的CSS”。然后，使用{{tag|templatestyles|s|highlight=1|params=src="页面名称（若位于模板命名空间可省略命名空间前缀，若为主命名空间则必须加上半角冒号前缀）"}}即可为当前页面应用这个CSS。

== 参考资料 ==
* -{zh-hans:[https://developer.mozilla.org/zh-CN/docs/Web/CSS -{P|MDN上的CSS教程}-];zh-hant:[https://developer.mozilla.org/zh-TW/docs/Web/CSS -{P|MDN上的CSS教程}-]}-

{{帮助页面}}
[[Category:帮助页面]]