css 三種引用方式
- 2019 年 10 月 8 日
- 筆記
目錄
內聯式 代碼
<!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>
- 執行結果
- 總結: 就近原則（離被設置元素越近優先級別越高 ）
作 者：郭楷豐
