CSS 简介

什么是 CSS

为什么需要 CSS

CSS 基础语法

CSS 规则结构

CSS 注释

CSS 选择器

基础选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

选择器优先级

CSS 引入方式

内联样式

内部样式表

外部样式表

优先级规则

CSS 属性详解

文本属性

背景属性

边框属性

盒模型

尺寸属性

显示属性

定位属性

浮动属性

列表属性

表格属性

CSS 布局

文档流

浮动布局

定位布局

CSS 单位

绝对单位

相对单位

CSS 颜色

颜色表示方法

颜色属性

CSS 继承与层叠

继承

层叠

CSS 调试技巧

浏览器开发者工具

常见问题排查

内部样式表

内部样式表是将 CSS 样式写在 HTML 文件的 <style> 标签中，通常放在 <head> 部分。这种方式比内联样式更加灵活，样式可以在同一页面内复用。

基本语法

内部样式表使用 <style> 标签来定义样式：

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

    h1 {
      color: #2c3e50;
      text-align: center;
    }

    p {
      color: #666;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <h1>欢迎</h1>
  <p>这是一个使用内部样式表的示例。</p>
</body>
</html>

多个样式规则

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多个样式规则</title>
  <style>
    /* 全局样式 */
    * {
      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: 20px;
    }

    /* 标题样式 */
    h1, h2, h3 {
      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;
    }

    a:hover {
      text-decoration: underline;
    }

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

    .button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>网站标题</h1>
    <p>这是一段文字。</p>
    <a href="#" class="button">点击我</a>
  </div>
</body>
</html>

style 标签的位置

放在 head 部分（推荐）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>样式表位置</title>
  <!-- 推荐：放在 head 部分 -->
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <p>内容</p>
</body>
</html>

放在 body 部分（不推荐）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>样式表位置</title>
</head>
<body>
  <p>内容</p>
  <!-- 不推荐：放在 body 部分 -->
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</body>
</html>

style 标签的属性

type 属性

<!-- HTML5 中可以省略 type 属性 -->
<style>
  body { font-family: Arial; }
</style>

<!-- 明确指定 CSS -->
<style type="text/css">
  body { font-family: Arial; }
</style>

media 属性

<!-- 默认样式 -->
<style>
  body { font-size: 16px; }
</style>

<!-- 打印样式 -->
<style media="print">
  body { font-size: 12pt; }
  .no-print { display: none; }
</style>

<!-- 移动设备样式 -->
<style media="screen and (max-width: 768px)">
  body { font-size: 14px; }
  .container { padding: 10px; }
</style>

scoped 属性（实验性）

<!-- scoped 属性限制样式作用范围 -->
<div class="component">
  <style scoped>
    .scoped-style {
      color: red;
    }
  </style>
  <p class="scoped-style">这个样式只在这个组件内生效</p>
</div>

多个 style 标签

按功能分组

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多个 style 标签</title>
  
  <!-- 全局样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
  </style>

  <!-- 布局样式 -->
  <style>
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .header {
      background: #333;
      color: white;
      padding: 20px 0;
    }

    .main {
      padding: 40px 0;
    }
  </style>

  <!-- 组件样式 -->
  <style>
    .card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }

    .button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="header">头部</div>
  <div class="container main">
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
  </div>
</body>
</html>

内部样式表的特点

优点

样式可以在页面内复用

<style>
  .highlight {
    background: yellow;
  }
</style>

<p class="highlight">第一段</p>
<p class="highlight">第二段</p>
<p class="highlight">第三段</p>

便于单页管理

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 所有样式都在一个文件中 */
  </style>
</head>
<body>
  <!-- 单页应用内容 -->
</body>
</html>

支持所有 CSS 功能

<style>
  /* 支持伪类 */
  a:hover { color: red; }

  /* 支持伪元素 */
  p::first-line { font-weight: bold; }

  /* 支持媒体查询 */
  @media (max-width: 768px) {
    body { font-size: 14px; }
  }

  /* 支持 @import */
  @import url('additional.css');
</style>

无需额外的 HTTP 请求

<!-- 样式直接在 HTML 文件中 -->
<style>
  body { font-family: Arial; }
</style>

缺点

样式与内容仍在同一个文件中

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 样式和内容在同一个文件中 */
    body { font-family: Arial; }
  </style>
</head>
<body>
  <!-- 内容 -->
</body>
</html>

无法在多个页面间共享样式

<!-- 每个页面都需要复制样式 -->
<!-- page1.html -->
<style>
  body { font-family: Arial; }
</style>
<body>页面1</body>

