Help:CSS

来自滚动的天空Wiki

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.cssMediaWiki:Gadget-navbox.css。这些页面存储了CSS格式的内容。每个CSS页面都会定义了哪些元素应用什么规则,不一定指定特定的元素。

例如,如果应用以下的CSS代码:

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

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

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

需要注意:您的个人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。

参考资料[编辑源代码]

跳舞的线Wiki