Help:CSS

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

CSS的适用范围

内联

CSS可以作为元素的属性，内链为特定元素的样式。这些样式不会影响其他元素。维基文本支持一些HTML元素，自然也可以使用内联样式。这里举个简单的例子，以下的维基文本代码：

<span style="color: red">红色</span>、<span style="color: green">绿色</span>的文字以及<span style="background: cyan">青色底纹</span>。

可以得到以下内容：

红色、绿色的文字以及青色底纹。

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

CSS页面

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

例如，如果应用以下的CSS代码：

.important-text {
    background-color: yellow;
    color: red;
}

那么，所有带有important-text类的元素都会显示为红色文字加上黄色背景，就像这样。

本站能使用的CSS页面主要包括以下几类：

• MediaWiki:Common.css：会应用于本站的所有页面（除了Special:用户登录等极少数特殊页面）。注意：如果安装了MobileFrontend扩展，那么这些CSS不会在手机版视图生效，不过滚动的天空Wiki未启用此扩展）。
• MediaWiki:Vector.css、MediaWiki:Timeless.css等：只会在特定的皮肤（Vector皮肤、Timeless皮肤）的界面生效。目前本站的默认皮肤是Timeless（参见Special:Version）。
• MediaWiki:Gadget-小工具名称.css：当用户启用了某个小工具时生效（小工具可以在Special:参数设置#mw-prefsection-gadgets中启用，参见Help:小工具）。例如，如果用户启用了“段落首行空两格。讨论页除外。此外，class=hantsect的内容也可以首行空两格。”这个小工具，那么MediaWiki:Gadget-hantsect.css就会生效。
• User:我的用户名/common.css：您的个人CSS，仅对您自己生效。您也可以在Special:参数设置#mw-prefsection-editing中找到它。
• User:我的用户名/timeless.css等：您的个人CSS，仅对Timeless皮肤生效，以此类推可将Timeless替换为其他皮肤。

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

页面内的内联样式

除了编辑专门的样式表页面之外，你也可以通过{{#css:}}来为特定的页面应用样式。例如：

{{#css:
.css-test-text {color: magenta}
.css-test-text:hover {color: green}
}}

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

模板样式

主条目：Help:模板样式

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

参考资料

• MDN上的CSS教程