<!-- page2.html -->
<style>
  body { font-family: Arial; }
</style>
<body>页面2</body>

增加 HTML 文件大小

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 大量的样式代码会增加 HTML 文件大小 */
    * { margin: 0; padding: 0; }
    body { font-family: Arial; }
    /* ... 更多样式 */
  </style>
</head>
<body>
  <!-- 内容 -->
</body>
</html>

浏览器缓存效果不如外部样式表

<!-- 内部样式表无法被单独缓存 -->
<style>
  body { font-family: Arial; }
</style>

<!-- 外部样式表可以被缓存 -->
<link rel="stylesheet" href="styles.css">

适用场景

1. 单页应用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>单页应用</title>
  <style>
    /* 完整的样式表 */
    * { margin: 0; padding: 0; }
    body { font-family: Arial; }
    .app { max-width: 1200px; margin: 0 auto; }
    /* ... 更多样式 */
  </style>
</head>
<body>
  <div class="app">
    <!-- 单页应用内容 -->
  </div>
</body>
</html>

2. 小型网站

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>小型网站</title>
  <style>
    /* 简单的样式表 */
    body { font-family: Arial; line-height: 1.6; }
    h1 { color: blue; }
    p { color: #666; }
  </style>
</head>
<body>
  <h1>网站标题</h1>
  <p>网站内容</p>
</body>
</html>

3. 原型设计

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原型设计</title>
  <style>
    /* 快速原型样式 */
    .prototype {
      background: #f5f5f5;
      padding: 20px;
      border: 2px dashed #ddd;
    }
  </style>
</head>
<body>
  <div class="prototype">
    原型内容
  </div>
</body>
</html>

4. 独立组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>独立组件</title>
</head>
<body>
  <!-- 组件模板 -->
  <template id="my-component">
    <style>
      /* 组件样式 */
      .component {
        background: white;
        padding: 20px;
        border-radius: 8px;
      }
    </style>
    <div class="component">
      组件内容
    </div>
  </template>
</body>
</html>

5. 邮件模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>邮件模板</title>
  <style>
    /* 邮件样式 */
    body { font-family: Arial; line-height: 1.6; }
    .container { max-width: 600px; margin: 0 auto; }
    .header { background: #007bff; color: white; padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">邮件标题</div>
    <p>邮件内容</p>
  </div>
</body>
</html>

内部样式表与 JavaScript

动态添加样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态样式</title>
  <style id="dynamic-styles">
    body { font-family: Arial; }
  </style>
</head>
<body>
  <button onclick="addStyle()">添加样式</button>
  
  <script>
    function addStyle() {
      const styleElement = document.getElementById('dynamic-styles');
      styleElement.innerHTML += `
        h1 { color: blue; }
        p { color: red; }
      `;
    }
  </script>
</body>
</html>

创建新的 style 标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>创建样式标签</title>
</head>
<body>
  <button onclick="createStyle()">创建样式</button>
  
  <script>
    function createStyle() {
      const style = document.createElement('style');
      style.textContent = `
        body { background: yellow; }
        h1 { color: red; }
      `;
      document.head.appendChild(style);
    }
  </script>
</body>
</html>

内部样式表的最佳实践

1. 保持样式组织有序

<style>
  /* ========== 全局样式 ========== */
  * { margin: 0; padding: 0; }
  body { font-family: Arial; }

  /* ========== 布局样式 ========== */
  .container { max-width: 1200px; margin: 0 auto; }

  /* ========== 组件样式 ========== */
  .button { padding: 10px 20px; }

  /* ========== 页面样式 ========== */
  .page-title { font-size: 32px; }
</style>

2. 使用注释分组

<style>
  /* 基础样式 */
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }

  /* 导航样式 */
  .nav {
    background: #333;
    color: white;
  }

  /* 内容样式 */
  .content {
    padding: 20px;
  }
</style>

3. 避免样式冲突

<style>
  /* 使用命名空间避免冲突 */
  .component-a .button {
    background: blue;
  }

  .component-b .button {
    background: red;
  }
</style>

总结

内部样式表是介于内联样式和外部样式表之间的一种样式管理方式：

样式可以在页面内复用：比内联样式更灵活
样式与内容仍在同一文件：不如外部样式表分离
适用于单页应用和小型网站：便于管理
支持所有 CSS 功能：包括伪类、媒体查询等

记住以下几点：

优先使用外部样式表，实现完全分离
内部样式表适用于单页应用和小型网站
保持样式组织有序，便于维护
使用注释和分组提高可读性
理解内部样式表的优缺点和适用场景

上一章：内联样式

下一章：外部样式表