CSS 基础入门

在 1994 年，当互联网刚刚开始蓬勃发展的时候，网页设计师们面临着一个巨大的挑战。当时的浏览器虽然允许用户自定义字体、颜色等显示效果，但网页制作者却无法控制这些样式。这意味着无论你多么精心设计网页内容，最终的外观完全取决于用户的浏览器设置。

正是在这样的背景下，CSS 应运而生。它的设计理念非常先进：既要给网页制作者足够的样式控制权，同时也要尊重用户的个性化需求。通过层叠机制，CSS 能够巧妙地平衡这两方面的需求，让制作者和用户都能参与到网页样式的决策中来。

CSS 基础入门

从 CSS1 到模块化时代

1996 年，CSS1 规范正式发布，这标志着网页样式化的新时代开始。然而，早期的浏览器在实现 CSS 时遇到了不少困难，特别是著名的"盒模型"实现差异问题，几乎让 CSS 的发展陷入停滞。幸运的是，经过各方的努力和妥协，浏览器厂商最终达成了共识，CSS 开始真正发挥其威力。

1998 年，CSS2 规范完成，紧接着 CSS3 的开发工作也开始了。与以往不同的是，CSS3 采用了模块化的设计理念。这种设计思路非常聪明：每个功能模块都可以独立开发和推进，重要的模块不会因为其他模块的延迟而受到影响。

这种模块化的方式带来了巨大的好处。比如，颜色相关的功能、选择器功能、命名空间功能等都可以独立发展，不需要等待整个规范完成。到了 2012 年，已经有三个 CSS Level 3 模块达到了正式推荐状态，而更多的模块正在不同的开发阶段中。

模块化的 CSS 规范让开发者能够更快地使用新功能，而不必等待整个规范完成。这种设计理念至今仍然影响着 CSS 的发展方向。

样式表的基本结构

CSS 样式表的核心是规则（rule）。每个规则都像是一个指令，告诉浏览器如何显示特定的网页元素。让我们通过一个简单的例子来理解这个概念。假设我们正在为一个在线书店设计网页，我们希望所有的书籍标题都显示为深蓝色，背景为浅灰色。在 CSS 中，我们可以这样写：

|
h1 {
  color: navy;
  background-color: lightgray;
}

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: navy;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <h1>这是一个应用了样式的标题</h1>
    <p>这个标题使用了深蓝色文字和浅灰色背景</p>
  </body>
</html>

这个简单的规则包含了 CSS 的所有基本组成部分。让我们仔细分析一下：

选择器（selector）是规则的第一部分，在这里是 h1。它告诉浏览器“我要选择所有的 h1 元素”。选择器就像是给浏览器的一个地址，告诉它要修改哪些元素。
声明块（declaration block）是花括号内的部分，包含了具体的样式指令。每个声明都由一个属性（property）和一个值（value）组成，中间用冒号分隔，最后用分号结束。

空白字符的处理

CSS 对空白字符的处理非常灵活，这给了开发者很大的自由度来组织代码。无论是紧凑的写法还是宽松的写法，浏览器都能正确理解。比如，下面几种写法都是完全等价的：

|
/* 紧凑写法 */
h1{color:navy;background-color:lightgray;}

这种灵活性让开发者可以根据个人喜好或团队规范来组织代码。不过，在实际项目中，建议保持一致的代码风格，这样更有利于团队协作和代码维护。

CSS 注释的使用

CSS 支持注释功能，这对于代码的可读性和维护性非常重要。CSS 注释的语法与 C 语言类似，使用 /* 开始，*/ 结束：

|
/* 这是书籍标题的样式 */
h1 {
  color: navy; /* 深蓝色文字 */
  background-color: lightgray; /* 浅灰色背景 */
}
/* 
  多行注释也很常用，
  特别适合解释复杂的样式逻辑
*/

需要注意的是，CSS 不支持嵌套注释。如果你需要临时注释掉一大段包含注释的代码，要特别小心，因为内部的注释结束符会意外地结束外部的注释。

CSS 中的元素概念

替换元素与非替换元素

在 CSS 的世界里，HTML 元素被分为两大类：替换元素和非替换元素。理解这个分类对于掌握 CSS 布局非常重要。

替换元素（replaced elements）是指那些内容会被外部资源替换的元素。最常见的例子是 <img> 标签。当你写 <img src="book-cover.jpg" alt="书籍封面"> 时，浏览器会从外部加载图片文件来替换这个元素的内容。替换元素本身不包含任何可见内容，它们只是一个“占位符”，等待外部资源来填充。

除了图片，表单元素如 <input> 也是替换元素。根据 type 属性的不同，它们会被替换为文本框、按钮、复选框等不同的界面组件。

