html如何連接外部css檔案？

在學習前端的時候，我們應該知道css為html標記增加各種樣式，用來告訴瀏覽器，因為該如何顯示這些標記裡面的內容。既然css是用來為html添加各種樣式的，那麼，html中要如何引入外部的css文呢？這篇文章將為大家介紹關於html引進css檔案的四種方法，以下我們就來看看具體的內容。

html連接外部css檔案的方法：

1、html引入css檔案之直接在div中使用css樣式製作div css網頁

<div style="border:1px red solid;">html引入css文件</div>

說明：html引入css檔案的這種方法不建議使用，因為會讓頁面的標籤很多，看起來很累贅，體現不了css的優勢，當然如果你很想用這種方法，在不常改變的地方可以用一用，但還是不建議。

2、html引入css檔案之html中使用style自帶式

#直接在header 裡面寫css

<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

說明： html引入css檔案的這種方法適合在頁面較少的情況下使用。優點：速度 快，所有的css控制都是針對本頁標籤的，沒有多餘的css指令；再者不用外鏈css檔。直接在html文檔中讀取樣式。缺點如果頁面多改版會很麻煩，單頁 面顯得臃腫，css不能被其他html引用造成代碼量相對較多，維護也麻煩一點。但是採用這種方法的公司大多有錢，對他們來說用戶量是關鍵，他們不缺人進 行複雜的維護工作。

3、html引入css檔案之使用@import引用外部CSS檔案

將一個獨立的.css檔案引入HTML文件中，導入式使用css規則引入外部css文件，c9ccee2e6ea535a969eb3f532ad9fe89標記也是寫在93f0f5c25f18dab9d176bd4f6de5d30e標記中，使用的語法如下：

<style type="text/css">
    @import"mystyle.css"; 此处要注意.css文件的路径
</style>

4、html引入css文件之使用link引用外部CSS檔案

 在網頁的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1標籤對中使用2cdf5bf648cf2f33323966d7f58a7f3f標記來引入外部樣式表文件，使用html規則引入外部css。

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

說明：html引入css檔案的這種方法就不需要style標籤，而是直接透過link一個樣式來引用外部樣式，推薦使用link來引用外部的css樣式方法。

以上就是介紹給大家的四種html引入外部css檔案的四種方法，更多關於html和css的內容可以關注php中文網。

以上是html如何連接外部css檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！