第一講：CSS簡介

歡迎來到《從基礎到輝煌》第一講－你的 CSS 掌握之旅從這裡開始！

CSS是什麼？

CSS，即層疊樣式表，是用來描述網頁呈現的語言。 HTML 提供結構和內容，而 CSS 則使網頁看起來有吸引力且用戶友好。它控制佈局、顏色、字體、間距等等。

為什麼 CSS 很重要？

• 關注點分離： CSS 可讓您將內容 (HTML) 與表示 (CSS) 分開，使您的程式碼更乾淨且更易於維護。
• 一致性：您可以透過連結單一 CSS 檔案在多個網頁上套用一致的樣式。
• 響應式設計：CSS 對於創建在從桌上型電腦到智慧型手機的所有裝置上看起來都不錯的網站至關重要。

基本 CSS 文法

CSS 由針對 HTML 元素的規則所組成。每個規則由一個選擇器和一個聲明區塊組成。

selector {
  property: value;
}

• 選擇器： 定位您想要設定樣式的 HTML 元素。
• 屬性： 要變更的元素的外觀（例如顏色、字體大小）。
• 值：您要套用於屬性的具體值。

例子：

假設您要將所有

元素的顏色變更為藍色。

HTML:

Hello, World!

CSS:

h1 {
  color: blue;
}

這個簡單的規則會將所有

元素中的文字變成藍色。

將 CSS 加入 HTML

將 CSS 加入 HTML 文件有三種主要方法：

1. 內嵌CSS：直接在HTML元素中。

   
Hello, World!

1. 內部 CSS： HTML 文件 部分的

1. 外部 CSS： 從 HTML 文件連結到外部 CSS 檔案。

styles.css:

   h1 {
     color: blue;
   }

練習

• 建立一個包含一些不同元素的 HTML 文件，例如

  、

  和

  。
• 使用所有三種方法對這些元素應用不同的顏色、字體大小和背景顏色：內聯、內部和外部 CSS。
• 嘗試不同的屬性，看看它們如何影響元素的外觀。

---

下一步： 在下一講中，我們將深入研究 選擇器和屬性，並學習如何定位網頁上的不同元素並設定其樣式。敬請關注！

---

第一講介紹 CSS 的基礎知識，解釋它是什麼、為什麼它很重要以及如何寫簡單的 CSS 規則。提供的範例很容易理解，練習鼓勵學生自己練習和探索。

在 LinkedIn 上關注我

裡多伊‧哈桑