CSS 简介
什么是 CSS
为什么需要 CSS
CSS 基础语法
CSS 规则结构
CSS 注释
CSS 选择器
基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
选择器优先级
CSS 引入方式
内联样式
内部样式表
外部样式表
优先级规则
CSS 属性详解
文本属性
背景属性
边框属性
盒模型
尺寸属性
显示属性
定位属性
浮动属性
列表属性
表格属性
CSS 布局
文档流
浮动布局
定位布局
CSS 单位
绝对单位
相对单位
CSS 颜色
颜色表示方法
颜色属性
CSS 继承与层叠
继承
层叠
CSS 调试技巧
浏览器开发者工具
常见问题排查
  1. css
  2. CSS 引入方式
  3. 外部样式表

外部样式表

外部样式表是将 CSS 样式写在独立的 .css 文件中，通过 <link> 标签引入到 HTML 文件中。这是最推荐的样式管理方式，实现了内容与表现的完全分离。

基本语法

外部样式表使用 <link> 标签来引入样式文件：

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

创建外部样式表

创建 CSS 文件

styles.css

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

/* 容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  color: #2c3e50;
  margin-bottom: 15px;
}

h1 {
  font-size: 32px;
  text-align: center;
}

h2 {
  font-size: 24px;
  margin-top: 30px;
}

/* 文本样式 */
p {
  margin-bottom: 15px;
  line-height: 1.8;
}

/* 链接样式 */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 按钮样式 */
.button {
  display: inline-block;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button:hover {
  background: #0056b3;
}

.button-primary {
  background: #007bff;
}

.button-success {
  background: #28a745;
}

.button-danger {
  background: #dc3545;
}

在 HTML 中引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式表示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>欢迎</h1>
    <p>这是一个使用外部样式表的示例。</p>
    <a href="#" class="button button-primary">主要按钮</a>
    <a href="#" class="button button-success">成功按钮</a>
    <a href="#" class="button button-danger">危险按钮</a>
  </div>
</body>
</html>

link 标签的属性

rel 属性

<!-- 指定关系为样式表 -->
<link rel="stylesheet" href="styles.css">

href 属性

<!-- 相对路径 -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="../styles.css">

<!-- 绝对路径 -->
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="https://example.com/css/styles.css">

type 属性

<!-- HTML5 中可以省略 type 属性 -->
<link rel="stylesheet" href="styles.css">

<!-- 明确指定类型 -->
<link rel="stylesheet" type="text/css" href="styles.css">

media 属性

<!-- 默认屏幕样式 -->
<link rel="stylesheet" href="screen.css" media="screen">

<!-- 打印样式 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 移动设备样式 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

<!-- 平板设备样式 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 769px) and (max-width: 1024px)">

其他属性

<!-- 禁用样式表 -->
<link rel="stylesheet" href="styles.css" disabled>

<!-- 指定字符集 -->
<link rel="stylesheet" href="styles.css" charset="utf-8">

<!-- 预加载样式表 -->
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css">

引入多个外部样式表

按功能组织

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多个外部样式表</title>
  
  <!-- 重置样式 -->
  <link rel="stylesheet" href="css/reset.css">
  
  <!-- 基础样式 -->
  <link rel="stylesheet" href="css/base.css">
  
  <!-- 布局样式 -->
  <link rel="stylesheet" href="css/layout.css">
  
  <!-- 组件样式 -->
  <link rel="stylesheet" href="css/components.css">
  
  <!-- 页面样式 -->
  <link rel="stylesheet" href="css/pages.css">
  
  <!-- 工具类 -->
  <link rel="stylesheet" href="css/utilities.css">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

按依赖顺序引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>依赖顺序</title>
  
  <!-- 基础样式（应先引入） -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/variables.css">
  
  <!-- 组件样式（依赖基础样式） -->
  <link rel="stylesheet" href="css/buttons.css">
  <link rel="stylesheet" href="css/cards.css">
  
  <!-- 页面样式（依赖组件样式） -->
  <link rel="stylesheet" href="css/home.css">
  
  <!-- 覆盖样式（应最后引入） -->
  <link rel="stylesheet" href="css/overrides.css">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

外部样式表的组织结构

推荐的文件组织

project/
├── index.html
├── css/
│   ├── reset.css          # 重置样式
│   ├── variables.css      # CSS 变量
│   ├── base.css           # 基础样式
│   ├── layout.css         # 布局样式
│   ├── components.css     # 组件样式
│   ├── pages/
│   │   ├── home.css       # 首页样式
│   │   ├── about.css      # 关于页面样式
│   │   └── contact.css    # 联系页面样式
│   └── utilities.css      # 工具类
└── assets/
    └── images/

按页面引入

<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/pages/home.css">
</head>
<body>
  <!-- 首页内容 -->
</body>
</html>

