CSS 简介

什么是 CSS

为什么需要 CSS

CSS 基础语法

CSS 规则结构

CSS 注释

CSS 选择器

基础选择器

组合选择器

属性选择器

伪类选择器

伪元素选择器

选择器优先级

CSS 引入方式

内联样式

内部样式表

外部样式表

优先级规则

CSS 属性详解

文本属性

背景属性

边框属性

盒模型

尺寸属性

显示属性

定位属性

浮动属性

列表属性

表格属性

CSS 布局

文档流

浮动布局

定位布局

CSS 单位

绝对单位

相对单位

CSS 颜色

颜色表示方法

颜色属性

CSS 继承与层叠

继承

层叠

CSS 调试技巧

浏览器开发者工具

常见问题排查

内联样式

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。这是最直接的样式应用方式，但也是最不推荐的方式，除非有特殊需求。

基本语法

内联样式使用 HTML 元素的 style 属性来定义样式：

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

基本用法

单个样式属性

<!-- 设置文本颜色 -->
<p style="color: blue;">这段文字是蓝色的</p>

<!-- 设置字体大小 -->
<h1 style="font-size: 24px;">标题</h1>

<!-- 设置背景颜色 -->
<div style="background: #f5f5f5;">内容</div>

<!-- 设置边框 -->
<img src="image.jpg" style="border: 2px solid #ddd;">

多个样式属性

<!-- 组合多个样式 -->
<p style="color: #333; font-size: 16px; line-height: 1.6; padding: 10px;">
  这段文字有多个样式
</p>

<!-- 卡片样式 -->
<div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h2 style="color: #2c3e50; margin-bottom: 15px;">卡片标题</h2>
  <p style="color: #666; margin-bottom: 10px;">卡片内容</p>
</div>

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

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

内联样式的特点

优点

优先级最高

<p class="text" style="color: red;">这段文字是红色的</p>

<style>
  .text {
    color: blue;
  }
</style>

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

即时生效

<!-- 无需等待样式表加载 -->
<div style="background: red;">立即显示红色背景</div>

适合动态样式

<div id="box" style="width: 100px; height: 100px; background: blue;"></div>

<script>
  // JavaScript 可以轻松修改内联样式
  document.getElementById('box').style.background = 'red';
</script>

适合调试

<!-- 快速测试样式效果 -->
<p style="border: 2px solid red;">调试这个元素</p>

缺点

样式与内容混合

<!-- 不好的做法 -->
<div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h2 style="color: #2c3e50; margin-bottom: 15px; font-size: 24px;">标题</h2>
  <p style="color: #666; line-height: 1.6;">内容</p>
</div>

无法复用样式

<!-- 每个元素都要重复定义样式 -->
<p style="color: blue; font-size: 16px;">第一段</p>
<p style="color: blue; font-size: 16px;">第二段</p>
<p style="color: blue; font-size: 16px;">第三段</p>

难以维护

<!-- 修改样式需要修改每个元素 -->
<div style="background: red;">内容1</div>
<div style="background: red;">内容2</div>
<div style="background: red;">内容3</div>
<!-- 要改成蓝色，需要修改三个地方 -->

增加文件大小

<!-- 内联样式增加 HTML 文件大小 -->
<div style="background: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px;">
  内容
</div>

不利于 SEO

<!-- 搜索引擎难以从内联样式中提取结构信息 -->
<div style="font-size: 24px; font-weight: bold;">标题</div>

适用场景

1. 动态样式

<!DOCTYPE html>
<html>
<head>
  <title>动态样式示例</title>
</head>
<body>
  <div id="color-box" style="width: 200px; height: 200px; background: blue; margin: 20px;">
    点击改变颜色
  </div>
  
  <button onclick="changeColor()">改变颜色</button>
  
  <script>
    function changeColor() {
      const box = document.getElementById('color-box');
      const colors = ['blue', 'red', 'green', 'yellow', 'purple'];
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
      box.style.background = randomColor;
    }
  </script>
</body>
</html>

2. 临时调试

<!-- 调试布局问题 -->
<div style="border: 2px solid red; background: yellow;">
  调试这个区域
</div>

<!-- 调试元素位置 -->
<div style="position: relative; border: 1px dashed blue;">
  <div style="position: absolute; top: 0; left: 0; background: red;">
    调试定位
  </div>
</div>

3. 特殊情况覆盖

<style>
  .card {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
  }
</style>

<!-- 特殊情况需要不同的样式 -->
<div class="card" style="margin-top: 40px;">
  特殊卡片
</div>

4. 邮件模板

<!-- 某些邮件客户端只支持内联样式 -->
<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="padding: 20px; background: #f5f5f5;">
      <h1 style="color: #333; margin-bottom: 10px;">邮件标题</h1>
      <p style="color: #666; line-height: 1.6;">邮件内容</p>
      <a href="#" style="color: #007bff; text-decoration: none;">
        点击这里
      </a>
    </td>
  </tr>
