手冊:樣式表

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

Outdated translations are marked like this.
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之中。

如果往Template:蓝色添加代码,并没有立即生效的话,可能你需要执行F5(在Windows),或用清理垃圾软件清理缓存。

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

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

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

帮助[edit]

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

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

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

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

注意事项[edit]

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

定制化页面的规范[edit]

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

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

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

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

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?[edit]

By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the $wgAllowSiteCSSOnRestrictedPages configuration setting to allow custom CSS to work on these pages.

参见[edit]