華夏公益教科書/類和樣式筆記

這篇簡短的文章旨在向剛開始使用華夏公益教科書的作者傳達有關樣式的一些基本要點。系統樣式表對作者不可編輯，但透過在頁面中新增 HTML 和維基文字標籤，仍然可以進行大量的 CSS 樣式設定。

基礎

• 樣式： 這些有時被稱為 CSS 樣式規則。它們與華夏公益教科書的網頁一起交付到瀏覽器。它們儲存在稱為樣式表的文字檔案中，但幸運的是，它們也可以直接在華夏公益教科書的編輯區域中鍵入。
• 使用者樣式表是一個例外。那些熟悉這種瀏覽器使用方式的人可以修改維基網頁的本地顯示，但不能修改其他人可以檢視的儲存版本。
• HTML 標籤和維基文字標籤可以新增到作品的編輯區域。作者可以在他們的作品中使用維基文字或 HTML 標籤；事實上，許多常用的 HTML 標籤都可以使用。華夏公益教科書大部分時間使用維基文字標記，但在傳送到瀏覽器使用之前，它會被翻譯成 HTML。
• 華夏公益教科書作者僅限於內聯樣式。作者無法訪問華夏公益教科書系統的樣式表。他們必須將自己的樣式寫入新增到其頁面編輯區域的維基文字標籤或 HTML 標籤中。但是，如果他們知道已經存在的樣式類，他們也可以在標籤中宣告它們以供使用。
• 模板也可以包含樣式。模板是預先準備好的文字命名塊，帶或不帶樣式，可以使用特殊格式插入作者的作品中。涉及內聯樣式的複雜任務，尤其是那些經常使用的任務，可以從使用模板中獲益。其他人制作的模板對所有人可用。
• 內聯樣式具有相當高的優先順序。事實上，對於熟悉該主題的人來說，每個內聯樣式宣告的特殊性是簡單標籤選擇器的 1000 倍，是類塊內宣告的 100 倍，是 ID 塊內宣告的 10 倍。也就是說，除非其他樣式帶有!important標記，否則它們會覆蓋其他作者樣式。
• HTML 屬性也是樣式。在使用 CSS 樣式之前，HTML 屬性是網頁樣式的主要方法。HTML5 中許多屬性不再可用，但仍有一些可用。由於它們未來的不確定性，華夏公益教科書更喜歡使用 CSS 樣式。
• 使用 CSS 樣式參考。要找到在你的作品中應用的樣式，最好的方法是參考列表。在華夏公益教科書本身和全球資訊網聯盟 CSS 參考中都可以找到 CSS 樣式的全面列表和教程。

內聯 CSS 樣式

所有內聯樣式，無論是寫在 HTML 標籤中還是維基文字中，都使用Style屬性。如果不想造成混亂，元素中應該只有一個樣式宣告。

以下程式碼是為已新增段落標籤的文字設定內聯樣式宣告的典型程式碼。它在這裡用於設定字型名稱及其間距。

<p style="font-family:"Times New Roman"; line-height:1.75em; letter-spacing:0.1em;">The text</p>

關於樣式宣告的主要要點是這些

• 樣式塊總是等於屬性style。
• 整個樣式塊用括號括起來。.
• 每個屬性與其值之間用冒號隔開。
• 單個宣告用分號隔開。.
• 包含空格的值本身必須用引號括起來。
• 分號後可以存在空格。
• 最後一個分號是可選的。.
• 可以列出任意數量的屬性。

一些用維基文字編寫的結構，例如表格，使用略微不同的格式，但樣式部分相同。那些對這種格式感興趣的人應該參考頁面表格，以及 CSS 樣式的參考列表和教程，請參考網站全球資訊網聯盟 CSS 參考.

常見樣式任務

本節介紹新的華夏公益教科書編寫者遇到的更常見樣式任務的基礎知識。鼓勵編寫者用他們有用的發現來補充本節。因此，在健康的寫作環境中，它應該隨著時間的推移而增加。

段落文字樣式

在華夏公益教科書樣式中，最常見的一項任務是更改文字的外觀。編寫者可以使用兩種主要方法，新增段落標籤然後進行樣式設定，或者類似地使用span標籤。兩種方法都使用前面描述的樣式表示式，並且下面顯示了每個方法的佈局。

