Question

我看了一个flex教程，我发现部分提到了外部和内部的CSS。那两者之间有什么区别？

Answer 1

External CSS指的是文件位置，即

<link rel="stylesheet" href="your-file-here.css">

Internal CSS

表示CSS包含在页面中，包含在style中的<head>标记中：

所以：

<style>
    #wrapper { width:960px; margin:0 auto; }
</style>

在内部使用CSS时，样式可用于所谓的内联样式。

看起来像：

<p style="color: #333; font-size: 22px;">Blah blah blah.</p>

internal CSS的唯一真正好处是，浏览器无需另外GET次请求即可下载.css文件。但external是优先考虑的。这意味着您只需要修改.css文件，它将反映在包含对该特定文件的引用的所有页面中。

Answer 2

内部CSS

外部CSS

外部CSS文件的主要优点是它可以独立于页面缓存，这意味着客户端只需要下载一次，这可以节省加载时间和带宽。

此外，通过将多个页面链接到一次CSS文件，您只需要更改一个位置，并立即影响所有网站（无需每个页面都进行更改）。

Answer 3

内部样式表是页面style部分中的head标记：

<style type="text/css">

body { margin: 0; padding; 10px; }

</style>

外部样式表是link部分中head标记页面使用的CSS文件：

<link rel="stylesheet" href="pagestyles.css" />

还可以使用内部样式表或其他外部样式表中的@import CSS规则来指定外部样式表：

@import "otherstyles.css";

还有第三种类型的CSS;在它们适用的元素上指定的内联样式：

<div style="background:#ccc;">