非替换元素（non-replaced elements）则包含实际的文本内容，这些内容由浏览器直接渲染。比如 <p>这是一段文字</p> 中的文字内容就是由浏览器直接显示的，不需要加载外部资源。

元素的显示角色

CSS 中的元素还有另一个重要的分类维度：显示角色。这个分类决定了元素在页面中的布局行为。

块级元素（block-level elements）会独占一行，就像段落一样。它们会“推开”前后的其他元素，形成明显的视觉分隔。最常见的块级元素包括 <div>、<p>、<h1> 到 <h6> 等。

行内元素（inline-level elements）则不会独占一行，它们会“流”在文本行中，就像句子中的单词一样。常见的行内元素包括 <span>、<a>、<strong>、<em> 等。

让我们通过一个简单的例子来理解这个概念：

|
<div>
  <p>第一段话</p>
  <p class="block-to-inline">这句话本来应该新起一行，因为是块元素，但是我们将其改为了行内元素，所以它和上一句话在同一行。</p>
  <p>第二段话。 <span class="inline-to-block">这句话本来应该跟着第二段话，因为是行内元素，但是我们将其改为了块级元素，所以它和第二段话在两行。</span></p>
</div>

这种灵活性让 CSS 布局变得非常强大。你可以根据设计需求自由地调整元素的显示方式，而不必受限于 HTML 元素的默认行为。

虽然 display 属性很强大，但改变元素的默认显示角色时要谨慎考虑语义化。比如将标题改为行内元素可能会影响页面的可访问性。

将 CSS 引入 HTML 的方式

外部样式表

将 CSS 与 HTML 连接最常见也最推荐的方式是使用外部样式表。这种方式通过 <link> 标签实现：

|
<!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>
  <h1>欢迎来到我们的书店</h1>
  <p>这里有最优质的编程书籍</p>
</body>
</html>

外部样式表的最大优势是可以在多个页面间共享，这样既保证了样式的一致性，又便于维护。当你需要修改网站的整体风格时，只需要修改一个 CSS 文件，所有使用该样式表的页面都会自动更新。

外部样式表文件（如 styles.css）只包含 CSS 规则，不能包含任何 HTML 标记：

|
/* styles.css - 书店样式表 */
body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: #333;
}
 
h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}
 
.book-card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

嵌入样式表

有时候，你可能需要为特定页面添加一些独特的样式，这时可以使用 <style> 元素将 CSS 直接嵌入到 HTML 文档中：

|
<head>
  <title>特殊活动页面</title>
  <style>
    .special-offer {
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 10px;
    }
    
    .countdown {
      font-size: 24px;
      font-weight: bold;
      color: #e74c3c;
    }
  </style>
</head>

嵌入样式表适合那些只在特定页面使用的样式，但要注意不要过度使用，因为这会影响样式的复用性和维护性。

@import 指令

@import 指令允许在一个样式表中导入另一个样式表，这对于组织大型项目的样式文件非常有用：

|
/* main.css */
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
 
/* 主样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

需要注意的是，@import 指令必须放在样式表的最开始，在其他规则之前。如果放在其他规则之后，浏览器会忽略这些导入指令。

行内样式

行内样式通过 HTML 元素的 style 属性来应用，这种方式虽然简单直接，但通常不推荐使用：

|
<h1 style="color: red; font-size: 32px; text-align: center;">
  限时特价活动
</h1>

行内样式的最大问题是无法复用，每个样式都需要单独写一遍。而且，当需要修改样式时，你可能需要在多个地方进行修改，这大大增加了维护成本。

HTTP 链接

还有一种比较特殊的方式是通过 HTTP 头部来关联样式表。这种方式在 Apache 服务器上可以通过 .htaccess 文件实现：

|
# .htaccess 文件
Header add Link "</css/global.css>;rel=stylesheet"

这种方式会将样式表关联到所有从该目录服务的文档，但浏览器支持有限，主要用于开发环境或特殊场景。

样式优先级与层叠机制

CSS 的“层叠”特性意味着多个样式规则可能会同时作用于同一个元素。当这种情况发生时，浏览器需要决定使用哪个样式。CSS 有一套复杂的优先级规则来解决这个问题。

优先级从高到低大致如下：行内样式 > ID 选择器 > 类选择器 > 元素选择器。让我们通过一个例子来理解：

|
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 元素选择器 - 优先级较低 */
    p { color: blue; }
    
    /* 类选择器 - 优先级中等 */
    .highlight { color: red; }
    
    /* ID 选择器 - 优先级较高 */
    #special { color: green; }
  </style>
