內聯式 代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內嵌式</title>
</head>
<body>
<p style='color:red;'>文字顏色為紅色</p>
</body>
</html>
-
執行結果
image
嵌入式 代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type='text/css'>
span{
font-size:18px; /*字體大小 (單位px)*/
color: red; /*字體顏色 (紅色)*/
}
</style>
</head>
<body>
<span>學習使人快樂</span>
</body>
</html>
-
執行結果
image
外部式 代碼
/*外部式css樣式(也可稱為外鏈式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以”.css”為擴展名，在<head>內（不是在style標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下代碼：*/
/*css樣式文件名稱以有意義的英文字母命名，如main.css、index.css、base.css等。
rel=”stylesheet”
rel:relationship的縮寫，rel屬性用于定義鏈接的文件和HTML文檔之間的關系
stylesheet：文檔的外部樣式表
href：Hypertext Reference的縮寫。意思是指定超鏈接(之前學習a標簽的時候)目標的URL。是css代碼的一種。href屬性的值為樣式表文件的地址。*/
/*大家試想一下，如果我們做一個類似淘寶那樣的商城網站，那么隨著項目需求的增多，我們的css代碼量也會更龐大，越發到了后期，我們上述的內聯式和嵌入式css樣式的方式肯定是不行的，那我們應該怎么辦? 這個時候，我們可以使用將我們的css代碼編寫到另一個單獨的文件中，以為了后期方便維護我們的代碼。那么這就是外部式css樣式。*/
/*html代碼*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="測試2.css" type="text/css">
</head>
<body>
<span>好好學習天天向上</span>
</body>
</html>
/*css代碼*/
span{
color: blue;
font-size: 24px;
}
-
執行結果
image -
三種引入方式的優先級
內聯式>嵌入式>外部式
-
但是
嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- 嵌入式css樣式的位置一定在外部式的后面 -->
<link rel="stylesheet" href="index.css">
<style type="text/css">
p{
color:green; /*字體顏色 綠色*/
}
</style>
</head>
<body>
<p style='color:red;'> /*字體顏色 紅色*/
你好朋友
</p>
</body>
</html>
-
執行結果
image
-
總結: 就近原則（離被設置元素越近優先級別越高 ）
最后，給大家推薦一個前端學習進階內推交流群685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（群內會定期免費提供一些群主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）
如果您對這個文章有任何異議，那么請在文章評論處寫上你的評論。
如果您覺得這個文章有意思，那么請分享并轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。
愿大家都能在編程這條路，越走越遠。
