CSS是web页面的重要组成部分，它为web页面提供样式。CSS可以以不同的方式使用，其中最合适的方式是将CSS代码用作外部文件，并将其链接到指定的web页面或HTML页面。在本教程中，我们将学习如何以不同的方式将外部CSS文件链接到web或HTML页面。

标记语法

在开始链接之前，我们将学习 的语法  用于定义文档和外部资源之间的链接的标记。我们将使用 标记在web或HTML页面和CSS文件之间创建链接。

我们可以看到 标签在

，标签中使用。 ATTRIBUTE s用于设置有关链接的某些属性。下面是一些最常用的属性。

• `rel`attribute用于设置指定文档的关系，在我们的示例中，该文档将是“stylesheet”。CSS被称为样式表。
• `type`attribute用于设置链接的编码或内容类型，在我们的示例中，该链接将是“text/css”。
• `href`是在本例中指定CSS文件位置或URL的超链接引用。

另外，“标签”还有一些需要注意的特性，如下所示。

• 标记存储在HTML代码的部分中。
• 标签没有任何视觉效果。
• 标记将使当前页面加载外部源代码，如CSS。

相关文章： HTML target=“u blank”链接教程及示例

使用外部CSS文件的优点

使用CSS代码作为外部CSS文件提供了很多优点。在这里，我们将在这里的一些。

• 单个更改可能会影响整个网站或特定的网页组。
• 无需逐个更改网页，就可以轻松地进行全局更改。
• 通过使用外部CSS文件，内容和设计可以分离，以便于操作或设计。
• 在不影响其他元素的情况下，可以轻松地对CSS代码的HTML进行升级。
• 通过使用外部CSS，可以实现更快的加载时间，这使得CSS文件的下载与web页面并行。
• 外部CSS将使更好的搜索引擎优化，因为爬虫将更有效地解析网页。

将外部CSS链接到

我们将从一个简单的例子开始，我们将加载一个名为 mystyle.css 进入当前HTML网页。

  
This is a HEADING
This is a PARAGRAPH.

我们可以看到 mystle.css 加载了 标记。标题和段落的样式是用这个外部CSS文件设置的。这个 mystyle.css 文件位于站点的根位置，如 poftut.com/mystyle.css .

使用

在前面的示例中，我们链接了一个位于站点根位置的CSS文件。但在某些情况下，CSS文件可以位于不同的位置。在本例中，我们将加载名为 mystyle.css 位于 styles 网页的文件夹。我们将设置 href 标记的属性为 /styles/mystyle.css

  
This is a HEADING
This is a PARAGRAPH.

使用

我们也可以从不同的域或网站加载CSS文件。这对于负载平衡、速度或第三方库的使用特别有用。我们将只提供CSS文件的完整URL到href属性，它是 http://www.poftut.com/styles/mystyle.css 在这个例子中。

This is a HEADING
This is a PARAGRAPH.

链接多个外部CSS文件

在开发和创建网页时，会有很多不同的组件。因此，我们可能需要创建多个CSS文件，以便为这些不同的组件设置样式并轻松地管理样式。我们可以在一个web或HTML页面中链接多个CSS文件。我们只是像下面那样多次放置 标签。

相关文章： HTML target=“u blank”链接教程及示例

在本例中，我们链接或加载3个名为 buttonstyle.css , labelstyle.css 和 mystyle.css 都来自不同的网址。

This is a HEADING
This is a PARAGRAPH.

链接特定媒体类型（如桌面、移动或分辨率）的外部CSS

HTML5提供了一些可选的特性，可用于加载不同屏幕分辨率和媒体类型的不同CSS文件。例如， highres.css 可加载高分辨率屏幕尺寸 lowres.css 可用于手机等小型设备 media 标记的属性。

    
This is a HEADING
This is a PARAGRAPH.