</table>

5. JavaScript 动画

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 动画</title>
</head>
<body>
  <div id="animated-box" style="width: 100px; height: 100px; background: blue; position: relative;">
    动画盒子
  </div>
  
  <button onclick="animate()">开始动画</button>
  
  <script>
    function animate() {
      const box = document.getElementById('animated-box');
      let position = 0;
      
      const interval = setInterval(() => {
        position += 5;
        box.style.left = position + 'px';
        
        if (position >= 300) {
          clearInterval(interval);
        }
      }, 50);
    }
  </script>
</body>
</html>

内联样式的限制

1. 不能使用伪类和伪元素

<!-- 错误 - 内联样式不能使用伪类 -->
<a href="#" style=":hover { color: red; }">链接</a>

<!-- 正确 - 使用类选择器 -->
<style>
  .link:hover {
    color: red;
  }
</style>
<a href="#" class="link">链接</a>

2. 不能使用媒体查询

<!-- 错误 - 内联样式不能使用媒体查询 -->
<div style="@media (max-width: 768px) { width: 100%; }">
  内容
</div>

<!-- 正确 - 使用外部样式表或内部样式表 -->
<style>
  @media (max-width: 768px) {
    .responsive {
      width: 100%;
    }
  }
</style>
<div class="responsive">内容</div>

3. 不能使用 @import

<!-- 错误 - 内联样式不能使用 @import -->
<div style="@import url('styles.css');">内容</div>

<!-- 正确 - 在 style 标签中使用 -->
<style>
  @import url('styles.css');
</style>

内联样式与 JavaScript

读取内联样式

<div id="my-element" style="color: blue; font-size: 16px;">
  内容
</div>

<script>
  const element = document.getElementById('my-element');
  
  // 读取内联样式
  console.log(element.style.color);        // "blue"
  console.log(element.style.fontSize);     // "16px"
  console.log(element.style.background);  // "" (空字符串，因为没有设置)
</script>

设置内联样式

<div id="my-element">内容</div>

<script>
  const element = document.getElementById('my-element');
  
  // 设置单个样式
  element.style.color = 'red';
  element.style.fontSize = '18px';
  
  // 使用 camelCase 设置样式
  element.style.backgroundColor = 'yellow';
  element.style.borderRadius = '8px';
  
  // 批量设置样式
  element.style.cssText = 'color: green; padding: 10px; background: white;';
</script>

删除内联样式

<div id="my-element" style="color: blue; font-size: 16px;">
  内容
</div>

<script>
  const element = document.getElementById('my-element');
  
  // 删除单个样式
  element.style.color = '';
  
  // 删除所有内联样式
  element.style.cssText = '';
  
  // 或者移除 style 属性
  element.removeAttribute('style');
</script>

内联样式的性能考虑

1. 增加文件大小

<!-- 内联样式增加 HTML 文件大小 -->
<div style="background: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  内容
</div>

<!-- 使用类选择器减少文件大小 -->
<style>
  .card {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
</style>
<div class="card">内容</div>

2. 无法缓存

<!-- 内联样式无法被浏览器缓存 -->
<div style="background: blue;">内容</div>

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

3. 影响渲染性能

<!-- 过多的内联样式会影响渲染性能 -->
<div style="background: red; padding: 10px; margin: 5px;">1</div>
<div style="background: blue; padding: 10px; margin: 5px;">2</div>
<div style="background: green; padding: 10px; margin: 5px;">3</div>
<!-- ... 更多元素 -->

最佳实践

1. 避免使用内联样式

<!-- 不推荐 -->
<div style="color: blue; font-size: 16px;">内容</div>

<!-- 推荐 -->
<style>
  .text {
    color: blue;
    font-size: 16px;
  }
</style>
<div class="text">内容</div>

2. 只在必要时使用内联样式

<!-- 合理使用 - 动态样式 -->
<div id="dynamic" style="background: red;">内容</div>

<script>
  document.getElementById('dynamic').style.background = 'blue';
</script>

3. 使用数据属性代替内联样式

<!-- 不推荐 -->
<div style="color: red;" data-color="red">内容</div>

<!-- 推荐 -->
<div class="colored" data-color="red">内容</div>

<style>
  .colored[data-color="red"] {
    color: red;
  }
</style>

总结

内联样式虽然简单直接，但在实际开发中应该谨慎使用：

优先级最高：容易覆盖其他样式
样式与内容混合：违反内容与表现分离原则
无法复用：每个元素都需要单独定义
难以维护：修改样式需要修改多个地方
性能较差：增加文件大小，无法缓存

记住以下几点：

避免在生产代码中使用内联样式
只在特殊情况下使用，如动态样式和调试
优先使用类选择器和外部样式表
理解内联样式的限制和最佳实践
合理使用 JavaScript 操作内联样式

上一章：CSS 引入方式

下一章：内部样式表