Question

在个人项目的网页上工作，并提出有关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

VS

<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和而是改为。这两种方法在世界上比其他方法更常被接受吗？谢谢！

Answer 1

我一直认为内联是最好的，当且仅当你将该页面作为一个单元导出到其他应用程序，电子邮件爆炸，移动交付 - 或者你有什么。

但是，您最好使用外部CSS文件来编写HTML标记。它将使您的HTML保持清洁和易于管理。您也可以在CSS文件中编写浏览器大小限制，以便为不同类型的视图提供移动交付。

Answer 2

与内联css相比，外部css类在页面加载时间方面有显着差异。当用户重复加载html页面时，外部css文件将缓存在浏览器上，因此加载变得更快，因为内联样式需要每次加载

Answer 3

内联CSS：通过将内容与演示混合，内联样式失去了样式表的许多优点。谨慎使用这种方法！要使用内联样式，请使用相关标记中的style属性。 style属性可以包含任何CSS属性。

内部CSS：当单个文档具有唯一样式时，应使用内部样式表。外部CSS：当样式应用于许多页面时，外部样式表是理想的选择。使用外部样式表，您可以通过更改一个文件来更改整个Web站点的外观。

因此，我建议您使用最佳实践使用外部CSS。

Answer 4

外部css类在页面加载时间方面有显着差异

还要考虑是否属实，您的服务器还有其他问题 - 查找负载问题，或者文件很大，样本CSS只放在您实际需要的地方。

外部CSS不应该为您的负载增加大量时间。

我会寻找加载css和js文件的异步方法。

内联HTML与外部CSS效率/最佳实践

4 个答案: