CSS 中的版式和字體樣式

講座 4：CSS 中的版式和字體樣式

在本次講座中，我們將探索如何使用 CSS 設定文字樣式。版式是網頁設計的重要方面，影響可讀性、使用者體驗和整體美觀。在本講座結束時，您將了解如何在網站上套用各種字體樣式並控製文字外觀。

---

了解網頁字體

網頁字體可讓您在網站上使用各種字體。您可以使用裝置上預先安裝的系統字體，也可以使用 Google Fonts 等服務匯入自訂字體。

1.系統字體

系統字體是可靠的，因為它們預先安裝在大多數設備上，但它們限制了您的設計選項。

• 範例：

  body {
    font-family: Arial, sans-serif;
  }

2.Google字體

Google Fonts 提供多種網頁字體供您選擇，您可以輕鬆地將它們整合到您的網站中。

• 範例：

  1. 首先，在 HTML 中包含字體連結：

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. 然後，在 CSS 中套用字體：
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

CSS 中的字體屬性

CSS 提供了多種屬性來設定字體樣式，包括字體大小、粗細、樣式等等。

1.字體大小

您可以使用 font-size 屬性控製文字的大小。

• 範例：

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2.字體粗細

font-weight 屬性可讓您設定文字顯示的粗體程度。

• 範例：

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3.字體樣式

字體樣式屬性可讓您將文字設定為斜體。

• 範例：

  em {
    font-style: italic;
  }

4.字體變體

使用 font-variant 以小寫字母顯示文字。

• 範例：

  p.caps {
    font-variant: small-caps;
  }

5.行高

line-height 屬性控製文字行之間的間距。

• 範例：

  p {
    line-height: 1.5;
  }

6.文字對齊

text-align 屬性控制元素內文字的水平對齊方式。

• 範例：

  h1 {
    text-align: center;
  }

7.文字裝飾

text-decoration 屬性可讓您在文字上新增底線、上劃線或刪除線。

• 範例：

  a {
    text-decoration: underline;
  }

8.文字陰影

您可以使用 text-shadow 屬性為文字新增陰影效果。

• 範例：

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

實際範例：

讓我們結合這些屬性來設計網頁樣式，並專注於排版。

HTML：

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS：

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

在此範例中：

• 所有文字均使用 Google 字型「Open Sans」。
• 標題（h1、h2）採用特定的字體大小、粗細和文字陰影進行樣式設定。
• 段落採用標準字體大小，並在 .intro 類別中套用特殊樣式，包括斜體和小型大寫字母。
• 內容位於頁面中央，具有最大寬度和自動邊距。

練習運動

1. 建立一個包含各種標題和段落的 HTML 頁面。
2. 套用不同的字體屬性來設定文字樣式。
3. 使用 Google 字體讓您的網頁具有獨特的外觀。
4. 嘗試文字對齊、裝飾和陰影效果。

---

下一步：在下一講中，我們將討論CSS 佈局：浮動、Flexbox 和網格，您將在其中學習如何為以下內容創建複雜且響應式的佈局你的網站。請繼續關注！

---

在 LinkedIn 上追蹤我
裡多伊·哈桑

以上是CSS 中的版式和字體樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！