css - 内联、嵌入和从外部文件加载 CSS 的比较

Question

我们可以将 CSS 编写为以下类型:

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

我想知道各自的优缺点。

Answer 1

在我看来，这完全是关于您在管道中的哪个位置需要 CSS。

1。内联CSS

优点:非常适合快速修复/原型(prototype)设计和简单测试，而无需在 .css 文档和实际 HTML 文件之间来回切换。

优点:许多电子邮件客户端不允许使用外部 .css 引用，因为可能存在垃圾邮件/滥用。嵌入可能会有所帮助。

缺点:填满 HTML 空间/占用带宽，不可跨页面重用 - 甚至 IFRAMES 也不可。

2。嵌入式CSS

优点:与上述关于原型(prototype)的内容相同，但更容易从最终原型(prototype)中剪切出来，并在模板完成后放入外部文件中。

缺点:一些电子邮件客户端不允许 [head] 中的样式，因为大多数网络邮件客户端都删除了 head-tags。

3。外部CSS

优点:易于维护并在超过 1 个页面的网站之间重复使用。

优点:可缓存 = 带宽更少 = 第二页加载后页面呈现速度更快

优点:包括 .css 在内的外部文件可以托管在 CDN 上，从而减少对托管 HTML 页面(如果在不同主机上)的防火墙/网络服务器的请求。

优点:可编译，您可以从最终构建中自动删除所有未使用的空间，就像 jQuery 有开发版和压缩版 = 更快的下载 = 更快的用户体验 + 更少的带宽使用= 更快的互联网! (我们喜欢!!!)

缺点:通常从 HTML 邮件中删除 = HTML 布局困惑。

缺点:每个文件发出额外的 HTTP 请求 = 在防火墙/路由器中使用更多资源。

我希望你能使用其中的一些？