Question

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

内联CSS
嵌入式CSS
外部CSS

我想知道每个人的利弊。

Answer 1

所有关于管道中你需要CSS的地方都在我看来。

1。内联css

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

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

缺点：填充HTML空间/占用带宽，而不是跨页面可恢复 - 甚至不是IFRAMES。

2。嵌入式css

优点：与原型相同，但在模板完成后，更容易切出最终原型并放入外部文件。

缺点：有些电子邮件客户端不允许[head]中的样式，因为大多数网络邮件客户端会删除头标记。

3。外部css

优点：在超过1页的网站上轻松维护和重复使用。

优点：可缓存=带宽减少=第二页加载后页面渲染速度更快

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

优点：可编辑，您可以自动从最终版本中删除所有未使用的空间，就像jQuery有开发人员版本和压缩版本=更快的下载=更快的用户体验+更少的带宽使用=更快的互联网！（我们喜欢!!!）

缺点：通常从HTML邮件中删除=凌乱的HTML布局。

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

我希望你可以使用其中一些吗？

Answer 2

我要提出外部样式表是唯一的方法。

内联CSS将内容与演示文稿混合在一起，导致可怕的混乱。
嵌入式CSS会加载每个页面请求，更改无法跨页面共享，并且内容无法缓存。

我对这两种方法本身没有任何反对意见，但如果计划一个新的网站或应用程序，你应该计划外部样式表。

Answer 3

内联

快速，但很脏

这是（遗憾的）HTML格式电子邮件唯一真正理智的选项，因为其他表单经常被各种电子邮件客户端丢弃。

嵌入式

不需要额外的HTTP请求，但没有以下好处：

链接

可以缓存，在页面之间重用，更容易使用验证器进行测试。

Answer 4

你想要外部的CSS。它是最容易维护的，外部css也简化了缓存。嵌入式意味着每个单独的html文件都需要拥有自己的css，这意味着更改文件时会有更大的文件大小和令人头疼的问题。内联css更难维护。

外部css是要走的路。

Answer 5

从哪里开始!! ??

假设你有一个有3页的网站...... 你可以使用Inline CSS（即页面本身的CSS，标签内的CSS）。

如果你有一个100页的网站...... 您不希望单独更改每个页面上的CSS（或者您？）... 因此，包括外部CSS表格将是更好的方式。

Answer 6

在以下情况下使用外部CSS：

你有很多css代码会让你的文件变得凌乱如果你把它全部内联
你想保持一个标准跨多个页面的外观

外部CSS使管理CSS变得更加容易，并且是实现样式的可接受方式。

如果只有一个文件需要样式，并且您没有预见到要更改以应用于其他页面，您可以将css放在文件的顶部（嵌入？）。

您通常只应在以下情况下使用内联CSS：

这是特定标记的一次性格式
您想要覆盖特定标记的默认css（在外部或文件顶部设置）

Answer 7

内联CSS通常很糟糕。当所有样式都位于一个中心位置（内联CSS不提供）时，修改页面样式要容易得多。它很容易快速成型样式，但不应该在生产中使用，特别是因为它经常导致重复样式。

嵌入式CSS集中了页面的样式，但它不允许您跨页面共享样式而不复制嵌入样式的文本并将其粘贴到站点的每个唯一页面中。

外部CSS是要走的路，它具有嵌入式CSS的所有优点，但它允许您在多个页面之间共享样式。

Answer 8

优点：

允许您使用一个文件控制整个站点的布局。更改会同时影响所有文档。可以消除冗余的在线样式（字体，粗体，颜色，图像）为不同类型的用户提供相同内容的多个视图。

缺点：

较旧的浏览器可能无法理解CSS。每个浏览器都不支持CSS。在这种情况下，专业人士远远超过利弊。实际上，如果网站是以特定方式设计的，那么较旧的浏览器将比使用表格管理网站时更好地（平均）显示内容。

Answer 9

如果您使用的是服务器端语言，为什么不嵌入CSS并使用条件编程来显示它？例如，假设您使用PHP w / Wordpress并且您想要一些特定于主页的CSS;您可以使用is_home（）函数仅在该页面的文档头部显示您的CSS。就个人而言，我有自己的模板系统，其工作原理如下：

inc.header.php =所有标题内容，以及页面特定的CSS将放在哪里：

if(isset($CSS)) echo $CSS;

然后，在特定的页面模板（比如about.php）中，我会使用heredoc变量作为页面特定的CSS，在包含标题的行上方：

about.php的内容：

<?php

$CSS = <<< CSS

.about-us-photo-box{
/* CSS code */
}

.about-us-something-else{
/* more CSS code */
}
CSS;

include "inc.header.php"; // this file includes if(isset($CSS)) echo $CSS; where page-specific CSS would go ...

<body>

<!-- about us html -->

include "inc.footer.php";

?>

是否有一些我缺少的东西会让这种方法变得更差？

<强>优点：

1）我仍然可以使用标准缓存技术缓存页面（是否有一种利用CSS外部文件的缓存方法？）。

2）如果绝对必要，我可以在特定的类声明中使用php进行特殊情况条件格式化（PHP在CSS文件中不起作用，除非我遗漏了一些我可以设置的服务器指令）。

3）我所有的页面特定CSS都在使用它的实际PHP文件中组织得非常好。

4）它减少了对外部文件的HTTP请求。

5）它减少了对外部文件的服务器请求。

<强>缺点：

1）我的IDE程序（Komodo IDE）无法按照Heredoc格式正确突出显示CSS，这使得在CSS中调试语法错误变得稍微困难。

2）我真的看不到任何其他骗局，请赐教！

Answer 10

此处和现在的所有人，2015年之后阅读，包括Polymer，Browserify，Webpack，Babel等项目以及其他许多重要参与者39; m可能缺失，我们已经开始编写HTML应用程序的新时代，关于我们如何模块化大型应用程序，分发更改以及将相关的表示，标记和行为组合成自包含单元。我们甚至没有开始服务工作者。

所以在任何人对什么是不可行的事情形成意见之前，我建议他们在他们的时间调查当前的网络生态系统，看看是否已经妥善解决了与可维护性相关的一些问题。

加载CSS内联，嵌入和外部文件的比较

10 个答案:

1。内联css

2。嵌入式css

3。外部css

内联

嵌入式

链接