CSS 教程

纯干货教学，从零开始学习 CSS

欢迎学习 CSS

CSS（Cascading Style Sheets）是用于控制网页样式和布局的语言。本教程将为您提供 CSS 的全面指导，从基础到高级，帮助您快速掌握 CSS 技能。

🎯 开始您的 CSS 学习之旅

无论您是完全的初学者还是有经验的开发者，本教程都将帮助您掌握 CSS 的核心概念和实践技能。

📚 学习路径

基础入门

适合完全的初学者，从最基础的概念开始学习

开始学习

进阶技巧

适合有一定基础的学习者，学习更高级的 CSS 特性

查看内容

实用工具

使用我们的实用工具，加速您的学习和开发过程

探索工具

什么是 CSS？

CSS（Cascading Style Sheets）是一种样式表语言，用于描述 HTML 或 XML 文档的呈现方式。它控制网页的布局、颜色、字体、间距等视觉效果，使网页更加美观和专业。

CSS 允许将样式与内容分离，使网页结构更加清晰，同时提高代码的可维护性。

/* CSS 基本语法 */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

p {
    color: #333;
    line-height: 1.6;
}

CSS 的历史发展

CSS 由 Håkon Wium Lie 和 Bert Bos 在 1994 年提出，其发展历程如下：

  • CSS 1.0（1996）：第一个官方版本，包含基本的样式属性
  • CSS 2.0（1998）：添加了更复杂的布局功能，如浮动和定位
  • CSS 2.1（2004）：CSS 2.0 的修订版，解决了一些问题并添加了新特性
  • CSS 3（2011 至今）：分为多个模块发布，添加了大量新特性，如圆角、阴影、渐变等

CSS 的版本演变

CSS3 是目前最新的版本，它引入了许多新特性，使网页开发更加灵活和强大：

  • 圆角：border-radius 属性
  • 阴影：box-shadow 和 text-shadow 属性
  • 渐变：linear-gradient 和 radial-gradient 函数
  • 动画：@keyframes 规则和 animation 属性
  • 过渡：transition 属性
  • 弹性布局：Flexbox
  • 网格布局：Grid
  • 变量：自定义属性（--变量名）
  • 媒体查询：@media 规则，用于响应式设计

为什么学习 CSS？

  • CSS 是 Web 开发的核心技术：与 HTML 和 JavaScript 一起构成了前端开发的三大支柱
  • CSS 使网页更加美观：通过 CSS，您可以创建视觉吸引力强、用户体验好的网页
  • CSS 实现响应式设计：使用 CSS 媒体查询，您可以创建适应不同屏幕尺寸的网站
  • CSS 提高开发效率：通过样式复用和继承特性，可以大大提高开发效率
  • CSS 是前端开发的必备技能：无论是成为前端开发者、全栈开发者还是内容创作者，CSS 都是必备的基础知识
  • CSS 有广泛的应用场景：除了网站开发，CSS 还用于移动应用界面、电子邮件模板、电子书等领域
  • CSS 不断发展：CSS 标准不断更新，新特性不断推出，学习 CSS 可以跟上 Web 开发的最新趋势

CSS 的应用场景

  • 网站开发：为网站添加样式和布局
  • 移动应用：使用 CSS 设计移动应用界面
  • 电子邮件模板：创建格式化的电子邮件
  • 响应式设计：适配不同设备的屏幕尺寸
  • 动画效果：创建平滑的过渡和动画
  • 用户界面设计：设计直观、美观的用户界面
  • 游戏开发：使用 CSS 动画和变换创建简单的网页游戏
  • 数据可视化：配合其他技术创建交互式数据图表

CSS 快速入门

