HTML/CSS 基礎

Jia-Yin2025年2月26日大约 1 分鐘

🎯 學習內容：

學習 HTML 和 CSS 的基本概念與作用
學習在 HTML 中使用 CSS 的三種方式：行內（Inline）、內嵌（Internal）、外部（External）

1. HTML 與 CSS 基本概念

HTML (HyperText Markup Language)：用於定義網頁的結構與內容，如文字、圖片、連結等。
CSS (Cascading Style Sheets)：用於控制網頁的外觀與樣式，如顏色、字體、排版等。

2. 在 HTML 中使用 CSS 的三種方式

2.1 行內 (Inline) 樣式

直接在 HTML 標籤內使用 style 屬性進行設置，通常用於單一元素的樣式調整。
範例：

<p style="color: blue; font-size: 20px;">這是一段藍色且較大的文字。</p>

2.2 內嵌 (Internal) 樣式

使用 <style> 標籤將 CSS 寫在 <head> 區塊中，適用於單一網頁內的樣式設置。
範例：

<!DOCTYPE html>
<html>
<head>
    <title>內嵌樣式範例</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>這是一個標題</h1>
    <p>這是一段文字，使用了內嵌樣式。</p>
</body>
</html>

2.3 外部 (External) 樣式

將 CSS 寫在獨立的 .css 文件中，並透過 <link> 標籤引入，適用於多個網頁共用樣式。
範例：

建立 styles.css：

body {
    background-color: #f4f4f9;
    font-family: 'Helvetica', sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.5;
}

在 HTML 中引入：

<!DOCTYPE html>
<html>
<head>
    <title>外部樣式範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>外部樣式範例</h1>
    <p>這是一段文字，應用於外部樣式。</p>
</body>
</html>