手冊:樣式表

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Manual:CSS and the translation is 49% complete.
Outdated translations are marked like this.
Other languages:
English • ‎Türkçe • ‎español • ‎français • ‎italiano • ‎polski • ‎português do Brasil • ‎中文 • ‎日本語

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


要改變MediaWiki螢幕顯示(就是它在瀏覽器中看起來的樣子)的風格和感覺,你可以把樣式表放在MediaWiki:Common.css之中。 This file is a page in your wiki, not a file like index.php or load.php, so you cannot find it by looking at the directory structure on your server, nor is it linked to your Main Page or any other page initially. The page initially consists of just a one-line comment. To find it, type MediaWiki:Common.css in the search box on the main page of your wiki. It will appear as a file with an address something like https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css.

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

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


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

For example green text can be accomplished by doing <span style="color:green;">green text</span>. If you want to make all text on the wiki larger you can add the code body { font-size: larger; } to MediaWiki:Common.css. For mobile version use MediaWiki:Mobile.css

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

Special:MyPage/common.css allows the creation of personal stylesheets for all skins.

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

帮助

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

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

World Wide Web Consortium (W3C) is an excellent reference for checking how to write CSS correctly directly from the standards:

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

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

注意事项

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

Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

定制化页面的规范

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

MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and MediaWiki:Common.css.

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

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

This sets margins to 0 and resets the numbers on ordered lists. Since none of this normalization CSS is running on MediaWiki sites, you should not use it when testing MediaWiki-related code.

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

If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):

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

By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

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

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

参见