使用字體，邊框和圖像來裝飾標題
標題在大多數網頁上都很常見。 事實上，幾乎任何文本文檔都至少有一個標題，以便您知道您正在閱讀的標題。 這些標題使用HTML標題元素編碼 - h1，h2，h3，h4，h5和h6。
在某些網站上，您可能會發現標題不使用這些元素進行編碼。 相反，標題可能會使用添加了特定類屬性的段落，或具有類元素的分段。 我經常聽說這種不正確的做法的原因是設計師“不喜歡標題的樣子”。 默認情況下，標題以粗體顯示，並且尺寸較大，特別是h1和h2元素，其顯示的字體比頁面文本的其餘部分大得多。 請記住，這只是這些元素的默認外觀！ 使用CSS，您可以製作標題外觀，無論您想要什麼！ 您可以更改字體大小，刪除粗體等等。 標題是編寫頁面標題的正確方法。 這是一些原因。
為什麼使用標題標籤而不是DIV和样式
搜索引擎像標題標籤
這是使用標題的最佳理由，並以正確的順序使用它們（即h1，h2，h3等）。 搜索引擎對包含在標題標籤內的文本賦予最高的權重，因為該文本具有語義值。 換句話說，通過標記你的頁面標題H1，你告訴搜索引擎蜘蛛，這是頁面的第一焦點。 H2標題有＃2重點，等等。
您不必記住您用來定義頭條的類別
當你知道所有的網頁都會有一個大膽的，2em和黃色的H1，那麼你可以在樣式表中定義一次，然後完成。 6個月後，當您添加另一個頁面時，您只需在頁面頂部添加一個H1標籤，您就不必返回其他頁面來查找用於定義主頁的樣式ID或類別標題和副標題。
它們提供了強大的頁面大綱
大綱使文字更易於閱讀。 這就是為什麼大多數美國學校在寫論文前教導學生撰寫大綱的原因。 當您以大綱格式使用標題標籤時，您的文本具有清晰的結構，並且非常快速地顯現出來。 此外，還有一些工具可以查看頁面大綱以提供摘要，這些依賴於大綱結構的標題標籤。
即使樣式已關閉，您的頁面也能感覺到
不是每個人都可以查看或使用樣式表（這回到＃1 - 搜索引擎查看頁面的內容（文本），而不是樣式表）。 如果您使用標題標籤，則可以使頁面更易於訪問，因為標題提供的信息不適用DIV標籤。
它對屏幕閱讀器和網站可訪問性很有幫助
正確使用標題會為文檔創建邏輯結構。 這是屏幕閱讀器將用於向視力障礙用戶“閱讀”網站的內容，使您的網站可供殘疾人士使用。
設置標題的文本和字體
擺脫標題標籤的“大膽，粗獷和醜陋”問題的最簡單方法就是按照您希望的方式設計文本的樣式。 實際上，當我在新網站上工作時，我通常首先編寫段落h1，h2和h3樣式。 我通常堅持只是字體家族和尺寸/重量。 例如，這可能是新網站的初步樣式表（這些只是可以使用的一些示例樣式）：
body，html {margin：0; 填充：0; } p {font：1em Arial，Geneva，Helvetica，sans-serif; } h1 {font：bold 2em“Times New Roman”，Times，serif; } h2 {font：bold 1.5em“Times New Roman”，Times，serif; } h3 {font：bold 1.2em Arial，Geneva，Helvetica，sans-serif; }您可以修改標題的字體或更改文字樣式甚至文字顏色 。 所有這些都會將您的“醜陋”標題變成更具活力的東西，並與您的設計保持一致。
h1 {font：bold italic 2em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 保證金：0; 填充：0; 顏色：＃e7ce00; }邊界可以打扮頭條
邊界是改善您的頭條新聞的好方法。 邊界很容易添加。 但不要忘記試用邊界 - 你不需要在標題的每一邊都有邊框。 而且你可以使用的不僅僅是平淡無奇的邊界。
h1 {font：bold italic 2em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 保證金：0; 填充：0; 顏色：＃e7ce00; border-top：solid＃e7ce00 medium; border-bottom：虛線＃e7ce00薄; 寬度：600px; }我在示例標題中添加了頂部和底部邊框，以引入一些有趣的視覺樣式。 您可以用任何想要達到所需設計風格的方式添加邊框。
添加背景圖片到您的頭條新聞更多Pizazz
許多網站在頁面頂部都有一個標題部分，其中包含標題 - 通常是網站標題和圖形。 大多數設計師認為這是兩個單獨的元素，但您不必。 如果圖片只是為了裝飾標題，那麼為什麼不把它添加到標題樣式？
h1 {font：bold italic 3em / 1em“Times New Roman”，“MS Serif”，“New York”，serif; 背景：#fff url（“fancyheadline.jpg”）repeat-x bottom; 填充：0.5em 0 90px 0; text-align：center; 保證金：0; border-bottom：solid＃e7ce00 0.25em; 顏色：＃e7ce00; }這個標題的訣竅是，我知道我的圖像是90像素高。 所以我將填充添加到90px標題的底部（填充：0.5 0 90px 0p;）。 您可以使用邊距，線條高度和填充來獲得標題文本以準確顯示您想要的位置。
使用圖像時需要記住的一件事是，如果您有一個響應式網站 （您應該）使用基於屏幕尺寸和設備進行更改的佈局，則標題的大小並不總是相同。 如果您需要將標題大小確定，可能會導致問題。 這是我為什麼通常會在標題中避開背景圖像的原因之一，它們有時候看起來很酷。
標題中的圖像替換
這是網頁設計師的另一個流行技術，因為它允許您創建圖形標題並用該圖像替換標題標籤的文本。 這實際上是一個來自網頁設計師的古老實踐，他們只能使用很少的字體，並希望在他們的作品中使用更多奇特的字體。 網絡字體的興起真正改變了設計師如何處理網站。 現在頭條可以設置成各種各樣的字體和圖像，並且不再需要嵌入的字體。 因此，您只能在舊版網站上找到替代舊標題的CSS圖片，而這些網站尚未更新到更現代的做法。
Jennifer Krynin的原創文章。 在9/6/17由Jeremy Girard編輯