</head>
<body>
  <p>普通段落</p>
  <p class="highlight">高亮段落</p>
  <p class="highlight" id="special">特殊段落</p>
  <p class="highlight" id="special" style="color: orange;">行内样式段落</p>
</body>
</html>

在这个例子中，第一个段落显示为蓝色（元素选择器），第二个段落显示为红色（类选择器覆盖了元素选择器），第三个段落显示为绿色（ID 选择器覆盖了类选择器），最后一个段落显示为橙色（行内样式具有最高优先级）。

样式表的加载顺序

|
<head>
  <!-- 基础样式 -->
  <link rel="stylesheet" href="base.css">
  
  <!-- 组件样式 -->
  <link rel="stylesheet" href="components.css">
  
  <!-- 主题样式 -->
  <link rel="stylesheet" href="theme.css">
  
  <!-- 页面特定样式 -->
  <link rel="stylesheet" href="page-specific.css">
</head>

有时，不同的样式文件中可能会针对同一个元素设置不同的样式。这时，哪个样式会生效，就取决于“优先级”和“加载顺序”。比如，假设 base.css、components.css 和 page-specific.css 都包含如下样式：

|
.button {
  background: gray;
}

如果你在 page-specific.css 里又写了：

|
.button {
  background: orange;
}

那么最终页面上的 .button 按钮会显示为橙色，因为 page-specific.css 最后被加载，样式被后者覆盖。

如果同一个选择器在不同的 CSS 文件中重复定义，以最后加载的那个文件样式为准。你可以通过调整 <link> 标签的顺序，来控制哪个样式生效。

小结

CSS 作为网页样式化的核心语言，为我们提供了强大的工具来创造美观、功能丰富的网页。从简单的文字颜色调整到复杂的布局设计，CSS 都能胜任。

CSS 的学习是一个渐进的过程。从基础的选择器和属性开始，逐步掌握布局、动画、响应式设计等高级特性。保持实践和探索的精神，你很快就能创造出令人惊艳的网页效果！

在接下来的学习中，我们将学习 CSS 的选择器系统，了解如何精确地选择和控制网页元素，以及如何运用各种 CSS 属性来实现复杂的视觉效果。准备好迎接更精彩的 CSS 世界吧！

CSS 基础入门

从 CSS1 到模块化时代

模块化的 CSS 规范让开发者能够更快地使用新功能，而不必等待整个规范完成。这种设计理念至今仍然影响着 CSS 的发展方向。

样式表的基本结构

|
h1 {
  color: navy;
  background-color: lightgray;
}

|
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: navy;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <h1>这是一个应用了样式的标题</h1>
    <p>这个标题使用了深蓝色文字和浅灰色背景</p>
  </body>
</html>

这个简单的规则包含了 CSS 的所有基本组成部分。让我们仔细分析一下：

选择器（selector）是规则的第一部分，在这里是 h1。它告诉浏览器“我要选择所有的 h1 元素”。选择器就像是给浏览器的一个地址，告诉它要修改哪些元素。
声明块（declaration block）是花括号内的部分，包含了具体的样式指令。每个声明都由一个属性（property）和一个值（value）组成，中间用冒号分隔，最后用分号结束。

空白字符的处理

|
/* 紧凑写法 */
h1{color:navy;background-color:lightgray;}

这种灵活性让开发者可以根据个人喜好或团队规范来组织代码。不过，在实际项目中，建议保持一致的代码风格，这样更有利于团队协作和代码维护。

CSS 注释的使用

CSS 支持注释功能，这对于代码的可读性和维护性非常重要。CSS 注释的语法与 C 语言类似，使用 /* 开始，*/ 结束：

|
/* 这是书籍标题的样式 */
h1 {
  color: navy; /* 深蓝色文字 */
  background-color: lightgray; /* 浅灰色背景 */
}
/* 
  多行注释也很常用，
  特别适合解释复杂的样式逻辑
*/

需要注意的是，CSS 不支持嵌套注释。如果你需要临时注释掉一大段包含注释的代码，要特别小心，因为内部的注释结束符会意外地结束外部的注释。

CSS 中的元素概念

替换元素与非替换元素

在 CSS 的世界里，HTML 元素被分为两大类：替换元素和非替换元素。理解这个分类对于掌握 CSS 布局非常重要。

除了图片，表单元素如 <input> 也是替换元素。根据 type 属性的不同，它们会被替换为文本框、按钮、复选框等不同的界面组件。

元素的显示角色

CSS 中的元素还有另一个重要的分类维度：显示角色。这个分类决定了元素在页面中的布局行为。

让我们通过一个简单的例子来理解这个概念：