下面是一个完整的 CSS 示例，展示了如何使用 CSS 美化 HTML 页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 示例</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #4a6fa5, #6b8cce);
            color: white;
            padding: 60px 0;
            text-align: center;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        /* 导航样式 */
        nav {
            background-color: #333;
            padding: 15px 0;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        nav ul li a:hover {
            background-color: #555;
        }
        
        /* 主内容样式 */
        main {
            padding: 40px 0;
        }
        
        section {
            background-color: white;
            padding: 30px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        section h2 {
            color: #4a6fa5;
            margin-bottom: 20px;
            border-bottom: 2px solid #4a6fa5;
            padding-bottom: 10px;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4a6fa5;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        .btn:hover {
            background-color: #3a5a85;
        }
        
        /* 卡片样式 */
        .card {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        /* 页脚样式 */
        footer {
            background-color: #333;
            color: white;
            padding: 30px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>欢迎来到我的网站</h1>
            <p>这是一个使用 CSS 美化的网页示例</p>
        </div>
    </header>
    
    <nav>
        <div class="container">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">我们的服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </div>
    </nav>
    
    <main>
        <div class="container">
            <section id="home">
                <h2>首页内容</h2>
                <p>这是首页的内容部分。通过 CSS，我们可以创建美观的网页布局和样式。</p>
                <a href="#about" class="btn">了解更多</a>
            </section>
            
            <section id="about">
                <h2>关于我们</h2>
                <p>我们是一家专注于 Web 开发的公司，提供高质量的网站设计和开发服务。</p>
                <div class="card">
                    <h3>我们的使命</h3>
                    <p>通过技术创新，为客户创造价值，推动 Web 开发行业的发展。</p>
                </div>
            </section>
            
            <section id="services">
                <h2>我们的服务</h2>
                <div class="card">
                    <h3>网站设计与开发</h3>
                    <p>创建美观、功能强大的网站，满足客户的业务需求。</p>
                </div>
                <div class="card">
                    <h3>移动应用开发</h3>
                    <p>开发跨平台的移动应用，为用户提供良好的移动体验。</p>
                </div>
                <div class="card">
                    <h3>电子商务解决方案</h3>
                    <p>构建安全、可靠的电子商务平台，帮助客户开展在线业务。</p>
                </div>
            </section>
            
            <section id="contact">
                <h2>联系我们</h2>
                <p>如果您有任何问题或需求，请随时联系我们。</p>
                <a href="mailto:info@example.com" class="btn">发送邮件</a>
            </section>
        </div>
    </main>
    
    <footer>
        <div class="container">
            <p>&copy; 2026 我的网站. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>

CSS 常用属性

属性 描述 示例
color 设置文本颜色 color: #333;
font-size 设置字体大小 font-size: 16px;
font-family 设置字体系列 font-family: Arial, sans-serif;
background-color 设置背景颜色 background-color: #f5f5f5;
margin 设置外边距 margin: 10px;
padding 设置内边距 padding: 15px;
border 设置边框 border: 1px solid #ddd;
border-radius 设置圆角 border-radius: 8px;
box-shadow 设置阴影 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display 设置显示方式 display: flex;
flex 设置弹性布局属性 flex: 1;
grid 设置网格布局属性 display: grid;
position 设置定位方式 position: relative;
top, right, bottom, left 设置定位偏移 top: 10px;
z-index 设置堆叠顺序 z-index: 100;
transition 设置过渡效果 transition: all 0.3s ease;
animation 设置动画效果 animation: fadeIn 1s ease;

CSS 与其他技术的关系

CSS、HTML 和 JavaScript 的关系

CSS、HTML 和 JavaScript 是构建现代网页的三大核心技术，它们各自负责不同的功能：

技术 功能 作用
HTML 超文本标记语言 提供网页的结构和内容
CSS 层叠样式表 控制网页的外观和样式
JavaScript 脚本语言 添加交互功能和动态效果

CSS 预处理器

CSS 预处理器是一种扩展 CSS 功能的工具，它们添加了一些 CSS 本身不具备的特性，如变量、嵌套、混合等。常见的 CSS 预处理器包括：

  • Sass：最流行的 CSS 预处理器之一，提供了丰富的功能
  • Less：由 JavaScript 编写的 CSS 预处理器
  • Stylus：语法灵活的 CSS 预处理器

CSS 框架

CSS 框架是一组预先编写好的 CSS 代码，提供了常用的样式和组件，可以加速开发过程。常见的 CSS 框架包括：

  • Bootstrap：最流行的 CSS 框架之一，提供了丰富的组件和工具
  • Tailwind CSS：实用优先的 CSS 框架，使用 utility classes
  • Foundation：响应式前端框架
  • Bulma：基于 Flexbox 的 CSS 框架

教程目录