CSS 教程¶

CSS（Cascading Style Sheets）用于设置网页的样式，控制网页的布局、颜色、字体等视觉效果。本教程将带你学习 CSS 的核心概念和用法。

第一章：CSS 基础¶

（一）CSS 简介¶

什么是 CSS？ CSS 是一种样式表语言，用于描述 HTML 元素的显示方式。它可以控制网页的布局、颜色、字体、大小等视觉效果。

CSS 的特点： - 层叠样式：多个样式可以作用于同一个元素 - 分离关注点：将样式与内容分离 - 提高可维护性：集中管理样式 - 提高网页性能：减少代码重复

（二）CSS 引入方式¶

内联样式：

<p style="color: red; font-size: 18px;">这是红色文本</p>

内部样式：

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

外部样式：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css：

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

第二章：CSS 选择器¶

（一）基本选择器¶

元素选择器：

p {
    color: black;
}

类选择器：

.highlight {
    background-color: yellow;
}

ID 选择器：

#header {
    background-color: navy;
}

通用选择器：

* {
    margin: 0;
    padding: 0;
}

（二）组合选择器¶

后代选择器：

div p {
    color: blue;
}

子元素选择器：

div > p {
    color: green;
}

相邻兄弟选择器：

h2 + p {
    color: red;
}

属性选择器：

input[type="text"] {
    border: 1px solid #ccc;
}

伪类选择器：

a:hover {
    color: red;
}

第三章：CSS 常用属性¶

（一）文本样式¶

.text-style {
    color: #333;              /* 颜色 */
    font-size: 16px;          /* 字体大小 */
    font-weight: bold;        /* 字体粗细 */
    font-style: italic;       /* 字体样式 */
    text-align: center;       /* 文本对齐 */
    text-decoration: none;    /* 文本装饰 */
    line-height: 1.5;         /* 行高 */
    letter-spacing: 2px;      /* 字间距 */
    text-transform: uppercase; /* 文本转换 */
}

（二）盒模型¶

.box {
    width: 200px;
    height: 100px;
    padding: 20px;      /* 内边距 */
    border: 1px solid #ccc;  /* 边框 */
    margin: 10px;       /* 外边距 */
}

/* box-sizing: border-box 使 padding 和 border 包含在 width 和 height 内 */
* {
    box-sizing: border-box;
}

（三）布局样式¶

Flexbox 布局：

.flex-container {
    display: flex;
    justify-content: center;      /* 主轴对齐 */
    align-items: center;          /* 交叉轴对齐 */
    flex-direction: row;          /* 主轴方向 */
    flex-wrap: wrap;              /* 换行 */
}

.flex-item {
    flex: 1;  /* 等分空间 */
}

Grid 布局：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 三列等宽 */
    grid-gap: 20px;                      /* 网格间距 */
}

.grid-item {
    grid-column: span 2;  /* 跨越2列 */
    grid-row: span 1;     /* 跨越1行 */
}

第四章：CSS3 新特性¶

（一）CSS 变量¶

/* 定义变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing-unit: 8px;
    --border-radius: 4px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* 暗色模式 */
[data-theme="dark"] {
    --primary-color: #5dade2;
    --secondary-color: #58d68d;
}

（二）过渡和动画¶

/* 过渡 */
.transition-effect {
    transition: all 0.3s ease;
}

.transition-effect:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 关键帧动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.pulse {
    animation: pulse 2s infinite;
}

（三）响应式设计¶

