CSS學習筆記-【內聯樣式、內部樣式、外部樣式表】 AND 2018-11-21（21:18）
阿新 • • 發佈：2018-11-23
一、內聯樣式
1.在DIV標籤中新增內聯樣式。
新增style屬性 。
在style中屬性和值得表示方法為：
style=“屬性:值;屬性:值”;
例如：
<div style="Color: red;border: 1px dashed black" >內聯樣式表</div>
二、內部樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內部樣式表</title> <style type="text/css"> /*寫樣式*/ div{ color: red; /*邊框 ： 邊框粗細、邊框樣式（dashed虛線、solid實線）邊框的顏色*/ border: 1px solid black; } </style> </head> <body> <div>內部樣式表</div> <br/> <div>內部樣式表2</div> </body> </html>
以以上程式碼為例：
將內部樣式寫在head標籤中。
格式為：
<style type="text/css">
div(標籤名){
屬性：值;
屬性：值;
}
</style>
此樣式會應用在此頁面所有的DIV標籤上。
三、外部樣式表
CSS檔案：
div{
color: red;
border: 1px solid green;
}
第一個HTML檔案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部樣式表</title> <link rel="stylesheet" type="text/css" href="Demo.css"> </head> <body> <div>外部樣式表demo.html</div> </body> </html>
第二個HTML檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式表</title>
<link rel="stylesheet" type="text/css" href="Demo.css">
</head>
<body>
<div>外部樣式表demo2.html</div>
</body>
</html>
首先建立兩個HTML頁面和一個CSS外部樣式表。
上面的程式碼是CSS表中的DIV的屬性通過Link標籤在兩個不同的HTML完成CSS的樣式。瀏覽器會從.css檔案中讀取樣式，並對頁面上的html進行修飾。
Link標籤屬性：
rel:定義當前文件與被連線文件之間的關係。
href:定義被連線的文件URL。
type:定義被連線文件的MIME型別。
註釋：
樣式用法：
如果有多個頁面需要用同一種樣式，那麼就用外部樣式表。
如果是單個頁面需要用這一種樣式，就用內部樣式表。
如果是一個標籤用CSS的樣式，就用內聯樣式。