如何用 CSS 語法來美化文章標題外觀

在開始接觸 WordPress 架設 Blog 寫文章初期，我常常在想，為什麼別人的標題，總是起來美觀很多。而自己不論是用什麼佈景主題，總是無法達到想要的形式。

雖然常聽到許多人說，內容才是王道，但說實在的，如果沒有在文章上的標題下點工夫，還真的吸引不到什麼注意力。畢竟人就是視覺的動物…

自已都覺得不好看，想必也是多數人覺得不好…所以在這接下來的內容，將和你分享，我如何使用 CSS 的語法來美化文章的外觀，如果你也正煩惱這個事情，那接下來給我5分鐘的時間，讓我來和你分享，什麼是 CSS 與我是怎麼調整與修改的吧！

我將盡可能使用簡易的圖文，讓你一次明白，跟著文章來試試吧!

CSS 修改示範

就以這篇為例

• 下圖就是沒有進行CSS外觀修正的樣式

• 下圖就是有變更過CSS設定的文字標題

依上方兩張圖片，可以看出同標題將會有不同的形式。而使用CSS就可以自由的修改成自已想要的形式。

CSS 是什麼

CSS 英文全名是 Cascading Style Sheets，中文叫階層式樣表。是一種用來為結構化文件(Html或XML)，設定樣式(字體、顏色、間距…等屬性)的電腦語言。

CSS 的維基百科 Link

簡單來說，CSS 就是用來控制網頁中所有內容的控制語法。

看到【語法】可能會有人覺得，是不是像程式語言一樣難懂，其實他的內容是很「直觀」的，只要能稍記一些常用的功能，你的網站也能做到和別人不一樣。

CSS 的結構(盒模型Box-Model)

在開始之前，需要先了解一下 CSS 的結構模式，這樣你在進行語法設罝時，才不會亂了套。

下圖就是整個 CSS 的結構圖，又稱盒模型 Box-Model，下圖即是他整體的示意圖

• 內容(Content)：指在網頁上使用的物件所佔的區域。
• 內距(Padding)：指內容至邊線的區域。
• 邊框(Border)：指內距至邊框的區域。
• 外距(Margin)：指邊框至外距的區域

• 什麼是CSS：這文字的部分，就是內容。
• 紅色箭頭：就是指內距。
• 藍色箭頭：就是指邊框。
• 橘色箭頭：就是指外距。

文字的部分，就是使用白色，並將【什麼是CSS】的文字內距左邊、上與下均設定距離，邊框大小進行設定，並設置為藍色，這範例是沒有設置外距的部分。

明白完CSS大致的概念後，接下來我們就進入製作的部份吧。

CSS修改標題教學

以下我將會用圖+文標示的方式，讓你可以一步步來進行了解，學會如何使用CSS修改標題。

文章編輯的畫面，插入文章題，右方會有出現區塊，在區塊中的進階設定裡。

在進階中的最下方，有個 【附加的CSS類別】，我在示範上是打上 “post-h2-title”，其實這並沒有限定，只要是英文+數字的組合即可。

先設置好名稱後，下方才開始進入CSS的正式修改。

在WordPress的後台中的 外觀→自訂 裡，進行CSS的語法的新增。

再找到附加的CSS

請將下方CSS碼的代碼複製後貼上，並發佈即可

.post-h2-title {
     background-color:#444140;
     padding: 16px 0 16px 24px;
     border-left: 8px solid #00749C;
     color: #ffff !important;
}

發佈後，就會得到相同的樣式

之後，如果你想在其他的標題，出現一樣的形式，只要在【區塊→進階→附加的CSS類別】打上相同的名稱 “post-h2-title” 即可。

CSS的語法說明

以上述的範例來看

.post-h2-title {
     background-color:#444140;
     padding: 16px 0 16px 24px;
     border-left: 8px solid #00749C;
     color: #ffff !important;
}

• post-h2-title ：這部分就是我們剛剛在CSS類別中，自訂的Class語法名稱，而在post前面的 “.” 就是在輸入程式碼時，固定的用法。
• { … } ：這是Class固定的用法，你可以想像它就是把想呈現的樣式，包在裡面。
• background-color：是指設定這個背景的顏色，而顏色是使用【色碼】#444140，這裡也有色碼表可以進行參考。
• padding：就是內距，你看到完成的樣式，是不是內容和內距上，都有一個一定的距離呢?而 16px 0 16px 24px，各是內距 “上 右 下 左” 的數值。
• border-left：就是指邊框的左邊，設定有8px寬的實線(solid)，顏色是 #00749C。
• color：即是指文字的顏色，#ffff 就是白色囉。

CSS 使用上的資源匯整

網頁設計CSS常用語法(點此開啟)

色碼表(點此開啟)

文章最後

在這裡是簡單將 CSS 的應用在標題的方式，讓你知道。其實在網站製作中，每個元件都有其 CSS 可以進行修改與調整。也相信透過這個簡易的 CSS 教學範例，你也可以完成屬於自己專屬的標題或外觀模式。如果你有任何問題，你也可以到下方留言給我。讓我們一起來努力提高網站的瀏灠體驗吧！

