我们可以将CSS写成以下类型：
- 内联样式
- 嵌入式样式
- 外部样式
10个回答
16
我认为这完全取决于你在管道中需要CSS的位置。
1. 内联CSS
优点：适用于快速修复/原型制作和简单测试，无需在.css文件和实际HTML文件之间来回切换。
优点：由于可能存在垃圾邮件/滥用的可能性，因此许多电子邮件客户端不允许使用外部.css引用。 嵌入式CSS可能会有所帮助。
缺点：填充HTML空间/占用带宽，不能在页面之间重用 - 甚至IFRAMES也不行。
2. 嵌入式CSS
优点：与原型相同，但在模板完成后更容易从最终原型中剪切并放入外部文件中。
缺点：一些电子邮件客户端不允许在[head]中使用样式，因为大多数网络邮件客户端都会删除head标记。
3. 外部CSS
优点：易于维护，并可在具有多个页面的网站之间重复使用。
优点：可缓存=带宽较少=第二页加载后更快的页面呈现。
优点：包括.css在内的外部文件可以托管在CDN上，从而减少与托管HTML页面（如果在不同主机上）的防火墙/ Web服务器的请求。
优点：可编译，您可以自动从最终版本中删除所有未使用的空间，就像jQuery有开发人员版本和压缩版本一样=更快的下载速度=更快的用户体验+较少的带宽使用=更快的互联网！（我们喜欢！）
缺点：通常会从HTML邮件中删除 = 混乱的HTML布局。
缺点：每个文件需要额外的HTTP请求=防火墙/路由器使用更多资源。
希望这些内容会对你有所帮助。
- BerggreenDK
8
我将提出一种观点，认为外部样式表是唯一可行的方法。
内联CSS混合了内容和呈现方式，导致一团糟。
嵌入式CSS随着每个页面请求的加载而改变，无法在不同页面之间共享，并且内容无法被缓存。
本身我不反对任何一种方法，但如果计划开发新的网站或应用程序，则应该考虑使用外部样式表。
- Pekka
1
同样的情况也适用于JavaScript，该死的，我见过很多来自烂CMS插件的混乱HTML输出。 - BerggreenDK
6
内联
快速，但非常粗略
这也是HTML格式电子邮件的唯一真正合理的选项，因为其他形式经常会被各种电子邮件客户端丢弃。
嵌入式
不需要额外的HTTP请求，但没有以下好处：
链接式
可以缓存，重用于页面之间，在验证器中更容易测试。
- Quentin
1
你需要外部 CSS。它是最容易维护的，外部 CSS 还简化了缓存。嵌入式意味着每个单独的 HTML 文件都需要有自己的 CSS，这意味着更大的文件大小和在更改 CSS 时会遇到很多麻烦。内联 CSS 更难维护。
外部 CSS 是正确的选择。
- ase
1
从哪里开始！！？？
假设你有一个有3个页面的网站... 你可以使用内联CSS（即在页面上自身的CSS，放在标签内）。
如果你有一个有100个页面的网站... 你不想要在每个页面上单独更改CSS（或者你会吗？！）... 所以包含一个外部CSS样式表会是更好的选择。
- Barrie Reader
1
在以下情况下使用外部CSS：
- 如果您有大量的CSS代码，将所有代码都放在内联中会使文件变得混乱
- 您想要在多个页面上保持标准的外观和感觉
外部CSS使管理CSS变得更加容易，并且是实现样式的接受方式。
如果样式仅适用于一个文件，并且您不预见将来会应用于其他页面，则可以将CSS放在文件顶部（嵌入式？）。
通常只有在以下情况下才使用内联CSS：
- 这是特定标记的一次性格式化
- 您想要覆盖特定标记的默认CSS（在外部或文件顶部设置）
- froadie
1
内联CSS通常不好。当所有样式位于一个中央位置时，修改页面的样式会更容易，而内联CSS并没有提供这种功能。它很容易用于快速原型设计样式，但不应在生产中使用，特别是因为它经常导致样式重复。
嵌入式CSS将页面的样式集中在一起，但它不允许您在不复制嵌入式样式文本并将其粘贴到站点上的每个唯一页面的情况下共享样式。
外部CSS是最好的选择，它具有嵌入式CSS的所有优点，但允许您在多个页面之间共享样式。
- Andrew Noyes
1
对于在2015年之后阅读此文的现在的每个人，如Polymer、Browserify、Webpack、Babel等项目以及许多其他重要参与者，我们已经迈入了一个新时代，就如何将大型应用程序模块化、分发变更并将相关的演示、标记和行为组合成自包含单元。更不用说服务工作者了。
因此，在任何人对可行性形成意见之前，我建议他们调查一下当前的网络生态系统，看看是否已经优雅地解决了与可维护性相关的一些问题。
因此，在任何人对可行性形成意见之前，我建议他们调查一下当前的网络生态系统，看看是否已经优雅地解决了与可维护性相关的一些问题。
- Filip Dupanović
0
如果您正在使用服务器端语言，为什么不嵌入CSS并使用条件编程根据需要显示它呢？例如，假设您正在使用带有WordPress的PHP，并且您想要一些特定于主页的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）我真的看不到其他任何缺点，请告诉我！
- James Huckabone
0
优点：
允许您使用一个文件控制整个网站的布局。 更改会同时影响所有文档。 可以消除冗余的内联样式（字体、加粗、颜色、图像）。 为不同类型的用户提供相同内容的多个视图。
缺点：
旧版浏览器可能无法理解CSS。 CSS在每个浏览器上的支持程度不同。 在这种情况下，优点远远超过缺点。实际上，如果网站以特定方式设计，则旧版浏览器将比使用表格管理网站时更好地显示内容（平均而言）。
- Chauhan Ronak H
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接