內聯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.