CSS二哥 - 詳細教學 | 網頁三兄弟

🎯 CSS二哥是誰？

🎨 美術設計師

CSS就像美術設計師，負責讓HTML搭建的骨架變得美觀。顏色、字體、排版、動畫，全都是CSS的工作！

📐 樣式表語言

CSS用「選擇器」找到HTML元素，然後用「屬性」來設定樣式。就像用畫筆在畫布上作畫一樣！

✨ 視覺體驗

好的CSS不只是好看，還要考慮使用者體驗、響應式設計、載入速度等因素。

📝 CSS基本語法

/* CSS語法結構 */
選擇器 {
    屬性: 值;
    屬性: 值;
}

/* 實際範例 */
h1 {
    color: blue;           /* 文字顏色 */
    font-size: 24px;       /* 字體大小 */
    text-align: center;    /* 文字對齊 */
}

這就是CSS的效果！

🎯 CSS選擇器大全

選擇器就像CSS的魔法咒語，用來指定要美化哪些HTML元素：

h1 { }

標籤選擇器 - 選取所有h1標籤

.class-name { }

類別選擇器 - 選取有特定class的元素

#id-name { }

ID選擇器 - 選取特定id的元素

p, h1 { }

群組選擇器 - 同時選取多種標籤

div p { }

後代選擇器 - 選取div內的p標籤

a:hover { }

偽類選擇器 - 滑鼠移過時的樣式

🎯 選擇器實戰範例

/* HTML */
<div class="container">
    <h1 id="main-title">標題</h1>
    <p class="intro">介紹段落</p>
    <p>一般段落</p>
</div>

/* CSS */
#main-title {
    color: #3498db;
    font-size: 2rem;
}

.intro {
    font-weight: bold;
    color: #2c3e50;
}

.container p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.container p:hover {
    background-color: #f8f9fa;
}

🎨 常用樣式屬性

🌈 顏色與背景

#e74c3c

#3498db

#2ecc71

#f39c12

#9b59b6

#1abc9c

/* 顏色設定方式 */
.text-color {
    color: #3498db;                    /* 16進位顏色 */
    color: rgb(52, 152, 219);          /* RGB值 */
    color: rgba(52, 152, 219, 0.8);    /* RGBA (含透明度) */
    color: hsl(204, 70%, 53%);         /* HSL值 */
}

/* 背景設定 */
.background-style {
    background-color: #f8f9fa;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

📝 文字樣式

.text-styling {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    text-decoration: underline;
    line-height: 1.6;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

這是文字樣式範例

📦 盒子模型 (Box Model)

.box-model-demo {
    width: 200px;           /* 內容寬度 */
    height: 100px;          /* 內容高度 */
    padding: 20px;          /* 內邊距 */
    border: 2px solid #3498db;  /* 邊框 */
    margin: 10px;           /* 外邊距 */
    
    /* 邊框圓角 */
    border-radius: 10px;
    
    /* 陰影效果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

盒子模型

✨ 特效與動畫

🎭 變形效果 (Transform)

.transform-demo {
    transform: rotate(45deg);        /* 旋轉 */
    transform: scale(1.2);           /* 縮放 */
    transform: translate(50px, 100px); /* 移動 */
    transform: skew(20deg, 10deg);   /* 傾斜 */
    
    /* 組合變形 */
    transform: rotate(10deg) scale(1.1) translate(20px, 0);
}

🎯 試試看特效！

滑鼠移過來

彈跳動畫

漸層動畫

🎬 CSS動畫

/* 定義動畫 */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 使用動畫 */
.animated-element {
    animation: slideIn 1s ease-in-out;
}

/* 過渡效果 */
.smooth-transition {
    transition: all 0.3s ease;
}

.smooth-transition:hover {
    background-color: #3498db;
    transform: scale(1.05);
}

📱 響應式設計

/* 媒體查詢 - 讓網頁在不同裝置上都好看 */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
}

💡 CSS二哥的設計原則

🎨 視覺層次

用大小區分重要性
善用顏色對比
保持視覺平衡
建立一致的風格

⚡ 效能優化

避免過度使用陰影
合理使用動畫
優化CSS檔案大小
減少重複樣式

📱 使用者體驗

響應式設計
適當的字體大小
清楚的互動反饋
無障礙設計考量

🎯 實作挑戰

🎨 挑戰：製作一個美麗的卡片

使用CSS製作一個具有陰影、圓角、漸層背景的卡片：

.beautiful-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s ease;
}

.beautiful-card:hover {
    transform: translateY(-5px);
}

✨ 美麗的卡片

這是用CSS製作的漂亮卡片，具有漸層背景、陰影效果和懸停動畫！

🎨 CSS二哥的美術課堂