「学习指南」零基础前端学习笔记：CSS的价值解析

发表时间: 2022-04-25 14:39

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>

与我们之前使用的示例类似，我们现在用新颜色更新了每个特定标题。但除非我们在文档的其他地方使用了这种内联样式，否则您不会更新任何其他标题。

对此大家是有怎样的学习心得也可以交流交流 #艾编程学习笔记