CSS3 簡介

基礎選擇器與屬性

元素選擇器

p {
    color: blue;
    font-size: 16px;
}

• 選擇所有 <p> 元素並設定文字顏色和大小。

類別與 ID 選擇器

.header {
    background-color: #f2f2f2;
    padding: 20px;
}

#mainContent {
    margin: 10px;
    padding: 15px;
}

• .header 選擇所有帶有 class="header" 的元素。
• #mainContent 選擇帶有 id="mainContent" 的元素。

布局與定位

Flexbox

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

- .container 元素將會以 Flexbox 布局展示其子元素。 - justify-content: space-between; 確保子元素在容器中平均分布。

Grid

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

• .grid-container 將有三列等寬的網格。
• gap: 10px; 設置網格間距。

響應式設計

媒體查詢

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

• 當螢幕寬度小於或等於 600px 時，.column 的寬度將變為 100%。

字體與圖像調整

body {
    font-family: Arial, sans-serif;
}

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

• 網頁使用 Arial 字體，並在無法使用時回退到系統的 sans-serif 字體。
• 圖像將根據容器大小調整其寬度。

實戰練習

1. 建立一個響應式導航欄：使用 Flexbox 創建一個水平導航欄，並在小屏幕上轉為垂直布局。
2. 製作一個網格佈局的相冊：使用 Grid 布局顯示多列圖像。
3. 媒體查詢練習：創建一個響應式網頁，其在不同螢幕尺寸下展示不同的佈局或樣式。