手冊:樣式表

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Manual:CSS and the translation is 100% complete.

Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎italiano • ‎日本語 • ‎മലയാളം • ‎polski • ‎português • ‎português do Brasil • ‎中文

樣式表 (Cascading style sheet, CSS) 決定了 MediaWiki 中許多的外觀和感覺:諸如字體大小、顏色、空間、標誌和背景的圖片,甚至決定了網站的內容是顯示出來或隱藏起來的。

樣式表可以用來改變整個wiki的風格,例如讓背景換成不同的顏色,或是你可以使用行內樣式表,樣式化你wiki文本中的特定範圍。例如綠色文本可以用<span style="color:green;">green text</span>這樣的代碼實現。如果你想讓wiki上的所有文字變大,你可以把代碼body { font-size: larger; }加到MediaWiki:Common.css內。

要改變MediaWiki螢幕顯示(就是它在瀏覽器中看起來的樣子)的風格和感覺,你可以把樣式表放在MediaWiki:Common.css之中。

如果往MediaWiki:Common.css添加代码,并没有立即生效的话,可能你需要清理缓存

要显示MediaWiki页面在变更之后的区别,请将MediaWiki:Print.css放到你的Wiki中。

如果你的Wiki管理员允许,用户可以在“Special:Mypage/<skin_name>.css中创建,例如:Special:MyPage/vector.css,如果用户使用vector形式的建立的个人定制页,那么就要用“Special:Mypage/common.css”建立个人定制页面。

你也可以為MediaWiki建立客製化版型

帮助

高级定制页的语法,必须是正确的,否则所显示出来的效果是无效的,互联网上一些定制页面是一个很好的例子,如何正确编写,请参照以下例子:

  • $ propidx--css 2.1 属性索引 "' ← 非常有用 '"
  • indexlist--css 2.1 索引
  • minitoc--css 2.1 目录

维基百科给了一个很好的例子:overview of CSS

如果你喜欢参照其他网站和观看如何编辑高级定制化页面,请参照Mozilla开发者网络高级定制化页面,它会为你提供一个各种形式的编程方法。

注意事项

确保Html的语法正确,如果只是顾及定制后的外形而忽略电脑的兼容性(如,搜索引擎、文本编辑、浏览器等)这是一种不好的做法。

定制化页面的规范

现在,许多定制化页面都依赖于“重置”或“常规化”的定制页面,以便所有浏览器都能正常工作。但MediaWiki没有上述所说的设置,虽然内置有定制化样式表,如通用的commonElement.css、普通的commonContect.css、普通的commonInterface.css和/* CSS placed here will be applied to all skins */。

如果你复制这个网站的定制化页面,请看一下它是否依靠其他网站的定制化页面。

例如,JSFiddle的CSS复选框。将margin设置为0,并重置列表上的数字,由于这类没有在MediawWiki上使用。因此不应该将此编码载入维基上。

JsFiddle具有导入定制化(CSS)功能,如果你在维基百科上测试,你应该按照这个程序去测试:

您可以為其他基金會wiki調整URL中的域名。通過匯入這些,您可以獲得讓您的CSS與基金會wiki上的CSS互相作用的更佳主義。

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

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

参见