《HTML5+CSS3網頁設計入門必讀》——6.2 粗體、斜體和特殊的文本格式化

本節書摘來自異步社群《html5+css3網頁設計入門必讀》一書中的第6章，第6.2節,作者： 【美】julie meloni更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

回到打字機的時代，我們滿足于純文字顯示，以及使用臨時的下劃線來突出重點。今天，粗體（boldface）和斜體（italic）文本在所有紙面交流中都變成了社交禮節所要求的。自然，也可以向web内容中添加粗體和斜體文本。多個标簽和樣式規則使文本格式化成為可能。

給文本添加粗體和斜體格式化效果的老派方法——這裡将簡要讨論，因為如果你選擇檢視源代碼，那麼将不可避免地會在許多web站點的源代碼中看到它，包括< b > b >和< i > i >标簽對。對于粗體文本，将用< b >和标簽包圍文本。類似地，要使任何文本以斜體顯示，将在< i >和 i >标簽内封閉它。盡管這種方法在浏覽器中仍然會工作得很好，但它不像用于文本格式化的css樣式規則那樣靈活或強大，應該避免使用。

注意：

盡管隻要有可能，你都希望使用樣式來影響表示，但是在處理粗體和斜體文本時，樣式規則的一種替代方法涉及< strong > strong >和< em > em >标簽對。在大多數浏覽器中，< strong >标簽所做的事情與< b >标簽相同，而< em >标簽就像< i >标簽一樣，用于把文本格式化為斜體。當然，也可以按你喜歡的方式設定這些标簽的樣式，但是這些是預設設定。

< strong >和< em >标簽被認為是< b >和< i >之上的改進，因為它們隻暗示文本應該接受特殊的強調。它們沒有明确規定應該如何實作這種效果。換句話說，浏覽器不必把< strong >解釋為意指粗體或者把< em >解釋為意指斜體。這使< strong >和< em >更适合于html5，因為它們給文本添加了含義，并且會影響文本的顯示方式。

本書第iii部分“利用css進行進階web頁面設計”更深入地介紹了css樣式規則，但是這裡做一點鋪墊是合适的，以便你可以了解一些基本的文本格式化選項。font-weight樣式規則使你能夠使用一個樣式規則設定字型的粗細或鮮明度，用于font-weight的标準設定包括normal、bold、bolder和lighter（其中normal是預設設定）。斜體文本是通過font-style規則控制的，可以把它設定為normal、italic或oblique。如果希望應用多個樣式規則，也可以一起指定樣式規則，如下面的示例所示：

在這個示例中，在< p >标簽的style屬性中指定了兩個樣式規則。使用多個樣式規則的關鍵是：必須用分号（;）把它們隔開。

不過，并不僅限于在段落中使用字型樣式。下面的代碼顯示了如何把項目符号清單中的文本設定為斜體字：

也可以在标題内使用font-weight樣式，但是一種更粗重的字型通常不會影響标題，因為它們預設已經是粗體。

盡管使用css允許對文本應用豐富的格式化效果，但是當不必像css所允許的那樣具體時，另外幾個有效的html5标簽也适合于給文本添加特殊的格式化效果。下面給出了其中一些标簽，所有其他的文本格式化實際上應該都是利用css完成的。每個标簽的實際應用如程式清單6.2和圖6.2所示。

：上标文本。

：下标文本。

：強調的（斜體）文本。

：醒目的（粗體）文本。

：預先格式化的（通常是等寬的）文本，保留白格和換行符。

watch警告：

在過去，< u >标簽用于建立加下劃線的文本，但是你現在将不想使用它，這是由于下面兩個原因。第一，使用者期望加下劃線的文本是一個連結，是以如果加下劃線的文本不是連結，那麼他們可能會糊塗。第二，< u >标簽是過時的，這意味着它将html語言逐漸淘汰（就像< strike >标簽一樣）。在web浏覽器中仍然支援這兩個标簽，并且很可能持續相當長的一段時間，但是使用css是建立加下劃線和删除線的文本的首選方法。

程式清單6.2 特殊格式化的标簽

https://yqfile.alicdn.com/2caeae39d5ad33763b532a584b301430f6cba844.png" >

< pre >标簽導緻文本以等寬字型顯示，并且會做另外某件獨特而有用的事情。如你在第2章中所學到的，在html檔案中通常會忽略多個空格和換行符，但是< pre >可以保留額外的間距和換行符。例如，如果沒有< pre >，圖6.2末尾的文本看起來将如下所示：

即使在每一行末尾添加< br />标簽，列也不會正确地對齊。不過，當在開頭放置< pre >并在末尾放置 pre >時，列将正确地對齊，因為這樣會保留精确的空格，而無需使用< br />标簽。< pre >标簽提供了一種快捷、容易的方式，用于以最少的工作量保留你可能想轉換成web頁面的任何等寬文本檔案的對齊方式。

css提供了一些用于對齊文本（實際上可以對文本做任何事情）的更健壯的方法，在本書整個第iii部分将學習關于它們的更多知識。