CSS 教程

一、CSS 簡介

CSS（Cascading Style Sheets）是一種用於描述 HTML 頁面樣式的語言。在 Web 開發中，CSS 通常用於控制網頁的布局、字體、顏色和大小等方面。

CSS 分為內部樣式表、外部樣式表和行內樣式表。內部樣式表是將樣式寫在 HTML 頁面的 head 標籤中，外部樣式表是單獨創建一個 CSS 文件，而行內樣式表直接寫在 HTML 元素內

CSS 是層疊的，就是說一個屬性可以有多個定義，最終生效的是處於優先順序最高的定義。CSS 的優先順序是：!important > 行內樣式 > ID 選擇器 > 類選擇器和偽類選擇器 > 元素選擇器 > 通配符選擇器和組合選擇器。

二、基礎語法

CSS 語法由選擇器和聲明塊組成。選擇器用於選擇要應用樣式的 HTML 元素，而聲明塊則包含一些屬性和值，用分號分隔。

例如：

h1 {
    color: red;
    font-size: 36px;
}

上面的例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 36px 是屬性的取值。

三、選擇器

CSS 選擇器用於選擇要應用樣式的 HTML 元素。常見的選擇器有：

• 元素選擇器：針對 HTML 元素的類型進行選擇，如 div、p、a 等。
• ID 選擇器：選取具有特定 ID 屬性值的元素，如 #header。
• 類選擇器：選取具有特定類名的元素，如 .intro。
• 後代選擇器：選取某個元素內部的另一個元素，如 ul li。
• 偽類選擇器：選取特定狀態下的元素，如 :hover、:visited、:first-child。

四、常用屬性

CSS 有很多屬性可供使用，這裡介紹幾個常用的屬性。

1. color

color 屬性用於設置文本顏色。可以使用顏色名稱、RGB 值、十六進位值等來表示顏色。

h1 {
    color: red; /*使用顏色名稱*/
    color: rgb(255, 0, 0); /*使用 RGB 值*/
    color: #ff0000; /*使用十六進位值*/
}

2. font-size

font-size 屬性用於設置字體大小。

p {
    font-size: 18px;
}

3. background

background 屬性用於設置背景顏色或背景圖片。可以同時設置多個屬性值，以逗號分隔。

body {
    background-color: #f0f0f0; /*設置背景顏色*/
    background-image: url(bg.jpg); /*設置背景圖片*/
}

4. margin 和 padding

margin 和 padding 屬性用於設置元素的外邊框和內邊框。它們可以設置四個方向的值（上、右、下、左），也可以分開設置。

p {
    margin: 20px; /*四個方向都設置為 20px*/
    padding-top: 10px; /*上邊距為 10px，其他方向為默認值（0）*/
    padding: 10px 20px; /*上下邊距為 10px，左右邊距為 20px*/
    padding: 10px 20px 30px 40px; /*分別設置上右下左邊距*/
}

五、響應式布局

響應式布局是指網頁可以根據不同的設備和屏幕尺寸自適應地顯示。在 CSS 中，可以使用 @media 查詢來實現響應式布局。

例如：

@media screen and (max-width: 768px) {
    /*當屏幕寬度小於 768px 時*/
    body {
        font-size: 16px; /*設置字體大小為 16px*/
    }
    .wrapper {
        width: 90%; /*設置寬度為 90%*/
    }
}

六、CSS 預處理器

CSS 預處理器是指將類似於編程語言的語法，如變數、函數、條件語句等，引入到 CSS 中。常見的 CSS 預處理器有 Sass、Less 和 Stylus 等。

例如，使用 Sass 來定義變數：

$primary-color: #337ab7;
$secondary-color: #5cb85c;

h1 {
  color: $primary-color;
}

p {
  color: $secondary-color;
}

七、CSS 框架

CSS 框架是指封裝好的 CSS 樣式庫，可以快速搭建網頁布局和樣式。常見的 CSS 框架有 Bootstrap、Foundation 和 Bulma 等。

例如，使用 Bootstrap 創建導航欄：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

八、總結

本篇文章介紹了 CSS 的基礎語法、選擇器、常用屬性、響應式布局、CSS 預處理器和 CSS 框架。掌握了這些知識，可以快速地創建優美、響應式的網頁。