什么是 CSS？
CSS 和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。
CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。
举例来说，以下 CSS 代码选择了所有的段落文字，并将它们设置为红色。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单示例</title> <style> p { color: red; } </style> </head> <body> <p> 测试文字</p> </body> </html>
在 HTML 中应用 CSS
首先，让我们研究一下将 CSS 应用于文档的三种方法：使用外部样式表、使用内部样式表和使用内联样式。
外部样式表
外部样式表在一个单独的扩展名为 .css 的文件中包含 CSS。
这是将 CSS 应用到文档中最常见和最有用的方法。
你可以将一个 CSS 文件链接到多个网页上，用同一个 CSS 样式表为所有网页确定样式。在 CSS 入门中，我们将一个外部样式表链接到我们的网页上。
使用 HTML <link> 元素来链接外部样式表文件：
<!-- 在当前目录中，引用子文件夹 styles 中的样式表文件 --> <link rel="stylesheet" href="styles/style.css" /> <!-- 在当前目录中，引用子文件夹 styles 中的子文件夹 general 中的样式表文件 --> <link rel="stylesheet" href="styles/general/style.css" /> <!-- 在当前目录的父级目录中，引用子文件夹 styles 中的样式表文件 --> <link rel="stylesheet" href="../styles/style.css" />
<link> 元素的 href 属性需要引用你文件系统中的一个文件。在上面的例子中，CSS 文件与 HTML 文档在同一个文件夹中，但你可以把它放在其他地方，并调整路径。
内部样式表
一个内部样式表驻留在 HTML 文档内部。要创建一个内部样式表，你要把 CSS 放置在包含在 HTML <head> 元素中的 <style> 元素内。
一个内部样式表的 HTML 代码可能看起来像这样
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>我的 CSS 测试</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>这是我的第一个 CSS 示例</p> </body> </html>
在某些情况下，内部样式表可能是有用的。例如，也许你正在使用一个内容管理系统，其外部 CSS 文件是不可以直接修改的。
但对于有多个页面的网站来说，内部样式表就变成了一种不太有效的工作方式。要使用内部样式表在多个页面上应用统一的 CSS 样式，你必须在每个要使用该样式的网页上都有一个内部样式表。这种效率的下降也会影响到网站的维护。
在内部样式表中使用 CSS，存在这样的风险：即使是一个简单的样式变化，也可能需要对多个网页进行编辑。
内联样式
内联样式是影响单个 HTML 元素的 CSS 声明，包含在元素的 style 属性中。在一个 HTML 文档中，内联样式的实现可能看起来像这样：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>我的 CSS 测试</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Hello World! </h1> <p style="color:red;">这是我的第一个 CSS 示例</p> </body> </html>
尽可能避免以这种方式使用 CSS。这不符合最佳实践。
首先，这是对 CSS 的维护效率最低的实现。一个样式的改变可能需要在一个网页中进行多次编辑。
其次，内联 CSS 还将（CSS）表现性代码与 HTML 内容混合在一起，使一切都更难阅读和理解。将代码和内容分开，可以使所有从事网站工作的人更容易维护。
有几种情况下，内联样式是比较常见的。如果你的工作环境有很大的限制，你可能不得不使用内联样式。
例如，也许你的内容管理系统（CMS）只允许你编辑 HTML 主体。你也可能在 HTML 电子邮件中看到大量的内联样式，以实现与尽可能多的电子邮件客户端的兼容。
总结：CSS是一种样式表语言，用于为HTML元素添加样式。在HTML文档中应用CSS有三种方法：外部样式表、内部样式表和内联样式。选择适当的方法取决于项目的规模、需求和开发者的工作环境。
