如何插入樣式表？ 代碼應該寫到什麼地方呢？ 代碼分為三種插入方式，接下來筆者給園友們介紹有哪些插入方式： 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式？ 嵌入式就是將寫好的 代碼嵌入到 文件中，嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下： 如果我們使用的是 的文檔， 標簽中 ...
如何插入樣式表？
CSS代碼應該寫到什麼地方呢？CSS代碼分為三種插入方式，接下來筆者給園友們介紹有哪些插入方式：嵌入式、外鏈式、行內式。
嵌入式
什麼是嵌入式？
- 嵌入式就是將寫好的
CSS代碼嵌入到HTML文件中，嵌入式是通過HTML中的style標簽將CSS代碼嵌入到HTML網頁當中的。 語法規則如下：
選擇器{屬性:值;屬性:值;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type="text/css">
/*書寫CSS代碼塊的地方*/
選擇器{屬性:值;屬性:值;}
</style>
</head>
<body>
</body>
</html>- 如果我們使用的是
HTML5的文檔，style標簽中的type屬性可以省略掉。 註意：
stype標簽它可以出現HTML中的任何地方，但是我們一般會將它放置在head標簽中。
嵌入式實例
- 接下來讓我們進入嵌入式實踐，實例內容如下：將
div寬高度設置為300像素和div的邊框顏色設置為紅色，以及div中的h1標簽字體顏色設置為紅色。 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌入式</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border:3px solid red;
}
h1{
color: red;
}
</style>
</head>
<body>
<div>
<h1>微笑是最初的信仰</h1>
</div>
</body>
</html>結果圖
外鏈式
什麼是外鏈式？
- 外鏈式是指書寫一個存放
CSS代碼的文件，文件的擴展名為.CSS。然後將其文件放在HTML文件中的head標簽中並且以link標簽形式存放在HTML文件當中。 現在我們創建一個名稱為
index.css的文件。
- 大家點擊是就OK了
實踐效果為：
註意：
CSS文件不能單獨的運行，它必須依賴於HTML文件。- 語法規則如下：
<link rel="stylesheet" href="index.css">link標簽中的rel="stylesheet"屬性，表示以樣式表的關係引入到HTML文件當中。link標簽中的href屬性，表示要引入的CSS文件路徑，輸入我們要使用的CSS文件路徑，可以使用相對路徑和絕對路徑。
外鏈式實例
接下來讓我們進入外鏈式實踐，筆者將剛纔創建好的
index.css文件引入到HTML文件當中，並且實現以下功能：將div寬高度設置為300像素和div的邊框顏色設置為紅色，以及div中的h1標簽字體顏色設置為紅色。CSS代碼塊
div {
width: 300px;
height: 300px;
border: 3px solid red;
}
h1 {
color: red;
}註意：在這個
index.css文件中只能編寫CSS代碼，如：選擇器{屬性：值;}這樣的形式。一個
HTML頁面中同時可以引入多個單獨的CSS文件，以link標簽的形式引入。HTML代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外鏈式</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<h1>微笑是最初的信仰</h1>
</div>
</body>
</html>結果圖
行內式
什麼是行內式？
- 將CSS代碼寫在HTML標簽的style屬性當中。
- style是一個通用的屬性，每一個標簽都擁有這個屬性。
- 語法規則如下：
- 單個屬性的用法
<標簽名 style="屬性：值;"></標簽名>- 多個屬性的用法
<標簽名 style="屬性：值;屬性：值;....."></標簽名>- 接下來讓我們進入行內式實踐，並且實現以下功能：將
div寬高度設置為300像素和div的邊框顏色設置為紅色，以及div中的h1標簽字體顏色設置為紅色。 - 代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行內式</title>
</head>
<body>
<div style="width: 300px;height: 300px; border: 3px solid red;">
<h1 style="color: red;">微笑是最初的信仰</h1>
</div>
</body>
</html>- 結果圖
總結
- 使用嵌入式和行內式的方式,它只能作用於當前的
HTML頁面當中。 - 使用外鏈式的方式，它可以作用於多個
HTML頁面當中。 - 筆者推薦使用外鏈式的方式編寫
CSS代碼。
