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 中间看起来像<h1>）。
然后我们有花括号。在里面，你会发现不同的属性集，然后是它们的属性。（它们实际上不需要在单独的行动上，但它更易于阅读。重要的是分号。这就是告诉浏览器您已移动到不同属性的原因。）您可以添加尽可能多的属性随你便。我们在冒号之前有属性（所以颜色或字体大小）。然后我们有值（蓝色或30）。浏览器然后通过按顺序应用它们。
你的外部样式表会有很多规则
您希望如何对样式表进行排序取决于您，但您通常会在一个样式表中包含多个规则。所以它可能看起来像这样：
h1 {
color: blue;
font-size: 30;
font-weight: bold;
}
h2 {
color: red;
font-size: 20;
}
但显然要长得多。您的页面上可以有数百条规则，所有规则都一个接一个地编写。因此，请确保将相似的元素聚集在一起，以帮助您更轻松地进行分类。
如何编写内部 CSS
您将创建和添加内部 CSS，并在 HTML 页面或文档的 <head> 部分中定义它。它将在 <style> 元素中。所以，给你举个例子：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
h2 {color: red;}
</style>
</head>
<body>
<h1>这是你的标题 1</h1>
<h2>这是你的标题 2</h2>
</body>
</html>
所以在这里，我们将标题 1 的样式设置为蓝色，将标题 2 设置为红色。这只会影响此单个文档或页面，并且不会更新您网站上的其他任何地方（除非您将其复制过来）。
如何编写内联 CSS
内联 CSS 是您为特定元素赋予独特样式的地方。它将使用 HTML 元素的样式属性。 因此，向您展示它的外观：
<h1 style=”color:blue;”>I’m a blue h1 heading</h1>
<h2 style=”color:red;”>I’m a red h2 heading</h2>
与我们之前使用的示例类似，我们现在用新颜色更新了每个特定标题。但除非我们在文档的其他地方使用了这种内联样式，否则您不会更新任何其他标题。
对此大家是有怎样的学习心得也可以交流交流 #艾编程学习笔记