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

CSS 引入方式

CSS 提供了多种引入方式，让我们可以在 HTML 文件中应用样式。不同的引入方式有不同的特点和适用场景，选择合适的引入方式对于项目的可维护性和性能都至关重要。

CSS 的三种引入方式

CSS 主要有三种引入方式：

  1. 内联样式：直接在 HTML 元素的 style 属性中定义样式
  2. 内部样式表：在 HTML 文件的 <style> 标签中定义样式
  3. 外部样式表：在独立的 CSS 文件中定义样式，通过 <link> 标签引入

内联样式

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。

基本语法

<element style="property: value; property: value;">
  内容
</element>

基本用法

<!-- 单个样式 -->
<p style="color: blue;">这段文字是蓝色的</p>

<!-- 多个样式 -->
<div style="background: #f5f5f5; padding: 20px; border-radius: 8px;">
  <h1 style="color: #333; margin-bottom: 10px;">标题</h1>
  <p style="line-height: 1.6; color: #666;">内容</p>
</div>

<!-- 链接样式 -->
<a href="#" style="color: #3498db; text-decoration: none;">链接</a>

<!-- 按钮样式 -->
<button style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px;">
  点击我
</button>

内联样式的特点

优点：

  • 优先级最高，容易覆盖其他样式
  • 适用于临时样式调试
  • 适用于动态生成的样式

缺点：

  • 样式与内容混合，违反内容与表现分离原则
  • 无法复用样式
  • 难以维护
  • 增加文件大小
  • 不利于样式统一管理

适用场景

<!-- 1. 动态样式 -->
<div id="dynamic-element" style="background: red;">
  动态样式元素
</div>

<script>
  // JavaScript 动态修改样式
  document.getElementById('dynamic-element').style.background = 'blue';
</script>

<!-- 2. 临时调试 -->
<p style="border: 2px solid red;">调试这个元素</p>

<!-- 3. 特殊情况覆盖 -->
<div class="card" style="margin-top: 20px;">
  特殊卡片
</div>

<!-- 4. 邮件模板（某些邮件客户端只支持内联样式） -->
<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="padding: 20px; background: #f5f5f5;">
      内容
    </td>
  </tr>
</table>

内部样式表

内部样式表是将 CSS 样式写在 HTML 文件的 <style> 标签中，通常放在 <head> 部分。

基本语法

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

基本用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>内部样式表示例</title>
  <style>
    /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background: #f5f5f5;
    }

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

    /* 标题样式 */
    h1 {
      color: #2c3e50;
      margin-bottom: 20px;
    }

    /* 按钮样式 */
    .button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }

    .button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>欢迎</h1>
    <p>这是一个使用内部样式表的示例。</p>
    <button class="button">点击我</button>
  </div>
</body>
</html>

多个 style 标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多个 style 标签</title>
  
  <!-- 全局样式 -->
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
  </style>

  <!-- 布局样式 -->
  <style>
    .header {
      background: #333;
      color: white;
      padding: 20px;
    }

    .main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>

  <!-- 组件样式 -->
  <style>
    .card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>网站标题</h1>
  </div>
  <div class="main">
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容</p>
    </div>
  </div>
</body>
</html>

内部样式表的特点

优点：

  • 样式与 HTML 在同一个文件中，便于管理
  • 适用于单页应用
  • 样式可以复用
  • 比内联样式更易维护

缺点：

  • 样式与内容仍在同一个文件中
  • 无法在多个页面间共享样式
  • 增加 HTML 文件大小
  • 浏览器缓存效果不如外部样式表

适用场景

<!-- 1. 单页应用 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 完整的样式表 */
  </style>
</head>
<body>
  <!-- 单页应用内容 -->
</body>
</html>

<!-- 2. 小型网站 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 简单的样式表 */
    body { font-family: Arial; }
    h1 { color: blue; }
  </style>
</head>
<body>
  <!-- 小型网站内容 -->
</body>
</html>

<!-- 3. 原型设计 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 快速原型样式 */
  </style>
</head>
<body>
  <!-- 原型内容 -->
</body>
</html>

