CSS3 基础 - CSS3 简介与语法基础

一、课程导入

思考问题

  • 什么是CSS？它在网页开发中的作用是什么？
  • CSS3与之前的CSS版本有什么不同？
  • 如何在HTML文件中引入CSS样式？

学习目标

  • 了解CSS3的基本概念和发展历史
  • 掌握CSS3的基本语法结构
  • 学会在HTML中引入CSS3样式的多种方法
  • 理解CSS3的工作原理

二、核心知识点讲解

1. CSS3 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档呈现方式的语言。CSS3是CSS的最新版本，于2011年开始逐步发布各个模块。

CSS3的主要改进：

特性类别 CSS2 CSS3
选择器 基本选择器 丰富的伪类和伪元素选择器
颜色 基本颜色表示 RGBA、HSLA、渐变
布局 传统布局 Flexbox、Grid布局
动画 无 过渡、动画、变换
边框 基本边框 圆角、阴影、边框图片
背景 基本背景 多背景、背景大小控制

2. CSS3 语法基础

CSS3的基本语法由两部分组成：选择器和声明块。

选择器 {
  属性1: 值1;
  属性2: 值2;
  /* 更多属性声明 */
}

语法结构说明：

  • 选择器：指定要应用样式的HTML元素
  • 声明块：包含在大括号{}内的一组样式声明
  • 声明：由属性和值组成，用冒号:分隔，以分号;结尾

示例：

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

3. 在HTML中引入CSS3的方法

方法一：内联样式（Inline Style）

直接在HTML元素的style属性中定义样式。

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

方法二：内部样式表（Internal Style Sheet）

在HTML文档的&lt;head&gt;部分使用&lt;style&gt;标签定义样式。

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

方法三：外部样式表（External Style Sheet）

创建单独的.css文件，然后在HTML文档中使用&lt;link&gt;标签引入。

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

三种方法的对比：

引入方式 优点 缺点
内联样式 优先级高，直接作用于元素 难以维护，样式与结构混合
内部样式表 作用于单个页面，易于管理 不能在多个页面共享
外部样式表 可在多个页面共享，易于维护 需要额外的HTTP请求

4. CSS3 的工作原理

CSS3的工作原理可以概括为以下几个步骤：

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  HTML文档   │────>│  解析HTML   │────>│  DOM树构建  │
└─────────────┘     └─────────────┘     └─────────────┘
                                          │
                                          ▼
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  CSS文件    │────>│  解析CSS    │────>│  CSSOM树构建│
└─────────────┘     └─────────────┘     └─────────────┘
                                          │
                                          ▼
                                ┌─────────────────────┐
                                │  渲染树构建         │
                                └─────────────────────┘
                                          │
                                          ▼
                                ┌─────────────────────┐
                                │  布局与绘制         │
                                └─────────────────────┘
                                          │
                                          ▼
                                ┌─────────────────────┐
                                │  页面显示           │
                                └─────────────────────┘
  1. 解析HTML：浏览器解析HTML文档，构建DOM（文档对象模型）树
  2. 解析CSS：浏览器解析CSS样式，构建CSSOM（CSS对象模型）树
  3. 构建渲染树：将DOM树和CSSOM树结合，构建渲染树
  4. 布局与绘制：根据渲染树计算元素位置和大小，绘制页面
  5. 页面显示：将绘制结果显示在浏览器窗口中

三、实用案例分析

案例一：创建一个简单的个人简介页面

需求分析

创建一个包含个人信息的简单页面，使用CSS3样式美化页面效果。

实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简介</title>
  <style>
    /* 页面整体样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 20px;
    }
    
    /* 容器样式 */
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    /* 标题样式 */
    h1 {
      color: #333;
      text-align: center;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }
    
    /* 个人信息样式 */
    .info {
      margin-top: 20px;
    }
    
    .info-item {
      margin-bottom: 15px;
    }
    
    .info-item label {
      display: inline-block;
      width: 100px;
      font-weight: bold;
      color: #555;
    }
    
    .info-item value {
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>个人简介</h1>
    <div class="info">
      <div class="info-item">
        <label>姓名：</label>
        <span>张三</span>
      </div>
      <div class="info-item">
        <label>年龄：</label>
        <span>25岁</span>
      </div>
      <div class="info-item">
        <label>职业：</label>
        <span>前端开发工程师</span>
      </div>
      <div class="info-item">
        <label>技能：</label>
        <span>HTML、CSS、JavaScript、React</span>
      </div>
      <div class="info-item">
        <label>简介：</label>
        <span>热爱前端开发，致力于创造美观、易用的用户界面。</span>
      </div>
    </div>
  </div>
</body>
</html>

案例分析

  • 使用了内部样式表的方式引入CSS样式
  • 应用了CSS3的border-radius和box-shadow等新特性
  • 使用了基本的选择器和属性设置
  • 通过类选择器组织样式，提高了代码的可维护性

案例二：使用外部样式表创建多页面网站

需求分析

创建一个包含首页和关于页面的简单网站，使用外部样式表实现样式共享。

实现代码

styles.css：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面整体样式 */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
}

