HTML 中引入 CSS 的方式

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。

內聯方式

內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。

導入方式

導入方式指的是使用 CSS 規則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導入方式

鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導入語句應寫在 CSS 中，要注意的是導入語句應寫在樣式表的開頭，否則無法正確導入外部文件；
@import 是 CSS2.1 才出現的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；
當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

小結：我們應盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。

前言

　　在跨域請求不同服務方或是兼容先前系統的頁面時，你可能想利用AJAX從網頁上下載HTML并粘貼到div中，這將帶來不安全注入的問題。

　　此時，通過iframe頁面嵌入可以很好地解決上述問題。

本文帶您了解iframe內聯框架，幫助您提高頁面集成效率和復用率，一次開發，多次使用。同時，解決在使用iframe跨域訪問時，第三方cookie暫存轉發問題。

　　iframe安全嵌入方案

　　iframe嵌入是一種快速的表示集成方法，具有以下三方面優點：

　　1.iframe是一個全新的獨立的宿主環境，用于隔離或者訪問原始接口及對象，并能夠原封不動地將嵌入的網頁展現出來；

　　2.如果有多個網頁引用iframe，只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷；

　　3.重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁。

　　例如，以vue工程為例，我們可以很輕松地嵌入iframe頁面，輕松實現頁面集成。

</div>

</template>

