css中什么是外部样式表？-css教程-PHP中文网

css中什么是外部样式表？

青灯夜游

发布： 2020-11-13 16:37:28

原创

7804人浏览过

在css中，如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表，一个CSS样式表文档就表示一个外部样式表；css外部样式表文件使用“.CSS”为扩展名，且HTML文档中包含指向该文件位置的链接，以便Web浏览器知道在哪里查找样式。

css中什么是外部样式表？

【推荐教程：CSS视频教程】

当Web浏览器加载网页时，它的显示方式取决于来自级联样式表的信息，HTML文件有三种使用样式表的方法：外部，内部和内联。

内部和内嵌样式表存储在HTML文件本身中。它们很容易在当下工作，但由于它们不是存储在中心位置，因此不可能轻易地在整个网站上同时更改样式; 您必须返回每个条目并手动更改它。

而如果 CSS 样式被放置在网页文档外部的文件中，则称为外部样式表，一个 CSS 样式表文档就表示一个外部样式表。

立即学习“前端免费学习笔记（深入）”；

实际上，外部样式表也就是一个文本文件，扩展名为.css。当把CSS样式代码复制到一个文本文件中后，另存为.css文件，则它就是一个外部样式表。

如下图所示就是在线外部样式表（http://c.biancheng.net/templets/new/style/common.css）：

css外部样式表文件使用.CSS文件扩展名，并且HTML文档中包含指向该文件位置的链接，以便Web浏览器知道在哪里查找样式说明。

一个或多个文档可以链接到同一个CSS文件，一个网站可能有许多独特的CSS文件，用于为不同的页面，表格，图像等设置样式。

如何链接到CSS外部样式表？

每个想要使用特定外部样式表的网页都需要链接到<head>部分中的CSS文件，如下所示：

新鲜水果网站销售模板

网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的

查看详情

<head>
<link rel =“stylesheet”type =“text / css”href =“styles.css”>
</head>

登录后复制

在此示例中，唯一需要更改以使其适用于您自己的文档的是styles.css文本，这是CSS文件的位置。

如果文件实际上被称为styles.css并且与链接到它的文档位于完全相同的文件夹中，那么它可以保持与上面所读的完全相同。但是，您的CSS文件可能标题为其他内容，在这种情况下，您只需将名称从“styles”更改为您的名称即可。

如果CSS文件不在此文件夹的根目录中，而是在子文件夹中，则它可能会读取以下内容：

<head>
<link rel =“stylesheet”type =“text / css”href =“styles \ menus \ black.css”>
</ head>

登录后复制

有关外部CSS文件的更多信息

外部样式表的最大好处是它们不依赖于任何特定页面，如果样式在内部或内嵌执行，则网站上的其他页面无法指向这些样式首选项。

但是，使用外部样式，相同的CSS文件可以用于网站上的每个页面，这样所有页面都具有统一的外观，编辑整个网站的CSS内容非常容易和集中。

你可以在下面看到它是如何工作的……

内部样式需要使用 <style> 标记，因为它们需要与<html> 标记区分开来：

<head>
<style>
body {
    background-color: green;
}
h1 {
    color: blue;
    margin-left: 15px;
} 
</style>
</head>

登录后复制

但是，由于外部样式表包含在它们自己的文件中，因此可以像这样创建它们，这意味着与上面的示例完全相同：

body {
    background-color: green;
}
h1 {
    color: blue;
    margin-left: 15px;
}

登录后复制

在这些示例中，内联样式仅适用于该特定页面，这显然是因为它包含在该HTML页面的标题详细信息中。在第二个示例中，CSS信息是自包含在CSS文件中的，任何页面都可以使用上面的“ 如何链接到外部样式表” 部分中的代码链接到该文件。

更多编程相关知识，请访问：编程学习网站！！

以上就是css中什么是外部样式表？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题