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：

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

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中文網其他相關文章！