目錄
內聯式 代碼
<!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>
-
執行結果
嵌入式 代碼
<!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>
-
執行結果
外部式 代碼
/*外部式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;
}
-
執行結果
-
三種引入方式的優先級
內聯式>嵌入式>外部式
-
但是
嵌入式>外部式有一個前提：嵌入式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>
-
執行結果
-
總結: 就近原則（離被設置元素越近優先級別越高 ）
歡迎評論點贊交流,轉發請添加原博客連接謝謝!