|
<div>
  <p>第一段话</p>
  <p class="block-to-inline">这句话本来应该新起一行，因为是块元素，但是我们将其改为了行内元素，所以它和上一句话在同一行。</p>
  <p>第二段话。 <span class="inline-to-block">这句话本来应该跟着第二段话，因为是行内元素，但是我们将其改为了块级元素，所以它和第二段话在两行。</span></p>
</div>

这种灵活性让 CSS 布局变得非常强大。你可以根据设计需求自由地调整元素的显示方式，而不必受限于 HTML 元素的默认行为。

虽然 display 属性很强大，但改变元素的默认显示角色时要谨慎考虑语义化。比如将标题改为行内元素可能会影响页面的可访问性。

将 CSS 引入 HTML 的方式

外部样式表

将 CSS 与 HTML 连接最常见也最推荐的方式是使用外部样式表。这种方式通过 <link> 标签实现：

|
<!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>
  <h1>欢迎来到我们的书店</h1>
  <p>这里有最优质的编程书籍</p>
</body>
</html>

外部样式表文件（如 styles.css）只包含 CSS 规则，不能包含任何 HTML 标记：

|
/* styles.css - 书店样式表 */
body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: #333;
}
 
h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}
 
.book-card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

嵌入样式表

有时候，你可能需要为特定页面添加一些独特的样式，这时可以使用 <style> 元素将 CSS 直接嵌入到 HTML 文档中：

|
<head>
  <title>特殊活动页面</title>
  <style>
    .special-offer {
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 10px;
    }
    
    .countdown {
      font-size: 24px;
      font-weight: bold;
      color: #e74c3c;
    }
  </style>
</head>

嵌入样式表适合那些只在特定页面使用的样式，但要注意不要过度使用，因为这会影响样式的复用性和维护性。

@import 指令

@import 指令允许在一个样式表中导入另一个样式表，这对于组织大型项目的样式文件非常有用：

|
/* main.css */
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
 
/* 主样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

需要注意的是，@import 指令必须放在样式表的最开始，在其他规则之前。如果放在其他规则之后，浏览器会忽略这些导入指令。

行内样式

行内样式通过 HTML 元素的 style 属性来应用，这种方式虽然简单直接，但通常不推荐使用：

|
<h1 style="color: red; font-size: 32px; text-align: center;">
  限时特价活动
</h1>

行内样式的最大问题是无法复用，每个样式都需要单独写一遍。而且，当需要修改样式时，你可能需要在多个地方进行修改，这大大增加了维护成本。

HTTP 链接

还有一种比较特殊的方式是通过 HTTP 头部来关联样式表。这种方式在 Apache 服务器上可以通过 .htaccess 文件实现：

|
# .htaccess 文件
Header add Link "</css/global.css>;rel=stylesheet"

这种方式会将样式表关联到所有从该目录服务的文档，但浏览器支持有限，主要用于开发环境或特殊场景。

样式优先级与层叠机制

优先级从高到低大致如下：行内样式 > ID 选择器 > 类选择器 > 元素选择器。让我们通过一个例子来理解：

|
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 元素选择器 - 优先级较低 */
    p { color: blue; }
    
    /* 类选择器 - 优先级中等 */
    .highlight { color: red; }
    
    /* ID 选择器 - 优先级较高 */
    #special { color: green; }
  </style>
</head>
<body>
  <p>普通段落</p>
  <p class="highlight">高亮段落</p>
  <p class="highlight" id="special">特殊段落</p>
  <p class="highlight" id="special" style="color: orange;">行内样式段落</p>
</body>
</html>

样式表的加载顺序

|
<head>
  <!-- 基础样式 -->
  <link rel="stylesheet" href="base.css">
  
  <!-- 组件样式 -->
  <link rel="stylesheet" href="components.css">
  
  <!-- 主题样式 -->
  <link rel="stylesheet" href="theme.css">
  
  <!-- 页面特定样式 -->
  <link rel="stylesheet" href="page-specific.css">
</head>

|
.button {
  background: gray;
}

如果你在 page-specific.css 里又写了：

|
.button {
  background: orange;
}

那么最终页面上的 .button 按钮会显示为橙色，因为 page-specific.css 最后被加载，样式被后者覆盖。

如果同一个选择器在不同的 CSS 文件中重复定义，以最后加载的那个文件样式为准。你可以通过调整 <link> 标签的顺序，来控制哪个样式生效。

小结

CSS 作为网页样式化的核心语言，为我们提供了强大的工具来创造美观、功能丰富的网页。从简单的文字颜色调整到复杂的布局设计，CSS 都能胜任。