<!-- 4. 独立组件 -->
<div style="display: none;">
  <template id="my-component">
    <style>
      /* 组件样式 */
      .component {
        background: white;
        padding: 20px;
      }
    </style>
    <div class="component">
      组件内容
    </div>
  </template>
</div>

外部样式表

外部样式表是将 CSS 样式写在独立的 .css 文件中，通过 <link> 标签引入到 HTML 文件中。

基本语法

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

创建外部样式表

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;
}

h2 {
  font-size: 24px;
}

/* 按钮样式 */
.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>
    <button class="button button-primary">主要按钮</button>
    <button class="button button-success">成功按钮</button>
    <button class="button button-danger">危险按钮</button>
  </div>
</body>
</html>

引入多个外部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多个外部样式表</title>
  
  <!-- 重置样式 -->
  <link rel="stylesheet" href="reset.css">
  
  <!-- 基础样式 -->
  <link rel="stylesheet" href="base.css">
  
  <!-- 组件样式 -->
  <link rel="stylesheet" href="components.css">
  
  <!-- 页面样式 -->
  <link rel="stylesheet" href="page.css">
  
  <!-- 响应式样式 -->
  <link rel="stylesheet" href="responsive.css">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

外部样式表的特点

优点：

  • 样式与内容完全分离
  • 可以在多个页面间共享样式
  • 便于维护和更新
  • 浏览器可以缓存样式表，提高加载速度
  • 减少 HTML 文件大小
  • 支持团队协作开发

缺点：

  • 需要额外的 HTTP 请求（但可以通过缓存优化）
  • 需要管理多个文件

适用场景

<!-- 1. 大型网站 -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/components.css">
<link rel="stylesheet" href="styles/pages.css">

<!-- 2. 多页面网站 -->
<!-- index.html -->
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/home.css">

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

<!-- 3. 使用 CSS 框架 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 4. 第三方样式库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

三种引入方式的对比

功能对比

特性内联样式内部样式表外部样式表
内容与表现分离❌❌✅
样式复用❌✅✅
跨页面共享❌❌✅
维护性❌⚠️✅
缓存支持❌❌✅
优先级最高中等最低
适用规模小型中型大型

性能对比

<!-- 内联样式 - 性能最差 -->
<div style="color: blue; font-size: 16px; padding: 10px;">内容</div>

<!-- 内部样式表 - 性能中等 -->
<style>
  .text { color: blue; font-size: 16px; padding: 10px; }
</style>

<!-- 外部样式表 - 性能最好（考虑缓存） -->
<link rel="stylesheet" href="styles.css">

优先级对比

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="external.css">
  <style>
    /* 内部样式表 */
    .text {
      color: green;
    }
  </style>
</head>
<body>
  <!-- 内联样式 -->
  <div class="text" style="color: red;">这段文字是什么颜色？</div>
</body>
</html>

/* external.css */
.text {
  color: blue;
}

/* 结果：红色 - 内联样式优先级最高 */

最佳实践

1. 优先使用外部样式表

<!-- 推荐 -->
<link rel="stylesheet" href="styles.css">

<!-- 不推荐 - 除非特殊情况 -->
<div style="color: blue;">内容</div>

2. 合理组织样式文件

<!-- 按功能组织 -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<link rel="stylesheet" href="css/utilities.css">

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

<!-- 按需加载样式 -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

4. 避免内联样式

<!-- 不推荐 -->
<div style="background: white; padding: 20px; border-radius: 8px;">
  内容
</div>

<!-- 推荐 -->
<div class="card">
  内容
</div>

/* styles.css */
.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

总结

CSS 提供了三种引入方式，各有其特点和适用场景：

  1. 内联样式：直接在元素上定义样式，优先级最高，但不推荐使用
  2. 内部样式表：在 HTML 文件中定义样式，适用于单页应用和小型网站
  3. 外部样式表：在独立文件中定义样式，适用于大型网站和多页面应用

记住以下几点：

  • 优先使用外部样式表，实现内容与表现分离
  • 内联样式只用于特殊情况，如动态样式和调试
  • 内部样式表适用于单页应用和原型设计
  • 合理组织样式文件，提高可维护性
  • 利用浏览器缓存优化性能
  • 遵循最佳实践，编写高质量的 CSS 代码
上一章：选择器优先级
下一章：内联样式