CSS 菜鳥

CSS（Cascading Style Sheets）是一種用於描述 HTML 或 XML 文檔外觀樣式的語言。CSS 的主要作用是將文檔的表現與內容分離，並使 Web 頁面的布局更加靈活。本文將從多個方面介紹 CSS 菜鳥應該掌握的知識點。

一、選擇器

選擇器是指定要樣式化元素的規則。CSS 選擇器有很多種，下面介紹幾個常見的選擇器。

1. 標籤選擇器

p {
    font-size: 16px;
    color: #333;
}

這段 CSS 代碼表示對所有 <p> 標籤應用字體大小為 16px、顏色為 #333 的樣式。

2. 類選擇器

.red {
    color: red;
}

這段 CSS 代碼表示對具有 class="red" 的元素應用紅色字體顏色。

3. id 選擇器

#header {
    background-color: #eee;
}

這段 CSS 代碼表示對具有 id="header" 的元素應用背景顏色為 #eee。

4. 相鄰兄弟選擇器

h1 + p {
    font-weight: bold;
}

這段 CSS 代碼表示對緊接在 <h1> 後面的 <p> 元素應用粗體樣式。

5. 後代選擇器

article a {
    color: blue;
}

這段 CSS 代碼表示對所有在 <article> 元素中的鏈接應用藍色字體顏色。

二、盒模型

在 CSS 中，每個元素都是一個矩形框，被稱為盒子。盒子由四個部分組成：內容、內邊距、邊框和外邊距。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

這段 CSS 代碼表示一個寬度為 200px、高度為 100px、內邊距為 10px、邊框為 1px 實線灰色邊框和外邊距為 20px 的盒子。

三、布局

布局是 Web 開發中最重要的部分之一，CSS 提供了多種方法來布局頁面。

1. 流式布局

流式布局是指頁面上的元素會根據視口大小自動調整其大小和位置。以下是一個簡單的流式布局示例。

.page {
    width: 80%;
    margin: 0 auto;
}

.item {
    width: 25%;
    float: left;
}

這段 CSS 代碼表示一個寬度為 80% 的頁面容器，內部包括四個寬度為 25% 的元素。

2. 彈性布局

彈性布局是指頁面上的元素可以根據設備屏幕的大小自適應進行布局。以下是一個簡單的彈性布局示例。

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex-basis: calc(33.33% - 30px);
    margin-bottom: 20px;
}

這段 CSS 代碼表示一個彈性容器，內部包括多個寬度相等的元素，並且它們之間的間隔為 30px。

3. 網格布局

網格布局是指頁面上的元素被組織成行和列。以下是一個簡單的網格布局示例。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 100px);
    gap: 20px;
}

.item {
    background-color: #eee;
    padding: 20px;
}

這段 CSS 代碼表示一個網格容器，內部包括 3 列、4 行的矩陣，並且每個單元格之間的間隔為 20px。

四、動畫

CSS 也可以用於創建動態效果，包括過渡和關鍵幀動畫。

1. 過渡

過渡是一種平滑地將一個 CSS 屬性值更改為另一個 CSS 屬性值的方法。以下是一個簡單的過渡示例。

.box:hover {
    background-color: blue;
    transition: background-color 1s ease;
}

這段 CSS 代碼表示當滑鼠懸停在盒子上時，背景顏色從原來的顏色平滑地過渡到藍色，過渡時間為 1 秒。

2. 關鍵幀動畫

關鍵幀動畫是一種定義動畫的重點時刻方法，用於指示在各個時間點應用不同的 CSS 樣式。以下是一個簡單的關鍵幀動畫示例。

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.box {
    animation: rotate 2s linear infinite;
}

這段 CSS 代碼表示一個旋轉動畫，盒子將按順時針方向旋轉 360 度，持續時間為 2 秒，並且無限循環播放。