export default {

name: 'MyTestResource',

data() {

return{

iframeUrl: "",

}

created(){

this.iframeUrl = http://40. + "xxx-ev/ev/xxx/RedirectITA?toUrl=zycx&resouceCode=BBB&token=" + getLocalStorageToken()

　　在嵌入第三方服務頁面時，需要處理統一身份認證和保持登錄狀態的問題，下圖所示為iframe安全注入方案示例。

　　iframe安全注入服務流程為，用戶在本方服務頁面進行登錄，本方服務向統一身份認證平臺驗證用戶服務權限并得到本方服務令牌。

　　當用戶訪問嵌入第三方服務的iframe頁面時，本方服務向統一身份認證平臺驗證用戶服務權限并得到第三方服務令牌，通過URL傳送給第三方服務，第三方服務解析后向統一身份認證平臺驗證該用戶權限令牌信息，若用戶權限令牌信息正確則提供服務。

　　其中第三方服務對iframe 嵌入可以通過如下配置方式實現。

　　IE瀏覽器配置

　　為了控制iframe嵌入的權限，需要在Headers里面加入X-Frame-Options字段，其有三種值可以配置，具體如下表格所示。

　　Chrome、Edge瀏覽器配置

　　經過測試發現X-Frame-Options 對Chrome及Edge瀏覽器不起作用，需要配置Content-Security-Policy: frame-ancestors 對iframe 頁面嵌入進行安全控制。

　　X-Frame-Options及 Content-Security-Policy 可以同時配置多個白名單，具體如下：

　　Content-Security-Policy:

　　frame-ancestors http://aaa.com http://bbb.com http://ccc.com

　　X-Frame-Options:

　　ALLOW-FROM http://aaa.com,http://bbb.com,http://ccc.com

　　對于Nginx、apache 、IIS、tomcat 等不同的中間件有不同的配置方法，再次不再贅述，讀者可以根據需要的場景進行不同配置。

　　瀏覽器訪問iframe問題

　　我們在訪問iframe 嵌入頁面的時候，從本系統前端調用系統后臺服務后，sendRedirect到第三方系統后臺服務，對X-Frame-Options頭進行了驗證后，正常應該跳轉到請求頁面并對本系統瀏覽器進行內容響應。

　　實際使用過程中卻發生了奇怪的現象，第三方服務驗證X-Frame-Options跨站驗證后，302 跳轉到了請求頁面，又302 調用了登出接口，截止302 調用了登錄接口，最終為用戶響應了登錄頁面，如下圖所示。

　　猜測一下，問題可能出在以下幾個方面：

　　1.第三方服務調用統一安全認證服務失敗，跳轉登錄頁面，但是并沒有安全認證失敗的響應信息；

　　2.第三方服務沒有用戶信息，跳轉登錄頁面；

　　3.第三方請求跳轉頁面時，對用戶信息進行了基于瀏覽器信息的再次認證，失敗并跳轉登錄頁面。

　　經過驗證更換其他瀏覽器后，頁面可以正常訪問，說明統一安全認證無問題，且用戶信息也驗證正常，因此問題應該是第三種情況。

　　瀏覽器訪問iframe解決方案

　　經過分析發現，Chrome內核51版本開始，其對于Cookie的控制新增加了一個SameSite屬性，用來防止CSRF攻擊和用戶追蹤。

　　由第三方提供iframe嵌入頁面服務的Cookie在Chrome內核被認為是第三方Cookie，瀏覽器默認會禁止第三方Cookie跨域傳送，這里就涉及到瀏覽器Cookie 的SameSite屬性。

　　SameSite 可以有下面三種值：

　　1.Strict僅允許一方請求攜帶 Cookie，即瀏覽器將只發送相同站點請求的 Cookie，即當前網頁 URL 與請求目標 URL 完全一致；

　　2.Lax允許部分第三方請求攜帶 Cookie；

　　3.None無論是否跨站都會發送 Cookie。

　　通過下面表格，我們可以清晰看到，不同請求類型下，SameSit屬性對第三方Cookie 的響應方式。

　　從上表可以看出，對大部分 web 應用而言，Post 表單、iframe、AJAX這三種情況從以前的跨站會發送三方Cookie，變成了不發送。

　　故這三種情況跨站給第三方發送Cookie需要在設置的時候將SameSite設置為None。

　　通過研究，我們發現可以通過配置Chrome 、Edge瀏覽器SameSite 屬性可以有效解決該問題。

　　低于91版本的Chrome瀏覽器

　　Chrome中訪問地址chrome://flags/ 搜索samesite 將same-site-by-default-cookies，和SameSite by default cookies這兩項設置為Disabled后重啟瀏覽器再運行項目即可解決。該設置默認情況下會將未指定SameSite屬性的請求看做SameSite=Lax來處理。

　　Chrome及Edge瀏覽器

　　打開瀏覽器快捷方式的屬性，在目標后添加

　　--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure ，點擊應用、確定按鈕，重啟瀏覽器后生效。

　　"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"

　　通過執行腳本直接生成有效的快捷方式

chcp 65001

echo 正在創建桌面快捷方式，請勿關閉本窗口.

::設置程序或文件的完整路徑（必選）

set Program=%cd%\chrome.exe

::設置快捷方式名稱（必選）

set LnkName=SSSChrome

::設置程序的工作路徑，一般為程序主目錄，此項若留空，腳本將自行分析路徑

set WorkDir=%cd%

::設置快捷方式顯示的說明（可選）

set Desc=SSSChrome

if not defined WorkDir call:GetWorkDir "%Program%"

(echo Set WshShell=CreateObject("WScript.Shell"^)

echo strDesKtop=WshShell.SpecialFolders("DesKtop"^)

echo Set oShellLink=WshShell.CreateShortcut(strDesKtop^&"\%LnkName%.lnk"^)

echo oShellLink.TargetPath="%Program%"

echo oShellLink.Arguments="--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure"

echo oShellLink.WorkingDirectory="%WorkDir%"

echo oShellLink.WindowStyle=1

echo oShellLink.Description="%Desc%"

echo oShellLink.Save)>makelnk.vbs

echo 桌面快捷方式創建成功！

makelnk.vbs

del /f /q makelnk.vbs

exit

goto :eof

:GetWorkDir

set WorkDir=%~dp1

set WorkDir=%WorkDir:~,-1%

goto :eof

　　從下圖我們可以看到，響應請求，由原來的4個302 后跳轉到登錄頁面變為2個302 跳轉后正常進入功能頁面，解決了請求第三方iframe時不發送Cookie 造成第三方服務認證通過跳轉登錄頁面的問題。

　　總結

　　本文介紹了iframe內聯框架，幫助您安全地嵌入iframe頁面并提高頁面集成效率和復用率，達到代碼的高復用和良好的用戶體驗。

　　請求第三方iframe時，能夠對iframe進行請求頭驗證及統一安全驗證，實現iframe頁面安全嵌入。針對瀏覽器訪問第三方iframe時存在的第三方Cookie 不能正常發送問題，提供了可行的解決方案，可以為頁面嵌入使用方面提供有效的借鑒。

最后：

1）關注+私信回復：“測試”，可以免費領取一份10G軟件測試工程師面試寶典文檔資料。以及相對應的視頻學習教程免費分享！，其中包括了有基礎知識、Linux必備、Mysql數據庫、抓包工具、接口測試工具、測試進階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續集成、測試架構開發測試框架、性能測試等。

2）關注+私信回復："入群" 就可以邀請你進入軟件測試群學習交流~~

SVG（Scalable Vector Graphics）是一種基于XML的2D矢量圖形格式，可以實現圖像的無損縮放和高清晰度顯示。在HTML中嵌入SVG圖像，可以使網頁更加生動有趣，提高用戶體驗

<svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
</path>
<path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
</path>
<path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
</path>
<path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
</path>
</g>
</svg>

在線咨詢

上一篇：php去除HTML標簽實例_php實例_腳本之家
下一篇：前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 中引入 CSS 的方式

最后：

您的項目需求