CSS 教程

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

欢迎学习 CSS

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

🎯 开始您的 CSS 学习之旅

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

📚 学习路径

基础入门

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

开始学习

进阶技巧

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

查看内容

实用工具

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

探索工具

什么是 CSS？

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

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

/* CSS 基本语法 */
/* 选择器：h1 标签选择器，选中所有的 h1 元素 */
h1 {
    color: blue; /* 设置文本颜色为蓝色 */
    font-size: 24px; /* 设置字体大小为 24 像素 */
    text-align: center; /* 设置文本对齐方式为居中 */
}

/* 选择器：p 标签选择器，选中所有的 p 元素 */
p {
    color: #333; /* 设置文本颜色为深灰色（十六进制颜色值） */
    line-height: 1.6; /* 设置行高为 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 { /* body 选择器，设置整个页面的基本样式 */
            font-family: Arial, sans-serif; /* 设置字体系列为 Arial 或 sans-serif 替代 */
            line-height: 1.6; /* 设置行高为 1.6 倍字体大小，提高可读性 */
            color: #333; /* 设置文本颜色为深灰色 */
            background-color: #f5f5f5; /* 设置页面背景颜色为浅灰色 */
        }
        
        /* 容器样式 */
        .container { /* 类选择器，选中所有 class 为 container 的元素 */
            max-width: 1200px; /* 设置最大宽度为 1200 像素 */
            margin: 0 auto; /* 水平居中，上下外边距为 0 */
            padding: 0 20px; /* 左右内边距为 20 像素，上下为 0 */
        }
        
        /* 头部样式 */
        header { /* header 选择器，设置头部区域样式 */
            background: linear-gradient(135deg, #4a6fa5, #6b8cce); /* 设置线性渐变背景，从深蓝色到浅蓝色 */
            color: white; /* 设置文本颜色为白色 */
            padding: 60px 0; /* 上下内边距为 60 像素，左右为 0 */
            text-align: center; /* 设置文本对齐方式为居中 */
        }
        
        header h1 { /* 后代选择器，选中 header 内的 h1 元素 */
            font-size: 2.5rem; /* 设置字体大小为 2.5 倍根元素字体大小 */
            margin-bottom: 20px; /* 设置底部外边距为 20 像素 */
        }
        
        /* 导航样式 */
        nav { /* nav 选择器，设置导航栏样式 */
            background-color: #333; /* 设置背景颜色为深灰色 */
            padding: 15px 0; /* 上下内边距为 15 像素，左右为 0 */
        }
        
        nav ul { /* 后代选择器，选中 nav 内的 ul 元素 */
            list-style: none; /* 移除列表默认的项目符号 */
            display: flex; /* 使用弹性布局 */
            justify-content: center; /* 水平居中对齐 */
            gap: 20px; /* 项目之间的间距为 20 像素 */
        }
        
        nav ul li a { /* 后代选择器，选中 nav 内 ul 内 li 内的 a 元素 */
            color: white; /* 设置文本颜色为白色 */
            text-decoration: none; /* 移除链接默认的下划线 */
            padding: 10px 15px; /* 上下内边距为 10 像素，左右为 15 像素 */
            border-radius: 4px; /* 设置圆角为 4 像素 */
            transition: background-color 0.3s ease; /* 设置背景颜色过渡效果，持续 0.3 秒，缓动函数为 ease */
        }
        
        nav ul li a:hover { /* 伪类选择器，选中鼠标悬停时的链接 */
            background-color: #555; /* 设置悬停时的背景颜色为中灰色 */
        }
        
        /* 主内容样式 */
        main { /* main 选择器，设置主内容区域样式 */
            padding: 40px 0; /* 上下内边距为 40 像素，左右为 0 */
        }
        
        section { /* section 选择器，设置每个内容区块的样式 */
            background-color: white; /* 设置背景颜色为白色 */
            padding: 30px; /* 内边距为 30 像素 */
            margin-bottom: 30px; /* 底部外边距为 30 像素，与下一个区块保持距离 */
            border-radius: 8px; /* 设置圆角为 8 像素 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 设置阴影效果，水平偏移 0，垂直偏移 2px，模糊半径 8px，颜色为半透明黑色 */
        }
        
        section h2 { /* 后代选择器，选中 section 内的 h2 元素 */
            color: #4a6fa5; /* 设置文本颜色为深蓝色 */
            margin-bottom: 20px; /* 底部外边距为 20 像素 */
            border-bottom: 2px solid #4a6fa5; /* 设置底部边框为 2 像素实线，颜色为深蓝色 */
            padding-bottom: 10px; /* 底部内边距为 10 像素，与边框保持距离 */
        }
        
        /* 按钮样式 */
        .btn { /* 类选择器，选中所有 class 为 btn 的元素 */
            display: inline-block; /* 设置为内联块元素，既可以设置宽高，又可以与其他元素在同一行显示 */
            padding: 10px 20px; /* 上下内边距为 10 像素，左右为 20 像素 */
            background-color: #4a6fa5; /* 设置背景颜色为深蓝色 */
            color: white; /* 设置文本颜色为白色 */
            text-decoration: none; /* 移除链接默认的下划线 */
            border-radius: 4px; /* 设置圆角为 4 像素 */
            transition: background-color 0.3s ease; /* 设置背景颜色过渡效果，持续 0.3 秒，缓动函数为 ease */
        }
        
        .btn:hover { /* 伪类选择器，选中鼠标悬停时的按钮 */
            background-color: #3a5a85; /* 设置悬停时的背景颜色为更深的蓝色 */
        }
        
        /* 卡片样式 */
        .card { /* 类选择器，选中所有 class 为 card 的元素 */
            background-color: #f9f9f9; /* 设置背景颜色为浅灰色 */
            border: 1px solid #ddd; /* 设置边框为 1 像素实线，颜色为浅灰色 */
            border-radius: 8px; /* 设置圆角为 8 像素 */
            padding: 20px; /* 内边距为 20 像素 */
            margin: 20px 0; /* 上下外边距为 20 像素，左右为 0 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* 设置变换和阴影的过渡效果，持续 0.3 秒，缓动函数为 ease */
        }
        
        .card:hover { /* 伪类选择器，选中鼠标悬停时的卡片 */
            transform: translateY(-5px); /* 向上平移 5 像素，产生悬浮效果 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 增强阴影效果，使其更加明显 */
        }
        
        /* 页脚样式 */
        footer { /* footer 选择器，设置页脚样式 */
            background-color: #333; /* 设置背景颜色为深灰色 */
            color: white; /* 设置文本颜色为白色 */
            padding: 30px 0; /* 上下内边距为 30 像素，左右为 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:[email protected]" 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 框架

教程目录