帮助:层叠样式表
此条目可参照英语维基百科相应条目来扩充。 |
层叠样式表允许灵活地设置页面的格式。对于非表格内容,应尽可能使用它们而不是表格,因为如果你是像模板一样将CSS嵌入在里面,他们就可以被读者直接使用或者方便他人的修改。
CSS设置的层级
[编辑]风格样式(Style)一般是可以专门为一个部分、段落、内容进行的,又或者是用元素、类和ID为CSS选择器指定样式。这是在各个不同层面上完成的
一般情况下根据下列规范来编写样式表:
注意:请参阅CSS类目录(英文) 以获取所有已加载样式表的列表。
MediaWiki的核心样式表
[编辑]请参见层叠样式表 ,通常情况下加载如下样式表:
特定界面的样式文件:
[编辑]例如: monobook/main.css (通常用于电脑上), chick/main.css (通常用于移动设备)
浏览器界面的专用样式:
[编辑]例如在桌面端:
全站通用的样式文件
[编辑]- 针对于桌面端的样式:MediaWiki:Common.css
- 针对于移动端的样式:MediaWiki:Mobile.css
- 针对于特定的单独样式:Vector,Monobook等
- 针对于用户组的样式:注册用户,自动确认用户等
- 针对于特殊用途的样式:打印页面,无Script页面,文件页面等
- 针对于加载小工具的样式:小工具样式(请跳转此条目页面以获取更多信息)
注意:非英语的MediaWiki网站可能会使用“MediaWiki: Gadget-site.css”来代替“MediaWiki: Common.css”文件
特定页面的样式文件
[编辑]通过模板样式来使用特定页面的样式文件,很多模板一般都会使用内联的样式表
用户页的样式文件
[编辑]- 用户页的全局样式文件: meta:Special:MyPage/global.css
- 用户页的样式文件: Special:MyPage/common.css
- 用户页的专用样式文件(适用于你当前页面的): Vector or Special:MyPage/skin.css
- 通过JaveScript加载的用户页样式文件:Special:MyPage/common.js
- 通过浏览器设置或加载本地文件的用户指定样式
注意:在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>
参考
[编辑]- 块与行
- CSS – 关于CSS的词条
- 个性化设置(英文) – 包括用户名、首选项设置、皮肤、用户脚本等。
- 帮助:用户样式 – 修改样式以进行可访问性或其他功能测试。
- 模板样式 – 修改样式以获得可以与模板一起应用的高级视觉外观。
- CSS的类目录(英文) – 在整个站点中全局定义的类列表
- 维基项目:微格式/类(英文) – 维基百科微格式中使用的类列表
- 等宽字体的CSS样式模板(英文) – 既用于编辑窗口,也用于显示等宽元素,如
<code>
- MediaWiki:CSS (手册) 和 MediaWiki:层叠样式表(手册)
- MediaWiki:用户样式库
- Meta:Explaining skins
- MediaWiki:Skin projects