/* 头部样式 */
header {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

/* 导航样式 */
nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  color: #3498db;
}

/* 主内容样式 */
main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 页脚样式 */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 30px;
}

/* 标题样式 */
h2 {
  color: #3498db;
  margin-bottom: 20px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

/* 段落样式 */
p {
  margin-bottom: 15px;
}

index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>我的网站</h1>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于我们</a></li>
    </ul>
  </nav>
  <main>
    <h2>欢迎访问我的网站</h2>
    <p>这是网站的首页，使用CSS3样式美化。CSS3提供了丰富的样式特性，可以创建更加美观、交互性更强的网页。</p>
    <p>通过外部样式表，我们可以在多个页面共享相同的样式，提高代码的可维护性。</p>
  </main>
  <footer>
    <p>&copy; 2026 我的网站. 保留所有权利。</p>
  </footer>
</body>
</html>

about.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我们</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>我的网站</h1>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">关于我们</a></li>
    </ul>
  </nav>
  <main>
    <h2>关于我们</h2>
    <p>我们是一个专注于前端开发的团队，致力于使用最新的Web技术创建优秀的用户体验。</p>
    <p>我们精通HTML、CSS、JavaScript等前端技术，并且不断学习新的技术和框架，以保持竞争力。</p>
  </main>
  <footer>
    <p>&copy; 2026 我的网站. 保留所有权利。</p>
  </footer>
</body>
</html>

案例分析

  • 使用了外部样式表的方式引入CSS样式，实现了样式的共享
  • 应用了CSS3的box-sizing、border-radius、box-shadow等新特性
  • 使用了Flexbox布局实现导航菜单的水平居中
  • 通过类选择器和元素选择器组合使用，实现了复杂的样式效果

三、实践练习

练习一：创建个人简历页面

要求：

  1. 使用HTML和CSS3创建一个个人简历页面
  2. 包含个人信息、教育背景、工作经历、技能等部分
  3. 使用外部样式表管理样式
  4. 应用CSS3的新特性，如圆角、阴影等
  5. 确保页面布局合理，美观大方

练习二：比较三种CSS引入方式

要求：

  1. 创建一个简单的HTML页面
  2. 分别使用内联样式、内部样式表和外部样式表三种方式设置样式
  3. 观察并分析三种方式的效果和优缺点
  4. 总结最佳实践

四、课程总结

核心知识点回顾

  • CSS3是CSS的最新版本，提供了更多的样式特性和布局选项
  • CSS3的基本语法由选择器和声明块组成
  • 在HTML中引入CSS3的三种方式：内联样式、内部样式表和外部样式表
  • CSS3的工作原理包括解析HTML和CSS、构建DOM树和CSSOM树、构建渲染树、布局与绘制等步骤

学习建议

  • 建议初学者从基础语法开始，逐步学习CSS3的各种特性
  • 多做实践练习，通过实际项目巩固所学知识
  • 关注CSS3的最新发展和浏览器兼容性
  • 学习使用CSS预处理器（如Sass、Less）和后处理器（如PostCSS）提高开发效率

下一步学习

  • 学习CSS3选择器的详细用法
  • 掌握CSS3的文本样式和盒模型
  • 学习CSS3的布局技术，如Flexbox和Grid
  • 探索CSS3的动画和变换效果

通过本课程的学习，相信你已经对CSS3有了基本的了解，为后续的深入学习打下了基础。继续努力，你将能够创建更加美观、交互性更强的网页！

下一篇 » CSS3 基础 - CSS3 选择器 - 元素选择器
↑