/* 基础断点 */
@media screen and (max-width: 576px) {
    /* 移动端 */
    body {
        font-size: 14px;
    }
    .container {
        width: 100%;
        padding: 10px;
    }
    .sidebar {
        display: none;
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    /* 平板端 */
    .container {
        width: 95%;
    }
    .sidebar {
        width: 30%;
    }
}

@media screen and (min-width: 769px) {
    /* 桌面端 */
    .container {
        width: 80%;
        max-width: 1200px;
        margin: 0 auto;
    }
}

（四）Flexbox 高级用法¶

/* 导航栏布局 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #333;
    color: white;
}

.nav-links {
    display: flex;
    gap: 20px;
}

/* 圣杯布局 */
.holy-grail {
    display: flex;
    min-height: 100vh;
}

.holy-grail .content {
    flex: 1;
}

.holy-grail .sidebar-left {
    width: 200px;
    order: -1;
}

.holy-grail .sidebar-right {
    width: 200px;
}

（五）Grid 高级用法¶

/* 响应式网格 */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* 网格命名区域 */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

（六）变换¶

/* 2D 变换 */
.rotate {
    transform: rotate(45deg);
}

.scale {
    transform: scale(1.2);
}

.translate {
    transform: translate(20px, 10px);
}

.skew {
    transform: skew(10deg, 5deg);
}

/* 3D 变换 */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-3d:hover {
    transform: rotateY(180deg);
}

（七）滤镜¶

/* 常用滤镜 */
.image-blur {
    filter: blur(5px);
}

.image-grayscale {
    filter: grayscale(100%);
}

.image-brightness {
    filter: brightness(150%);
}

.image-contrast {
    filter: contrast(200%);
}

/* 鼠标悬停效果 */
.avatar {
    border-radius: 50%;
    transition: filter 0.3s;
}

.avatar:hover {
    filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.8));
}

第五章：实战案例¶

（一）响应式导航栏¶

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #3498db;
            --dark: #2c3e50;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background-color: var(--dark);
            color: white;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 3px 0;
            transition: all 0.3s;
        }

        @media screen and (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                flex-direction: column;
                background-color: var(--dark);
                padding: 1rem;
            }

            .nav-links.active {
                display: flex;
            }

            .hamburger {
                display: flex;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">信奥编程</div>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">教程</a></li>
            <li><a href="#">实战</a></li>
            <li><a href="#">关于</a></li>
        </ul>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</body>
</html>

（二）卡片网格布局¶

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.card-text {
    color: #666;
    line-height: 1.6;
}

（三）表单样式¶

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.form-input::placeholder {
    color: #aaa;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background-color: #3498db;
    color: white;
}

.btn-primary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

第六章：练习题目¶

基础练习¶

为页面添加样式
为标题、段落、链接添加样式
设置字体、颜色、大小等
创建导航栏
使用 Flexbox 布局
添加悬停效果
创建卡片布局
使用 Grid 布局
添加阴影和圆角

进阶练习¶

创建响应式页面
使用媒体查询
适配不同屏幕尺寸
添加动画效果
使用 CSS 动画
添加过渡效果
创建主题切换
使用 CSS 变量
实现深色/浅色主题

综合练习¶

创建完整的个人网站
包含导航栏、内容区、页脚
使用响应式设计
创建产品展示页面
使用 Grid 布局
添加悬停效果
创建登录页面
使用 Flexbox 居中
添加表单样式

恭喜你完成了 CSS 教程的学习！继续学习 JavaScript，掌握更多前端开发知识！

基础练习¶

为页面添加样式
为标题、段落、链接添加样式
设置字体、颜色、大小等
创建导航栏
使用 Flexbox 布局
添加悬停效果
创建卡片布局
使用 Grid 布局
添加阴影和圆角

进阶练习¶

创建响应式页面
使用媒体查询
适配不同屏幕尺寸
添加动画效果
使用 CSS 动画
添加过渡效果
创建主题切换
使用 CSS 变量
实现深色/浅色主题

综合练习¶

创建完整的个人网站
包含导航栏、内容区、页脚
使用响应式设计
创建产品展示页面
使用 Grid 布局
添加悬停效果
创建登录页面
使用 Flexbox 居中
添加表单样式

恭喜你完成了 CSS 教程的学习！继续学习 JavaScript，掌握更多前端开发知识！