CSS的三種引用方式
在HTML中，引入CSS共有三種方式，分別是外部樣式表，內部樣式表，內聯樣式表。
1、外部樣式表
外部樣式表是最理想的CSS引用方式，在實際開發中，為了提高網站的性能和維護性，一般都是使用外部樣式表。所謂的外部樣式表，就是把CSS代碼單獨放在一個文件中，然后通過HTML文檔中link標簽，導入樣式表。
語法：
<link href="文件路徑" rel="stylesheet" type="text/css">示例代碼：
<html>
<head>
<title>外部樣式表</title>
<link href="1.css" rel="stylesheet" type="text/css>
</head>
<body>
<div></div>
</body>
</html>link標簽，是在head內部使用的，通過導入css文件，來達到代碼分離的目的。
2、內部樣式表
內部樣式表，就是HTML代碼和CSS代碼在同一個文件中。css代碼放在<style></style>標簽內，並且把<stytle></style>放在<head>內部。
語法：
<style type="text/css">
......
</style>示例代碼：
<html>
<head>
<title>內部樣式表</title>
<stytle type="text/css">
div
{
.......
}
</style>
</head>
<body>
<div></div>
</body>
</html>對於內部樣式表，css樣式代碼必須放在style標簽內部，並且style放在head內部。
3、內聯樣式表
內聯樣式表，也是把HMTL和CSS代碼放在一個文件中，但是不是放在<head>內部，而是通過<style>標簽放置在HTML的各個元素標簽內。
語法：
<div style="width:100px;height:100px;"></div>示例代碼：
<html>
<head>
<title>內聯樣式表</title>
</head>
<body>
<p style="color:Red">CSS入門基礎</p>
<p style="color:blue">CSS入門基礎</p>
<p style="color:green">CSS入門基礎</p>
</body>
</html>大家注意觀察，內聯樣式表直接對所在標簽起作用，如果需要標簽實現效果，需要針對每個標簽都寫css代碼，容易造成冗余，維護css代碼時還需要找到標簽，這對於維護大型網站來說，工作量大，還容易出錯。
在HTML入門學習時，不建議大家使用Dreamweaver那種“點點點”的方式開發網頁，該工具生成的網頁代碼均是使用的內聯樣式代碼，后期維護起來非常麻煩，冗余較多，也不便於初學者理解。
在實際開發中，我們都會使用外部樣式表，這樣代碼分離，需要修改樣式時，只需要修改css樣式代碼文件，網頁就會自動產生效果，很方便。但是分享學習過程中，我會使用內部樣式表的方式，因為這樣CSS代碼和HTML代碼在同一個文件中，方便修改和測試。
除了上面提到的三種引用方式，CSS還有一種@import方式，這種方式類似於外部樣式表的調用，但是在實際開發中，極少用到@import方式，原因在於，@import方式先加載HTML后再加載CSS，link方式是先加載CSS后加載HTML，如果HTML先與CSS加載，網頁的觀感會非常差，影響用戶體驗，所以一般我們都是使用link方式。
了解前端培訓開發技術知識，關注我，有更多精彩內容與您分享！