Help:层叠样式表

(重定向自Help:CSS
层叠样式表

层叠样式表允许灵活地设置页面的格式。对于非表格内容,应尽可能使用它们而不是表格,因为如果你是像模板一样将CSS嵌入在里面,他们就可以被读者直接使用或者方便他人的修改。

CSS设置的层级

风格样式(Style)一般是可以专门为一个部分、段落、内容进行的,又或者是用元素、类和ID为CSS选择器指定样式。这是在各个不同层面上完成的

一般情况下根据下列规范来编写样式表:

注意:请参阅CSS类目录(英文)英语Catalogue of CSS classes英语Catalogue of CSS classes以获取所有已加载样式表的列表。

MediaWiki的核心样式表

请参见层叠样式表 ,通常情况下加载如下样式表:

特定界面的样式文件:

例如: monobook/main.css (通常用于电脑上), chick/main.css (通常用于移动设备)

浏览器界面的专用样式:

例如在桌面端:

全站通用的样式文件

注意:非英语的MediaWiki网站可能会使用「MediaWiki: Gadget-site.css」来代替「MediaWiki: Common.css」文件

特定页面的样式文件

通过模板样式来使用特定页面的样式文件,很多模板一般都会使用内联的样式表

比如文件上传向导就会使用自己的样式文件

用户页的样式文件

注意:在CSS规范中 用户指定样式不属于用户样式表

冲突处理

如果不同的样式文件在使用过程中存在冲突,则要根据权重来判断哪个样式文件更为重要,一般情况下用户的权重会大于作者的权重,当然还可以使用「!important」来做出声明, 如果用户和作者均「!important」则以用户为准,否则采用其默认设置(或者说编者的缺省设置),除了权重还有起源和特异性的对比来判断不同样式文件的重要程度,特定的权重势必大于通用的权重(看这个样式是针对整个页面、特定模块、特定段落或者是更小的元素,权重依次递增),具体的信息可以查看[1]

支持的元素

MediaWiki支持大多数CSS,但 "url()"等属性除外。另外在早期版本中,CSS 支持存在一些错误。

维基文本中的CSS

您可以在代码的HTML元素中使用CSS样式(参见HTML以获取MediaWiki支持的元素列表),就像在普通HTML标记中一样。

例如,一个带有绿色边框的<div>...</div>元素,其内容浮动到右侧,我们就可以用以下方式来实现

<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is</br>
contained in a "div" element that is</br>
floated to the right.
</div>

这是一个包含

在右侧浮动的“div”元素

中的简短段落。

这将产生右侧的盒子。

一些维基文本元素允许您直接在其中插入CSS样式。

一个例子是表语法:

{| style="your style here"
|-
|your table stuff
|}

MediaWiki中存在的样式

你可能想要使用在维基中预定义的样式,当然你也可以为你的用户页创建专属的样式,Vector是默认的样式,你也可以创建一个类来放置你的样式

技巧与提示

不显示

可以根据设备页面与使用方法的不同,同时存在多个页面代码,在不同的页面上显示不同的风格样式,例如:

.''classname'' {display: none}
#''id'' {display: none}

一般情况下,未显示的链接不起作用。

它不能用于删除模板名称、参数名称、参数值、链接中的页面名称等表达式中的文本。

如果想要查看隐藏文本,可以使用Web开发人员工具栏,然后选择显示该工具栏中的隐藏元素。它将显示所有隐藏的元素。

不打印

可以通过声明内容属于“noprint”类来排除打印内容:

<div class="someclass noprint">This will not appear in the print version.</div>

参考


  1. ^ cascade