在進行頁面佈局時，必然會用到CSS和HTML，因為HTML是頁面的主體內容部分，CSS是頁面的表現，通俗的講，CSS是給HTML進行化妝的。那CSS的樣式怎麼在HTML中實現呢？這時候就需要在HTML中引入CSS檔案，今天就和大家聊聊如何將CSS導入HTML中，有需要的可以參考一下。
將CSS導入HTML的方式有四種，分別是行內式，嵌入式，外部樣式。外部樣式又分為import導入式，link連結式。
一、行內式，即在HTML標籤中直接加上css樣式，用style新增。
例如：將div中的字體設定為40px，顏色設為紅色。程式碼如下：
<div style="font-size: 40px;color: red;">今天星期一</div>
效果圖：
#二、嵌入式，即將CSS樣式寫在中，然後將style放在
之間。例如：在中用@import的URL引入。
例如：用import導入式將div的字體設為40px,顏色為黃色。程式碼如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>效果圖：
2、link連結式，即在
調用外部css檔案來實現樣式效果。例如：用外部樣式link將div的顏色設定為綠色，字體為40px。程式碼如下：
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html>
效果圖：
#總結：
##1、行內式這種方式麻煩，查找不方便，也沒有反映CSS的優勢，因此不建議使用。2、嵌入式對於大的頁面不建議使用，對於小的樣式少的網頁可以使用。
3、同樣是外部樣式，
import導入式和link連結式的差別在哪裡？ 使用link連結式，會在載入頁面主體內容之前載入CSS樣式文件，這樣使用者看到的網頁一開始就是帶有樣式效果的。如果使用import導入式，會在整個頁面載入完成後再載入CSS樣式文件，所以有時候會出現顯示無樣式狀況，閃爍一下後再出現設定樣式後的效果。因此從使用者體驗來說，還是建議使用link連結式來引入CSS樣式。
以上是分享四種方式將CSS樣式匯入到HTML中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