<p style="font-size:16pt; color:blue;">This is one whole paragraph....</p>
<span style="letter-spacing:0.15em; font-family:Garamond;">This is text within a paragraph....</span>

span技術通常保留用於簡短的文字字串，而樣式化的段落則具有更廣泛的用途。段落是塊元素的示例，因此它們可以有寬度、邊距和其他尺寸設定。span 標籤是內聯元素的示例，沒有塊樣式。

如果要設定多個段落的樣式，最好是在作品周圍新增一組div標籤並對其進行樣式設定，而不是對每個段落進行樣式設定。然後，如果可能的話，樣式將從分隔標籤繼承。樣式的繼承超出了本節的範圍，但在CSS 級聯 - 樣式繼承中有介紹。

樣式'Pre'標籤

當我們需要保留文字的精確佈局時，可以將Pre標籤新增到文字中。也就是說，瀏覽器必須被阻止進行自己的格式化。例如，編寫詩歌、歌詞、程式碼列表和其他各種用途。這種文字被稱為預格式化文字，以區別於非格式化文字，這是通常的情況，瀏覽器在行尾換行。這些標籤還具有停用表格等功能程式碼以及所有其他標籤的效果。基本程式碼就是

<pre>
The time has come
the walrus said to
speak of many things...
</pre>

除了所有塊元素通用的完整寬度、填充、邊距和對齊集之外，pre 標籤還可以透過 CSS 樣式設定來產生不同的字型、邊框和背景。請參見下面的示例，其中添加了一些樣式。white-space屬性確保長行被換行，而不是強制頁面寬度變寬。

<pre style="border:1px solid lightgrey; font-family:Arial; white-space:pre-wrap; background:beige;">
Text goes here...
</pre>

更多預格式化文字的方法可以在預格式化文字中找到。

移動目錄

樣式最有用的一件事是將目錄（TOC）移動到頁面上的某個精確位置。當列表出現在頁面的頂部時，這變得至關重要。為了避免不可避免的專案符號點變形，目錄可以簡單地移動到頁面的右側，而不是它習慣的左側位置。

通常的做法是將目錄放在表格單元格中，然後將表格移動到頁面上適合的任何位置。選擇表格而不是分隔的原因是表格可以輕鬆地改變大小，以適應目錄寬度的變化。已經制作了利用這個想法的模板，包括 Template:Tocright。使用 HTML 標籤，一般形式就是

<table>
<td>
__TOC__
</td>
</table>

注意目錄包含用大寫字母寫，並且有四個下劃線，兩邊各兩個。

為了在頁面的右側定位，表格可以像下面這樣進行樣式設定

<table style="float:right; margin:10px;">
<td>
__TOC__
</td>
</table>

float 屬性將表格放置在容器（頁面）的右側，並允許文字圍繞它環繞。文字將開始環繞，從表格程式碼塊之後的文字行開始。margin 屬性設定表格容器和環繞文字之間的間距。

更多資訊可以在標題的目錄中找到。

分割頁面

頁面可以被分割成多個部分。這在對大段文字應用樣式以及建立較小的盒狀形狀時很有用。

封閉部分的大小並不重要。例如，頁面中作者部分可以分成兩部分，如下所示。其中一部分的背景顏色與其他部分不同。

<div style="background:beige; border:1px solid lightgrey; padding:10px;">
First page part...
</div>
<div style="background:linen; border:1px solid lightgrey; padding:10px;">
Second page part...
</div>

現有的文字和結構將在這些新的彩色容器內縮排 10 畫素，大約是十分之一英寸，具體取決於螢幕解析度。

有用的 CSS 類

遺憾的是，幾乎沒有有用的類可以為作者的工作增加趣味性。對於一組表格類，存在真正的需求；Wikitable 類的屈尊降貴實際上是不夠的。這是網頁大師需要改進類可用性的問題，因為其他人無法訪問樣式表修改。然而，從基本的表格樣式長期存在來看，他們是否認為這些樣式已經足夠好了？

參見

• CSS 參考  : 有用的外部 CSS 參考列表
• 沙盒  : WikiBooks 沙盒
• 模板  : WikiBooks 模板製作 101
• Opera 12.16 中的樣式呈現模式  : Opera 瀏覽器樣式模式的描述。
• CSS 級聯  : CSS 級聯的基本解釋。