溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css樣式引入方式的優缺有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
三種css的引入方式
1.行內樣式
優點：書寫方便，權重高缺點：沒有做到結構樣式相分離
<div style="width: 100px" height:100px></div>
2.內部樣式
優點：結構樣式相分離缺點：分離不徹底
<style>
div {
color: violet;
font-size: 16px;
}
</style>3.外部樣式
優點:完全實現結構和樣式相分離缺點：需要引入
<!-- 引入css初始化文件 --> <link rel="stylesheet" href="css/normalize.css" /> <!-- 引入公共樣式 --> <link rel="stylesheet" href="css/baes.css"> <!-- 引入首頁樣式 --> <link rel="stylesheet" href="css/index.css">
補充：四種CSS樣式的引入方式
準備
1.首先準備一個html文件：test.html，不建議使用記事本創建文件，建議使用Notepad++來創建并編輯文件，注意編碼格式為：以UTF-8無BOM格式編碼，否則會出現中文亂碼，內容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>四種CSS樣式引入方式</title> <style type="text/css"> </style> </head> <body> hello </body> </html>
2.保存文件至桌面，右鍵選擇谷歌瀏覽器（或其他瀏覽器打開）打開，發現頁面上出現了hello這幾個英文字母。
四種引入方式
行內式
通過html屬性style實現，如下所示
//寫在body標簽中 <span style="color:red;">行內式</span>
嵌入式
在style標簽中寫css樣式，在body中引用
//寫在style標簽中的css樣式
p{
color:blue;
}
-----------------------------------------------------------------
//寫在body標簽中
<p>嵌入式</p>鏈接式
1.一般都使用這種方式，在桌面上新建一個css文件：test.css，內容為一個css樣式
//寫在test.css文件中
div{
color:yellow;
}2.在test.html引入test.css文件
//寫在head標簽中引入css文件，href屬性中的為絕對路徑，當前在同一級目錄下 <link href="test.css" type="text/css" rel="stylesheet" /> ------------------------------------------------------------------------ //寫在body標簽中 <div>鏈接式</div>
導入式
@import(url(demo.css))
1.基本不使用，因為頁面會先加載html，然后再去加載css，這樣就會造成頁面樣式的延遲。
2.創建一個demo.css文件，寫上一個css樣式
//寫在demo.css文件中
h3{
color:green;
}3.使用@import方式導入demo.css文件
//試驗了一下，需要單獨寫在一個style中， <style> @import url(demo.css) </style> ---------------------------------------------------------------------------- //寫在body標簽中 <h3>導入式</h3>
html頁面代碼
頁面效果圖
前三種樣式的顯示優先級
就近原則，即行內式>嵌入式>嵌入式
關于“css樣式引入方式的優缺有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
