跳至內容

說明:階層式樣式表

本頁使用了標題或全文手工轉換
維基百科,自由的百科全書
階層式樣式表

階層式樣式表允許靈活地設定頁面的格式。對於非表格內容,應儘可能使用它們而不是表格,因為如果你是像模板一樣將CSS嵌入在裏面,他們就可以被讀者直接使用或者方便他人的修改。

CSS設定的層級

風格樣式(Style)一般是可以專門為一個部分、段落、內容進行的,又或者是用元素、類和ID為CSS選擇器指定樣式。這是在各個不同層面上完成的

一般情況下根據下列規範來編寫樣式表:

注意:請參閱CSS類目錄(英文)英語Catalogue of CSS classes英語Catalogue of CSS classes以取得所有已載入樣式表的列表。

MediaWiki的核心樣式表

請參見階層式樣式表 ,通常情況下載入如下樣式表:

特定介面的樣式檔案:

例如: monobook/main.css (通常用於電腦上), chick/main.css (通常用於流動裝置)

瀏覽器介面的專用樣式:

例如在桌面端:

全站通用的樣式檔案

注意:非英語的MediaWiki網站可能會使用「MediaWiki: Gadget-site.css」來代替「MediaWiki: Common.css」檔案

特定頁面的樣式檔案

通過模板樣式來使用特定頁面的樣式檔案,很多模板一般都會使用行內的樣式表

比如檔案上載精靈就會使用自己的樣式檔案

用戶頁的樣式檔案

注意:在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>

參考


  1. ^ cascade