「笔记」零基础学前端笔记,什么是CSS们到底发挥怎样的价值

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 页面或文档的 部分中定义它。它将在