内联HTML与外部CSS效率/最佳做法
[英]Inline HTML vs external CSS efficiency/Best practices
问题描述
正在处理个人项目的网页，并且对效率或当前标准的HTML内联样式或使用外部CSS文件有疑问。 基本上，我将要在几个不同的页面上放置一些遵循此模式的文本块：
带下划线的线
粗体：正常字体粗细的一堆数字
粗体：正常字体粗细的一堆数字
等等
粗体：正常字体粗细的一堆数字
每个页面将在页面上重复这种类型的文本块100-500次。 我想知道，如果我用HTML内联样式化每个块，或者使用CSS会更好，是否有什么区别？ 即：
<u>Underline</u>
<b>Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
<b>Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
etc
与
<style><!-- I'd use an external CSS file, but putting this in style tags to show what I'm thinking -->
div .underline { font-decoration: underline;
display: inline; }
div .bold { font-weight: bold;
display: inline; }
</style>
<body>
<div class="underline">Underline</u>
<div class="bold">Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
<div class="bold">Bold:</b> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
etc
</body>
这些方法中的任何一种是否比另一种更有效？ 我确定这对我的项目规模无关紧要，但是我很好奇是否最好一遍又一遍地重复b和u标签，或者改用div和classs。 一种方法在世界上是否比另一种方法更普遍被接受？ 谢谢！
4 个解决方案
解决方案1
0 2017-04-08 17:11:01
我一直认为内联是最好的方法，当且仅当您将该页面作为一个单元导出到其他应用程序，电子邮件快速发送，移动传递-或您拥有什么。
但是，从编写HTML标记的外部CSS文件中获得最好的收益。 它将使您的HTML整洁并易于管理。 您也可以在CSS文件中编写浏览器大小限制，因此，移动交付适用于不同类型的视图。
解决方案2
0 已采纳 2017-04-08 17:11:24
与嵌入式CSS相比，外部CSS类在页面加载时间上有显着差异。 当用户重复加载html页面时，外部css文件将被缓存在浏览器中，因此加载变得更快，因为对于内联样式而言，每次都需要加载
解决方案3
0 2017-04-08 17:16:19
内联CSS：内联样式通过将内容与表示混合在一起而失去了样式表的许多优点。 谨慎使用此方法！ 要使用内联样式，请在相关标签中使用style属性。 样式属性可以包含任何CSS属性。
内部CSS：当单个文档具有唯一样式时，应使用内部样式表。 外部CSS：将样式应用于多个页面时，外部样式表是理想的选择。 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观。
因此，我建议您使用外部CSS的最佳实践。
解决方案4
0 2017-04-18 19:23:52
外部CSS类在页面加载时间上有很大的不同
还请考虑是否正确，服务器是否还有其他问题-查找负载问题，或者文件很大，而示例CSS仅放入您真正需要的文件中。
外部CSS不应增加您的负载时间。
我会寻找异步方法来加载css和js文件。
如何覆盖已经从外部HTML标记为！important的内联CSS
[英]How to override inline CSS that is already marked !important from external HTML
以内联样式将外部CSS应用于HTML节点（香草Javascript /咖啡脚本）
[英]Apply External CSS to HTML Nodes as Inline Style (vanilla Javascript/Coffeescript)
在动态html中呈现外部，内部，内联CSS样式之间的区别
[英]Difference between rendering external, internal, inline css styles in dynamic html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.