为什么我们要使用外部CSS和JS文件

在这篇文章中，我们将学习有关CSS和JS文件的知识。我们将探索它们的功能以及在HTML文档中使用它们的不同方法。了解了所有这些内容之后，我们将明白为什么我们要使用外部CSS和JS文件。

CSS代表层叠样式表。CSS用于为您的网站和网页应用样式。它用于使网页看起来更加易懂、漂亮，并对用户更具吸引力。CSS文件可以用任何文本编辑器编写，但必须保存为.css扩展名。

一个简单的HTML文档给出的是一个具有无组织信息的网页。为了组织这些信息并以适当的方式显示出来，我们使用CSS文件。CSS的一些用途包括背景颜色选择、字体大小选择、字体颜色、文档宽度等等。

在HTML文档中使用CSS有三种方式−

内联 − 在内联CSS中，我们在<body>标签内部使用CSS属性，每个元素的CSS属性与元素本身关联。

内部或嵌入式 − 在内部CSS中，我们在HTML文档的头部使用CSS属性。我们需要在头部创建一个包含HTML文档的所有样式的<style>标签。

外部 − 在外部CSS中，我们在HTML文档之外定义一个单独的CSS文件，该文件包含了网页的所有样式。我们使用<link>标签将外部CSS文件与HTML文件链接，以应用所有CSS属性到HTML标签。

示例

<!DOCTYPE html>
<html>
<head>
   <title>External CSS</title>
   <link rel="stylesheet" href="file.css">
</head>
<body>
   <h1>Computer Science </h1>
   <p>It is the most evolving sector of the industry and there are lot of job opportunities in this field in upcoming years.</p>
</body>
</html>

JS

JS代表Java Script。它是一种用于Web的编程语言，用于为网页提供自定义的“行为”。通过使用JS，我们可以为网站添加交互性，使其在视觉上吸引人，与之互动有趣，并且增加了很多功能，使用户体验更精细化。我们可以通过主要两种方式在HTML文件中使用JS−

内部JS − 在这种方法中，我们使用<script>标签将JS代码嵌入到HTML文件中。仅在我们需要实现有限功能的网页上有用，例如添加动画，接受小表单。但随着代码复杂性的增长，使用外部JS文件变得重要。
外部JS − 如果我们创建一个扩展名为.js的文件，它将成为一个Java脚本文件，并包含我们网站所需的所有必要代码。要将其与HTML文件链接起来，我们需要使用<script>标签以及定义JS文件源的src属性。

示例

<!DOCTYPE html>
<html>
<head>
   <title>External JS</title>
</head>
<body>
   <p>Let’s understand why external JS is prioritized over internal JS.</p>
   <script src="external.js"></script>
</body>
</html>

为什么我们要使用外部的JS和CSS文件

CSS- 使用外部CSS文件而不是内联或内部CSS的主要原因之一是外部CSS文件是可重复使用的，即可以在多个HTML文档中使用。我们可以创建一个CSS文件，然后使用<link>标签将其与不同的HTML文件关联起来，这样它将在每个网页上应用相同的属性。

另一个主要原因是它在样式代码（即CSS）和信息代码（即HTML）之间创建了分离。在内联或内部CSS中，我们要么同时写HTML标签和CSS，要么将它们写在HTML文件中，在编辑时容易引起混淆。
外部CSS解决了这个问题，因为HTML和CSS保存为不同的文件，如果遇到任何问题，我们就知道我们的CSS代码在哪里，我们的HTML代码在哪里。

根据Google的一项实验，使用外部CSS的网站会首先向用户推荐，因为它有更清晰的代码，使搜索引擎更容易访问信息。

JS - 使用外部JS文件可以减少在一个地方编写多个功能的代码所带来的复杂性，可以为每个功能使用单独的JS文件。