DAY 7：選擇器和屬性

2024 iThome 鐵人賽

DAY 7

自我挑戰組

前端基礎：HTML 和 CSS 的 30 天學習之旅系列第 7 篇

16th鐵人賽

wujia0224

2024-09-21 15:23:04

120 瀏覽

分享至

選擇器 (Selectors)

CSS 選擇器用來選擇 HTML 元素，並應用相應的樣式。常見的選擇器包括：

(1) 元素選擇器 (Type Selector)

選擇 HTML 元素名稱，將樣式應用到所有該元素上。

p {
  color: red;
}

將所有 <p> 元素的文本設置為紅色。

(2) 類選擇器 (Class Selector)

選擇帶有特定類名的 HTML 元素。類名以 . 開頭。

.intro {
  font-size: 20px;
}

將所有帶有 intro 類的元素的字體大小設置為 20 像素。

HTML 範例：

<p class="intro">這是一個段落。</p>

(3) ID 選擇器 (ID Selector)

選擇具有特定 ID 的 HTML 元素。ID 以 # 開頭，且每個 ID 在一個頁面中必須是唯一的。

#header {
  background-color: grey;
}

HTML 範例：

<h1 id="header">這是標題</h1>

(4) 通用選擇器 (Universal Selector)

選擇所有 HTML 元素，使用 * 符號。

* {
  margin: 0;
  padding: 0;
}

將所有元素的外邊距和內邊距設置為 0。

(5) 後代選擇器 (Descendant Selector)

選擇特定元素內的某些元素，使用空格分隔。

div p {
  color: green;
}

將所有在 <div> 元素內的 <p> 元素設置為綠色。

(6) 子選擇器 (Child Selector)

選擇父元素的直接子元素，使用 > 分隔。

div > p {
  color: blue;
}

將 <div> 的直接子 <p> 元素設置為藍色。

常見的 CSS 屬性

(1) 文字樣式

color: 設置文字顏色。

p {
  color: red;
}

font-size: 設置文字大小。

p {
  font-size: 16px;
}

font-family: 設置文字字體。

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

font-weight: 設置文字的粗細，常見值有 normal 和 bold。

p {
  font-weight: bold;
}

(2) 背景樣式

background-color: 設置背景顏色。

body {
  background-color: lightblue;
}

background-image: 設置背景圖片。

body {
  background-image: url('background.jpg');
}

(3) 邊距和間距

margin: 設置元素的外邊距。

p {
  margin: 20px;
}

padding: 設置元素的內邊距。

p {
  padding: 10px;
}

(4) 邊框

border: 設置元素的邊框，語法為 border: 寬度顏色風格。

p {
  border: 2px solid black;
}

實作：創建帶有 CSS 樣式的簡單網頁

我個人比較喜歡把CSS跟HTML分開，所以基本上我都會把CSS獨立出來。

外部 CSS 文件 (styles.css)：

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

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 18px;
  color: black;
}

.intro {
  font-weight: bold;
}

#footer {
  margin-top: 20px;
  text-align: center;
  color: gray;
}

HTML 文件 (index.html)：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 範例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>歡迎來到我的網站</h1>
  <p class="intro">這是一個簡單的範例。</p>
  <p>使用了 CSS 來改變網頁的外觀。</p>

  <div id="footer">
    <p>這是頁腳</p>
  </div>
</body>
</html>

網頁會呈現下圖：