說明:層疊樣式表
此條目可參照英語維基百科相應條目來擴充。 |
層疊樣式表允許靈活地設置頁面的格式。對於非表格內容,應儘可能使用它們而不是表格,因為如果你是像模板一樣將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