前端 CSS 三種引入方式
阿新 • • 發佈：2019-04-30
html文檔 () http 前端 類型 import 表現 mic pat
CSS三種引入方式
- 行內樣式
- 內接樣式
- 外部樣式
- 鏈接式
- 導入式
行內樣式
就是在標簽加上style屬性設置樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <!-- 行內樣式 --> <div> <p style="color: red">我是一個段落</p> </div> </body> </html>
內接樣式
CSS樣式寫在head標簽裏面的style標簽裏面，格式如下：
<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> /* 寫我們的CSS代碼 */ /* 標簽選擇器*/ span{ color: red; } </style> </head> <body> <!-- 內接樣式 --> <div> <span>我是一個段落</span> </div> </body> </html>
這種方法是標簽選擇器，span他會檢索body文檔，一個一個標簽進行檢索，只要找到span標簽就加上樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> /* 寫我們的CSS代碼 */ /* 標簽選擇器 */ span{ color: red; } </style> </head> <body> <!-- 內接樣式 --> <div> <span>我是一個段落</span> <span>我是一個段落</span> <span>我是一個段落</span> </div> </body> </html>
外接樣式-鏈接式
外部樣式 鏈接式就是將css寫在一個單獨的文件中，然後在頁面進行引入即可。推薦使用此方式。
在head標簽裏面的link標簽 鏈接CSS樣式文件 rel文檔類型是CSS
<link rel="stylesheet" href="">
這種就是內容和表現分離 HTML文檔和CSS關系
index.css
a{ font-size: 30px; }
然後在HTML文件中通過link標簽引入：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 外接樣式 鏈接式 --> <div> <a>我是一個a標簽</a> </div> </body> </html>
默認是16px像素的
外接樣式[email protected] url()方式 導入式
@import url();必須寫在文件最開始的位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <!-- 導入式 --> <style> @import url(‘./index.css‘); </style> </head> <body> <!-- 外接樣式 導入式 --> <div> <a>我是一個a標簽</a> </div> </body> </html>
驗證 有沒有加載css文件
鏈接導入方法
link標簽鏈接index.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 外接樣式 鏈接導入式 --> <div> <a>我是一個a標簽</a> </div> </body> </html>
到index.css 裏 導入content.css文件的樣式
index.css
@import url(‘content.css‘);
content.css
a{
font-size:30px
}
平時在項目建一個css文件夾，所有css文件放在這個文件夾裏面
前端 CSS 三種引入方式