Jump to content

Manual:CSS

本頁使用了標題或全文手工轉換
From mediawiki.org
This page is a translated version of the page Manual:CSS and the translation is 98% complete.
这是“CSS”的重定向页面。要想查找CSS扩展,请参阅Extension:CSS

层叠样式表(Cascading style sheet,CSS)決定了 MediaWiki 中許多的外觀和感覺:諸如字體大小、顏色、空格、徽标和背景的圖片,甚至決定了網站的內容顯示或隱藏。

想要改變 MediaWiki 屏幕顯示(它在瀏覽器中看起來的樣子)的样式和感覺,你可以把樣式表放在 MediaWiki:Common.css 之中。 这个文件是你的 wiki 中的一个页面,而不是像 index.php 或者 load.php 这样的文件,所以你无法通过查找服务器的目录结构来找到它,也无法初始链接至主页或者其他页面。 这个页面一开始只包含一行注释。 在wiki主页面的搜索框中输入 MediaWiki:Common.css 就可以找到它。 它将以一個文件的形式出现,其地址类似于 https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css 這樣的型式。 (需要如下的权限才能编辑:“界面管理员”)

如果添加代码到MediaWiki:Common.css,卻没有立即生效的话,你可能需要執行一次硬刷新。

想要改变MediaWiki页面的打印的方式,你就要把CSS放到你的wiki上的MediaWiki:Print.css裏。

CSS可以用來改變整個wiki的风格,例如讓背景換成不同的顏色、或者你可以使用内联CSS来設計wiki中的特定文本的样式。 例如可以用<span style="color:green">green text</span>這樣的代碼來做到绿色文本。 如果你想讓wiki上的所有文字變大,你可以把代碼body { font-size: larger; }加到MediaWiki:Common.css內。 移动版使用的是MediaWiki:Mobile.css

如果 $wgAllowUserCss 在你的 wiki 中被启用,个人用户可以在 Special:MyPage/<皮肤名>.css 中为自己创建自定义的 CSS(例如:Special:MyPage/vector.css,如果用户是使用 Vector 皮肤的話)。 Special:MyPage/common.css允许为所有皮肤创建个人的CSS。

你也可以為MediaWiki创建自定义的皮肤

帮助

CSS的语法、属性和值都必须正确,否则就不能正確生效。 万维网联盟(W3C)是一个检查如何直接从标准中正确编写CSS極好的参考:

维基百科提供了一个很好的CSS概述

如果你更喜欢在演示CSS功能的同时,提供一个容易消耗的参考资料,Mozilla開發人員網路CSS參考資料将为你提供一个 "最新 "的指南,介绍各种元素的语法和基本用法。

注意事项

一定要確保你的HTML标记的语法正确。 只依靠样式来表示意义是一种不好的做法(如,对于机器的可读性,如搜索引擎、使用文字轉语音的屏幕阅读器以及文本浏览器等)。

必要时可通过使用safemode=1 URL参数暂时禁用自定义样式。

规范化CSS

现今,许多CSS都依赖于“重置”或“规范化”CSS,以使所有的浏览器的表現都是相同的。 MediaWiki本身没有重置,尽管有内置的样式表,如common/commonElements.css、common/commonContent.css、common/commonInterface.css,以及 MediaWiki:Common.css

如果你复制某個CSS,要注意它是否依赖于其他的CSS。

例如,jsFiddle就有一个 "规范化CSS "的复选框。 它會将margin设置为0,并重置列表上的数字。 由于这些规范化的CSS都没有在MediaWiki网站上运行,所以在测试MediaWiki相关的代码时,你不应该使用它。

jsfiddle有一个导入CSS的功能。 如果你是针对英语维基百科上的Vector皮肤进行测试,主要的表应该是(按这个顺序):

您可以為其他維基媒體基金會的wiki們調整URL中的域名。 通过导入这些,你可以更好地了解你的CSS是如何与維基媒體基金會的wiki上的CSS互动的。

在Special:UserLogin或Special:Preferences中的樣式不能工作?

預設情況下,site CSS的自訂內容(例如MediaWiki:Common.css)不會對登入與偏好設定頁面產生影響。 這是為了保護登入流程安全,并允許使用者移除無需要的自訂內容,而不被它干擾。 如果您不在意安全的風險,您可以使用$wgAllowSiteCSSOnRestrictedPages 配置設定允許自訂CSS在這些頁面工作。

使用url()函数

出于隐私原因,Wikimedia网站配置为拒绝使用url() CSS函数从外部服务器加载资源。包括在数据URL中编码的资源。

但是您可以加载托管在Wikimedia服务器中的资源。例如您可以从Wikimedia Commons加载图像,并通过CSS将其用作背景图像:

.my-class {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}

您还可以使用Wikimedia的通用语言选择器提供的自定义字体系列(参见Wikimedia wiki上的可用字体表)。

加载Gochi Hand字体的CSS示例:

@font-face {
  font-family: 'GochiHand';
  src: local("Gochi Hand"),
       url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}

如果您想要使用自定义字体,这些字体必需安装在系统本地。

参见