▲ 讓你擁有一個能帶來現金流的網路賺錢基地，建立網路收入之路，實踐打造網路賺錢基地的策略與技巧 !

其他 WordPress 網站架設 相關文章推薦

• 【教學】Analytics Insight 外掛使用教學分享 ! JetPack 流量統計替代外掛 !
  Analytics Insight 是一款結合 Google Analytics 的免費外掛工具。可以有幫助地… 閱讀全文: 【教學】Analytics Insight 外掛使用教學分享 ! JetPack 流量統計替代外掛 !
• 【教學】免費收發域名郵件教學 Cloudflare 郵件轉址與使用 Gmail 郵件收發域名信件 !
  這篇文章將教你如何免費使用你自己的域名郵件。通常，使用自己的域名來發送和接收郵件需要支付費用，但透過 Cloudflare 和 Gmai l，就可以免費實現這一目標。這不僅節省了費用，還提供了一個方便快速的解決方案。
• 【教學】Rank Math 功能強大的 SEO 外掛功能 ! Rank Math 使用教學 !
  Rank Math SEO 是目前使用上最好的 WordPress SEO 外掛，在這外掛程式中結合了許多 SEO 工具的功能，可幫助我們在寫作時，網站建立時，去貼近 SEO 規則，增加流量。
• 【教學】WordPress 防止垃圾留言 Akismet Anti-Spam 設定教學
  數以百萬的使用者採用 Akismet，它是保護網站遠離垃圾留言的絕佳方式。Akismet 是 WordPress 使用者幾乎都會安排的一套防止垃圾留言的外掛工具。而且免費的功能，幾乎就已經可以完完全全協助防止 99.99% 的垃圾留言 ! 功能如此強大，怎麼可以不使用在自己的網站呢 ?
• 【教學】WordPress 建立文章目錄 Table of Content Plus 設定教學
  Table of Content Plus，一個強大且方便使用的文章目錄自動產生工具。如果你和我一樣，對網頁程式碼一竅不通，又希望可以有簡單、快速的方式建立文章目錄，那 Table of Content Plus 你就不能不知道 !
• 【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !
  許多主機服務商都會有提供一個叫 Staging Site 的功能，也稱之為臨時網站。這功能可以幫助你在想更新網站時，幫你複製出一個完全相同的臨時網享，讓你在更新網站內容時，不必怕更動到網站目前的現況，就算是大幅度的更新，也不用怛心。在這篇內容中，將會和你快速分享有關 Cloudways Staging Site 功能的使用詳細流程，幫助你無痛更新你的網站內容。
• 【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !
  使用 Post SMTP 這個外掛，可以幫助你的網站進行郵件的發送，Post SMTP 是一套非常簡單使用，功能又特別強大的一個寄件外掛，讓你的 WordPress 網站，可以讓訪客在網站上完成某些動作時，即進行郵件的推播與發送，進而維持好與訪客之間的互動。Post SMTP 的設定方式很簡單，接下來就帶你來一步步完成吧 !
• 【教學】Cloudways 如何設定域名信箱 Domain Mailbox
  Cloudways 是我目前使用最穩定的網站主機，價格、服務、性價比 … 等等，在比較之下，真的都沒話說。而長期使用之下，你一定會需要建置一個 域名信箱，在使用 Cloudways 的情況下，如何快速的為自己建立出 域名信箱，在這篇教學中，將會完整和你分享 Cloudways 如何設定域名信箱，讓你從無到有一次完成 !
• 【Divi教學】Divi主題 SEO 基礎設定說明，簡易SEO功能介紹
  Divi主題之中，針對SEO的功能有著其基礎設定。在這次divi教學裡，將會教會你如何將divi主題裡的SEO功能進行基礎設定，這在divi教學中可則是非常基礎的一課。了解基礎設定後，後續若要使用其他SEO外掛，也就更能明白為什麼需要如此設定。你也可以選擇直接使用SEO外掛，在divi主題中，可以直接與外掛相支援。
• 【Divi教學】Divi主題 Navigation 導航選項設定
  Divi主題之下，可以透過原本的divi主題設定，來決定導航列(Navigation)所能夠呈現的功能。在這篇文章中，將詳細和你說明在Divi主題下的設定中，導航列的所有相關設定方式。
• 【Divi教學】Divi主題Options基本設置選項教學
  在divi主題中，由於沒有中文版本，有中文的版本在使用上常遇到更新就變的無法使用。 在這整理divi主題的使用細節，來幫助更多喜好使用divi主題的人，可以有一個正常參考的地方。 文章在一樓喔
• 【分享】如何進行網址域名移轉？NameCheap移轉至Gandi實際操作經驗分享
  網站域名服務商很多，你是不是曾經有過，早知道選xxx家就好了的心情呢？其實如果已經在某家買好域名，是可以進行移轉的，今天這篇內容，就是和分享，域名移轉時，你需要注意的事項。