初學者必看 CSS 基礎入門指南

作者:
20241007081448 34

文章最後更新於 2024 年 10 月 7 日

1. CSS 基礎概念

什麼是 CSS？

CSS，全名為層疊樣式表（Cascading Style Sheets），是一種用於描述 HTML 文件的呈現樣式的語言。它讓開發者能夠控制網頁的外觀和佈局，獨立於內容本身。CSS 提供了對字體、顏色、邊距、佈局等各種屬性的控制，使得開發者能更靈活地設計用戶界面。

CSS 的歷史與發展

  • 起源與演進：CSS 於 1996 年首次發佈，旨在解決 HTML 中樣式設置的靈活性不足問題。隨著網頁技術的發展，CSS 也不斷演進。
  • 主要版本：
    • CSS1：提供了基本的樣式設置功能。
    • CSS2：引入了更強大的選擇器和佈局模型，支持媒體查詢。
    • CSS3：進一步擴展了功能，新增了動畫、過渡、彈性佈局及網格佈局等特性。

CSS 的基本語法

CSS 語法由選擇器、屬性和屬性值組成。基本結構如下：

selector {
    property: value;
}
  • 選擇器（Selectors）：選擇要應用樣式的 HTML 元素。
  • 屬性（Properties）：定義所要設置的樣式特徵。
  • 值（Values）：指定屬性應該採用的具體值。

例如：

h1 {
    color: blue;
    font-size: 24px;
}

上面的代碼將所有 <h1> 標題的顏色設為藍色，字體大小設為 24 像素。

2. CSS 選擇器

基本選擇器

  1. 元素選擇器：選擇所有指定的 HTML 標籤。 
    p {
   color: red;
}
  2. 類別選擇器：選擇所有擁有特定類別的元素，類別前面加 .。 
    .example {
   font-weight: bold;
}
  3. ID 選擇器：選擇具有特定 ID 的元素，ID 前面加 #。 
    #unique {
   background-color: yellow;
}

組合選擇器

  • 後代選擇器：選擇某元素下的所有指定後代元素。 
    div p {
  margin: 10px;
}
  • 相鄰兄弟選擇器：選擇緊接在指定元素後的兄弟元素。 
    h1 + p {
  color: green;
}

偽類與偽元素

  • 偽類：用於指定元素的特定狀態。 
    a:hover {
  text-decoration: underline;
}
  • 偽元素：用於選擇元素的一部分。 
    p::first-line {
  font-weight: bold;
}

3. CSS 佈局模型

盒子模型（Box Model）

CSS 的佈局依賴於所謂的盒子模型。每個 HTML 元素都可以被視為一個盒子，這個盒子包含：

  • 內容：實際的內容，如文本或圖片。
  • 內邊距（padding）：內容與邊框之間的空間。
  • 邊框（border）：圍繞元素的邊框。
  • 外邊距（margin）：元素與其他元素之間的空間。
屬性 描述
content 實際內容
padding 內容與邊框之間的距離
border 元素的邊框
margin 元素與其他元素之間的距離

佈局技術

  1. 流式佈局（Flow Layout）：元素按照文檔流的順序排列。
  2. 彈性佈局（Flexbox）：允許更靈活的佈局，適用於一維佈局。 
    .container {
   display: flex;
   justify-content: space-between;
}
  3. 網格佈局（Grid Layout）：提供二維佈局的功能。 
    .grid-container {
   display: grid;
   grid-template-columns: auto auto auto;
}

定位方式

  • 靜態定位（Static）：默認定位方式，元素按照文檔流排列。
  • 相對定位（Relative）：元素相對於其正常位置進行偏移。
  • 絕對定位（Absolute）：元素相對於最近的已定位父元素進行定位。
  • 固定定位（Fixed）：元素相對於視窗進行定位，滾動時不會移動。

4. CSS 顏色與字體

顏色表示法

CSS 支持多種顏色表示法：

  • 名稱顏色：如 red, blue, green。
  • 十六進制顏色：如 #ff0000。
  • RGB：如 rgb(255, 0, 0)。
  • RGBA：添加透明度，如 rgba(255, 0, 0, 0.5)。
  • HSL：如 hsl(0, 100%, 50%)。

字體屬性

  • 字體系列（font-family）：如 font-family: Arial, sans-serif;。
  • 字體大小（font-size）：如 font-size: 16px;。
  • 字體樣式（font-style）：如 font-style: italic;。

文字樣式

  • 文字顏色（color）：設定文本顏色。
  • 行高（line-height）：控制文本行間距。
  • 字間距（letter-spacing）：控制字母之間的距離。
h1 {
    color: #333;
    font-size: 24px;
    line-height: 1.5;
}

5. CSS 響應式設計

媒體查詢（Media Queries）

媒體查詢用於根據不同設備的特性應用不同的樣式。

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

流式佈局與相對單位

使用百分比（%）、視口單位（vw, vh）來創建自適應佈局。

.container {
    width: 100%;
    height: 100vh;
}

響應式圖片與視頻

使用 CSS 的 max-width 屬性來確保媒體元素不會超過其容器的寬度。

img {
    max-width: 100%;
    height: auto;
}

6. CSS 實用工具與資源

CSS 預處理器

  • SASS：提供變數、嵌套和混合等功能，讓 CSS 更具可維護性。
  • LESS：類似於 SASS，但語法稍有不同。

CSS 框架

  • Bootstrap：提供一套完整的前端開發工具，快速構建響應式網站。
  • Tailwind CSS：基於實用類別的框架，提供靈活的樣式設置。

在線資源

這篇文章提供了 CSS 的基本概念及其應用，幫助新手快速入門。隨著技術的演進，持續學習與實踐將是掌握 CSS 的關鍵。

關於作者

Carger
Carger
我是Oscar (卡哥)，前Yahoo Lead Engineer、高智商同好組織Mensa會員，超過十年的工作經驗，服務過Yahoo關鍵字廣告業務部門、電子商務及搜尋部門，喜歡彈吉他玩音樂，也喜歡投資美股、虛擬貨幣，樂於與人分享交流！