CSS（层叠样式表）。您将使用让您的网站栩栩如生地展现在用户眼前（而不仅仅是屏幕上的标准黑白文本）。但是 CSS 究竟是如何工作的呢？我们该如何使用它呢？我们将会在本次笔记里分享。那么CSS和html有怎样的区别，在整个网页是怎么分工的，我来给大家分享一张图来看看！

这也就意味着，html是骨架，而CSS就是让网页有肉感，有漂亮的衣服！这就是CSS的价值！让在我们继续学习！

CSS 让你的页面增添趣味

CSS 是一种语言，可用于更改页面呈现给受众的方式。例如，您可以使用 CSS 将您的客户品牌应用到他们的网站上。你几乎可以设计任何东西，包括：

• 标题和标题
• 段落和正文
• 颜色和字体
• 链接
• 表
• 背景和不透明度
• 动画和效果（虽然没什么技术含量）
• 以及更多

您可以通过三种方式使用 CSS

您可以通过三种不同的方式在文档（即网页）中包含 CSS：

• Inline：您将在HTML元素中使用style 属性
• 内部：您将在文档的 head 部分中使用样式元素
• 外部：您将在其中使用链接元素链接到外部CSS 文件

为什么要使用内联样式？

当您需要更新页面上的特定部分时，您就会使用它。违反你通常规则的事情，你只会做一次。它非常适合快速改变事物的外观。但是，如果您希望很多零件都遵循此规则，则永远不要使用它。（这只是对代码的浪费。）否则，当您想要进行大规模更新时，您会费尽心思。 请记住，任何编码的一个主要原则是压缩您的代码并避免重复自己。这里也一样。

为什么要使用内部样式？

这是针对特定页面的。一个不遵循网站其余部分规则的页面，但页面本身需要保持一致。也许你正在制作一个登陆页面，而这些段落想要分开一点点。也许您想使用不同的颜色来强调，而不是通常的颜色。因此，如果您需要对页面进行大规模更改，您可以从代码顶部完成所有操作。

为什么要使用外部样式？

这是一个专用于您的样式代码的完整文件，并保持每个页面的一致性。当您设计整个网站的样式时，您通常会使用它。这意味着如果您需要更新，例如，标题 1 样式，您只需要在 CSS 文档中更改它。然后每个页面都会自动更新。因此，您的外部样式就是您的主文档。

CSS 遵循规则

您需要创建一组规则来定义您希望页面的外观。因此，如果您希望标题 1 为蓝色、粗体且大小为 30pts，那么您可以这样写：

h1{color: blue;font-size:30;font-weight: bold;
}

这是一个简单的样式，你只能在你的外部样式表上找到它（内联和内部看起来不同）。但让我们进一步分解。

该代码如何工作

您会注意到代码与 h1 开头。这是我们要设置的样式的 HTML 元素。因此，我们正在设计标题 1（在您的 html 中间看起来像

）。

然后我们有花括号。在里面，你会发现不同的属性集，然后是它们的属性。（它们实际上不需要在单独的行动上，但它更易于阅读。重要的是分号。这就是告诉浏览器您已移动到不同属性的原因。）您可以添加尽可能多的属性随你便。我们在冒号之前有属性（所以颜色或字体大小）。然后我们有值（蓝色或30）。浏览器然后通过按顺序应用它们。

你的外部样式表会有很多规则

您希望如何对样式表进行排序取决于您，但您通常会在一个样式表中包含多个规则。所以它可能看起来像这样：

h1{color: blue;font-size:30;font-weight: bold;
}h2{color: red;font-size:20;
}

但显然要长得多。您的页面上可以有数百条规则，所有规则都一个接一个地编写。因此，请确保将相似的元素聚集在一起，以帮助您更轻松地进行分类。

如何编写内部 CSS

您将创建和添加内部 CSS，并在 HTML 页面或文档的 部分中定义它。它将在