了解3种CSS样式

内联,嵌入式和外部样式表:以下是您需要了解的内容

前端网站的开发往往表现为三脚凳。 这些腿如下:

这个凳子的第二段,CSS或层叠样式表,就是我们今天在这里看到的。 具体来说,我们想要解决您可以添加到文档中的3种样式。

  1. 内联样式
  2. 嵌入式样式
  3. 外部样式

每种CSS样式都有其优点和缺点,因此让我们分别深入了解每种CSS样式。

内联样式

内联样式是直接写在HTML文档标签中的样式。 内联样式仅影响其应用于的特定标签。 以下是适用于标准链接或锚点标签的内联样式示例:

这个CSS规则会将标准下划线文字修饰从这个链接中移除。 但是,它不会更改页面上的任何其他链接。 这是内联样式的限制之一。 由于它们只针对特定项目进行更改,因此您需要使用这些样式来处理HTML,以实现实际的页面设计。 这不是最佳做法。 事实上,这是从“字体”标签和网页中结构和风格的混合中消除的一步。

内联样式也具有非常高的特异性。

这使得他们很难用其他非内联样式进行覆盖。 例如,如果您希望使网站响应并通过使用媒体查询更改某个元素查看某些断点的方式,则元素上的内联样式将很难做到这一点。

最终,内联样式实际上只适用于非常谨慎的使用。

事实上,我很少在我的网页上使用内联样式。

嵌入式样式

嵌入式样式是嵌入在文档头部的样式。 嵌入式样式只影响嵌入页面中的标签。这种方法再一次否定了CSS的优点之一。 由于每个页面都会有样式

,如果您想进行网站范围的更改(如将链接的颜色从红色更改为绿色),则需要在每个页面上进行此更改,因为每个页面都使用嵌入式样式表。 这比内联样式更好,但在许多情况下仍然存在问题。

添加到的样式表

的文档还会向该页面添加大量的标记代码,这也可能会使页面在将来难以管理。

嵌入式样式表的好处在于即时加载页面本身,而不需要加载其他外部文件。 这可以从下载速度和性能角度获益。

外部样式表

今天的大多数网站都使用外部样式表。外部样式是用单独的文档编写的样式,然后附加到各种Web文档中。 外部样式表可以影响他们所连接的任何文档,这意味着如果您有一个20页的网站,每个页面使用相同的样式表(这通常是如何完成的),您可以对每个网页进行可视化更改通过简单地编辑该样式表就可以找到这些页面

这使得长期的网站管理变得更容易。

外部样式表的缺点是它们需要页面来获取和加载这些外部文件。 不是每个页面都会使用CSS表单中的每种样式,因此很多页面会加载比实际需要的更大的CSS页面。

诚然,外部CSS文件的性能受到影响,但它当然可以最小化。 实际上,CSS文件只是文本文件,所以它们通常不是很大。 如果您的整个站点使用1个CSS文件,您还可以在最初加载后缓存该文档的好处。

这意味着在第一页有些访问可能会有轻微的性能下降,但后续页面将使用缓存的CSS文件,因此任何访问都将被取消。 外部CSS文件是我如何构建我的所有网页。