<!-- 关于页面 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>关于</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/pages/about.css">
</head>
<body>
  <!-- 关于页面内容 -->
</body>
</html>

外部样式表的特点

优点

  1. 内容与表现完全分离
<!-- HTML 文件只关注结构 -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>标题</h1>
    <p>内容</p>
  </div>
</body>
</html>

/* CSS 文件只关注样式 */
/* styles.css */
.container { max-width: 1200px; margin: 0 auto; }
h1 { color: #333; }
p { color: #666; }
  1. 样式可以在多个页面间共享
<!-- page1.html -->
<link rel="stylesheet" href="styles.css">
<div class="card">卡片1</div>

<!-- page2.html -->
<link rel="stylesheet" href="styles.css">
<div class="card">卡片2</div>

/* styles.css */
.card { background: white; padding: 20px; }
  1. 便于维护和更新
/* 修改一处，所有页面都会更新 */
/* styles.css */
.button {
  background: #007bff;  /* 改成其他颜色 */
  padding: 10px 20px;
}
  1. 浏览器可以缓存样式表
<!-- 首次访问 -->
<link rel="stylesheet" href="styles.css">  <!-- 下载并缓存 -->

<!-- 再次访问 -->
<link rel="stylesheet" href="styles.css">  <!-- 从缓存读取，无需下载 -->
  1. 减少 HTML 文件大小
<!-- 不使用外部样式表 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 大量的样式代码 */
    * { margin: 0; padding: 0; }
    body { font-family: Arial; }
    /* ... 更多样式 */
  </style>
</head>
<body>
  <!-- 内容 -->
</body>
</html>

<!-- 使用外部样式表 -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">  <!-- 简洁的引用 -->
</head>
<body>
  <!-- 内容 -->
</body>
</html>
  1. 支持团队协作开发
/* 多个开发者可以同时工作 */
/* developer1 负责按钮样式 */
/* buttons.css */
.button {
  padding: 10px 20px;
  background: #007bff;
}

/* developer2 负责卡片样式 */
/* cards.css */
.card {
  background: white;
  padding: 20px;
}

缺点

  1. 需要额外的 HTTP 请求
<!-- 每个样式文件都需要一次 HTTP 请求 -->
<link rel="stylesheet" href="reset.css">      <!-- 请求 1 -->
<link rel="stylesheet" href="base.css">       <!-- 请求 2 -->
<link rel="stylesheet" href="layout.css">     <!-- 请求 3 -->
<link rel="stylesheet" href="components.css"> <!-- 请求 4 -->
  1. 需要管理多个文件
css/
├── reset.css
├── base.css
├── layout.css
├── components.css
├── pages/
│   ├── home.css
│   ├── about.css
│   └── contact.css
└── utilities.css

适用场景

1. 大型网站

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>大型网站</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/components.css">
  <link rel="stylesheet" href="css/pages/home.css">
</head>
<body>
  <!-- 大型网站内容 -->
</body>
</html>

2. 多页面网站

<!-- index.html -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/home.css">

<!-- about.html -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/about.css">

<!-- contact.html -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/contact.css">

3. 使用 CSS 框架

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用 Bootstrap</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">  <!-- 自定义样式 -->
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>欢迎使用 Bootstrap</h1>
      </div>
    </div>
  </div>
</body>
</html>

4. 第三方样式库

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第三方样式库</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

外部样式表的最佳实践

1. 合理组织样式文件

<!-- 按功能和依赖顺序组织 -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">

2. 使用媒体查询优化加载

<!-- 基础样式 -->
<link rel="stylesheet" href="css/base.css">

<!-- 按设备类型加载 -->
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 769px)">

3. 使用版本控制

<!-- 添加版本号，避免缓存问题 -->
<link rel="stylesheet" href="css/styles.css?v=1.0.0">

<!-- 或者使用文件哈希 -->
<link rel="stylesheet" href="css/styles.abc123.css">

4. 优化样式加载

<!-- 预加载关键样式 -->
<link rel="preload" href="css/critical.css" as="style">
<link rel="stylesheet" href="css/critical.css">

<!-- 异步加载非关键样式 -->
<link rel="preload" href="css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/non-critical.css"></noscript>

总结

外部样式表是最推荐的样式管理方式，实现了内容与表现的完全分离：

  1. 内容与表现分离：HTML 和 CSS 完全独立
  2. 样式复用：可以在多个页面间共享
  3. 易于维护：修改一处，全局生效
  4. 性能优化：支持浏览器缓存
  5. 团队协作：便于多人协作开发

记住以下几点：

  • 优先使用外部样式表
  • 合理组织样式文件结构
  • 按功能和依赖顺序引入样式
  • 使用媒体查询优化加载
  • 添加版本号避免缓存问题
  • 理解外部样式表的优缺点
上一章：内部样式表
下一章：优先级规则