「学习指南」零基础前端学习笔记: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>

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

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