CSS 从入门到精通

CSS 从入门到精通

1. CSS 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页样式和布局的语言。它可以用于设置颜色、字体、间距、布局等，使网页更加美观和用户友好。

2. CSS 语法

CSS 由 选择器 和 声明块 组成。

选择器 {
    属性: 值;
}

示例：

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

3. CSS 选择器

3.1 基本选择器

• 元素选择器：p { color: blue; }
• 类选择器：.class-name { color: green; }
• ID 选择器：#id-name { font-size: 20px; }

3.2 组合选择器

• 后代选择器：div p {}
• 子选择器：div > p {}
• 相邻兄弟选择器：h1 + p {}
• 通用兄弟选择器：h1 ~ p {}

4. CSS 盒模型

盒模型包括：

• 内容（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

示例：

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

5. CSS 布局

5.1 Flexbox 布局

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

5.2 Grid 布局

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

6. CSS 动画

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: move 2s infinite;
}

7. 响应式设计

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

8. 结语

通过本教程，你可以掌握 CSS 的基础和进阶技巧，提升网页设计能力！