CSS 基礎教學

1. CSS 是什麼？

CSS（Cascading Style Sheets，層疊樣式表）是一種用來控制 HTML 文件外觀的語言。它可以為網頁提供樣式，如顏色、字型、版面布局等，使網頁更加美觀和符合設計需求。

CSS 與 HTML 的區別

HTML 負責結構和內容，決定了網頁上顯示的文字和圖像。
CSS 則控制這些內容的呈現方式，如字體顏色、大小、排版、邊框等。

例子：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>CSS 範例</title>
    <style>
        h1 {
            color: blue;  /* 設定標題的顏色為藍色 */
        }
        p {
            font-size: 18px;  /* 設定段落文字大小為18像素 */
        }
    </style>
</head>
<body>
    <h1>這是標題</h1>
    <p>這是一段文字。</p>
</body>
</html>

2. CSS 語法

CSS 的基本語法由三個部分組成：選擇器（selector）、屬性（property）、值（value）。

選擇器 {
    屬性: 值;
}

範例：

p {
    color: red;       /* 設定段落文字顏色為紅色 */
    font-size: 16px;  /* 設定段落文字大小為16像素 */
}

選擇器（Selector）：指定要套用樣式的 HTML 元素，例如 p 代表段落元素。
屬性（Property）：要修改的樣式屬性，例如 color 代表文字顏色。
值（Value）：屬性的新值，例如 red 表示紅色。

3. 如何引入 CSS

引入 CSS 有三種常見的方法：

1. 內聯樣式（Inline CSS）

直接在 HTML 標籤的 style 屬性中編寫 CSS。

<p style="color: blue; font-size: 18px;">這是一段文字。</p>

2. 內部樣式（Internal CSS）

在 HTML 文件的 <head> 區塊中使用 <style> 標籤。

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

3. 外部樣式表（External CSS）

將 CSS 寫在獨立的 .css 檔案中，並在 HTML 文件中通過 <link> 標籤引入。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

在 styles.css 文件中：

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

4. 常見的 CSS 屬性

文字樣式

color：設定文字顏色。
```
color: blue;
```
font-size：設定文字大小。
```
font-size: 16px;
```
font-family：設定字體。
```
font-family: Arial, sans-serif;
```
font-weight：設定字體粗細。
```
font-weight: bold;
```

盒模型（Box Model）

CSS 的盒模型定義了網頁元素的大小和間距，包括以下幾個部分：

內容區域（Content）：元素的實際內容，如文字或圖片。
內邊距（Padding）：內容與邊框之間的距離。
邊框（Border）：包圍內容和內邊距的框線。
外邊距（Margin）：元素與其他元素之間的距離。

範例：

div {
    width: 200px;
    padding: 10px;   /* 內邊距 */
    border: 2px solid black;  /* 邊框 */
    margin: 20px;    /* 外邊距 */
}

佈局屬性

display：控制元素的顯示行為。

display: block;   /* 元素獨佔一行 */
display: inline;  /* 元素與其他元素同一行顯示 */

position：設定元素的位置方式。

position: relative;  /* 相對於正常位置 */
position: absolute;  /* 相對於最近的父元素 */

float：讓元素左右浮動。

float: left;   /* 元素向左浮動 */
float: right;  /* 元素向右浮動 */

5. 選擇器（Selectors）

CSS 提供多種選擇器來選取 HTML 元素：

基本選擇器：

元素選擇器：直接選擇元素。
```
h1 {
  color: green;
}
```
類選擇器：選擇擁有特定 class 屬性的元素。
```
.classname {
  background-color: yellow;
}
```
ID 選擇器：選擇擁有特定 ID 的元素，注意 ID 必須是唯一的。
```
#idname {
  font-size: 20px;
}
```

複合選擇器：

群組選擇器：為多個元素應用相同的樣式。
```
h1, p {
  color: red;
}
```
後代選擇器：選擇某元素的所有後代元素。
```
div p {
  color: blue;
}
```
子選擇器：選擇某元素的直接子元素。
```
div > p {
  font-size: 14px;
}
```

6. CSS 層疊和優先級

當多個樣式衝突時，CSS 會根據以下規則來決定哪個樣式優先應用：

重要性：使用 !important 的樣式具有最高優先級。
具體性：ID 選擇器比類選擇器具體，類選擇器又比元素選擇器具體。
來源順序：當具體性相同時，後面定義的樣式會覆蓋前面的樣式。

例子：

p {
    color: red;
}

#myparagraph {
    color: blue;  /* ID 選擇器的優先級更高 */
}

p {
    color: green !important;  /* 使用了 !important，強制應用這個樣式 */
}

在這個例子中，即使有 ID 選擇器，段落的顏色最終會被設為綠色，因為 !important 優先級最高。

總結

CSS 是控制網頁樣式的重要工具。通過理解基本的 CSS 語法、選擇器、屬性，以及運用佈局和盒模型概念，你可以設計出更具吸引力和實用性的網頁。隨著學習深入，還可以探索更進階的 CSS 技術，如 CSS 動畫、Flexbox、Grid 等，這些技術將進一步豐富網頁設計的可能性。

HTML & CSS

CSS 的概念和應用

CSS 基礎教學

1. CSS 是什麼？

CSS 與 HTML 的區別

例子：

2. CSS 語法

範例：

3. 如何引入 CSS

1. 內聯樣式（Inline CSS）

2. 內部樣式（Internal CSS）

3. 外部樣式表（External CSS）

4. 常見的 CSS 屬性

文字樣式

盒模型（Box Model）

範例：

佈局屬性

5. 選擇器（Selectors）

基本選擇器：

複合選擇器：

6. CSS 層疊和優先級

例子：

總結

各種思維/Thinkings

CSS Cheat Sheet 速記表

Leave A Reply 取消回覆

HTML & CSS

CSS 基礎教學

1. CSS 是什麼？

CSS 與 HTML 的區別

例子：

2. CSS 語法

範例：

3. 如何引入 CSS

1. 內聯樣式（Inline CSS）

2. 內部樣式（Internal CSS）

3. 外部樣式表（External CSS）

4. 常見的 CSS 屬性

文字樣式

盒模型（Box Model）

範例：

佈局屬性

5. 選擇器（Selectors）

基本選擇器：

複合選擇器：

6. CSS 層疊和優先級

例子：

總結

You may also like

Leave A Reply 取消回覆

Login with your site account