css的四種引入方式
阿新 • • 發佈：2021-06-23
css概述：
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。
css的四種引入方式：
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用
<div style="color: deeppink; background-color: greenyellow">hello man</div>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color:deeppink; font-size: 20px; background-color: yellowgreen; } a{ text-decoration: none; } </style> </head>
3 連結式
將一個.css檔案引入到HTML檔案中
<link rel="stylesheet" href="day102.css">
4.匯入式
將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中
<style> @import "day102.css"; </style>
注意：
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的四種引入方式"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="60;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>Title</title> <style> /*p{*/ /* color:deeppink;*/ /* font-size: 20px;*/ /* background-color: yellowgreen;*/ /*}*/ /*a{*/ /* text-decoration: none;*/ /*}*/ </style> <!--第二種css引入方式(嵌入式)：style標籤通過css程式碼所寫標籤名字來找--> <!--<link rel="stylesheet" href="day102.css">--> <!--第三種css引入方式(連結式)，通過引入css檔案，css檔案直接寫css程式碼就可以了；通過html語言規範引用過來，屬於html範疇；link引入次數不限，可引入多個檔案；先準備css，準備好後再載入html--> <style> @import "day102.css"; </style> <!--第四種css引入方式(匯入式)，通過css規範引用過來的；匯入式檔案數量有限制；先載入html後加載css，所以有時候看到有些html沒有被css渲染--> </head> <body> <!--<div style="color: deeppink; background-color: greenyellow">hello man</div>--> <!--style屬性值就是css程式碼，css程式碼規範就是一組組鍵值對；這是第一種css引入方式(行內式)，以後儘量不要這麼使用--> <span>hello span</span><br> <a href="https://www.baidu.com" target="_blank">我可以點選</a> <p>hello p</p> <p>hello p2</p> </body> </html>
p{ color:greenyellow; background-color: red; } a{ text-decoration: none; }
css檔案裡的程式碼，直接寫css程式碼即可