html怎麼匯入css文件-html教學-PHP中文網

首頁

web前端

html教學

html怎麼匯入css文件

青灯夜游

Jun 15, 2021 pm 02:09 PM

css檔案 html

方法：1.使用link標籤，語法「」；2、使用「@import」規則，語法“@import url("CSS檔案路徑");”。

html怎麼匯入css文件

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS文件一般叫CSS外部樣式表，是用來放置CSS程式碼的文字文件，而CSS程式碼具有一定規律規則的文字程式碼組成。我們使用記事本將副檔名更改即可變成CSS檔。

css檔案是以.css為後綴名的，我們看到以.css為後綴的檔案就是css檔案。

html怎麼匯入css檔案

html中匯入css檔案的方法有兩種：

連結式（link )
導入式（@import）

css樣式檔--style.css程式碼：

p{
font-size: 20px;
color: #fff;
background-color: palevioletred;
}

登入後複製

1、連結式（link）

連結式會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

語法：

<link rel="stylesheet"  type="text/css"  href="css文件的路径" >

登入後複製

程式碼實例：

HTML程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接式</title>
<link rel="stylesheet" type="text/css" href="style.css"  >
</head>
<body>
<p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p>
</body>
</html>

登入後複製

效果圖：

html怎麼匯入css文件

2、導入式（@import）

導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的缺陷。

語法：

<style type="text/css" media="screen">   
@import url("CSS文件路径");
</style>

登入後複製

程式碼實例：

#HTML程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">   
@import url("style.css");   
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>

登入後複製

效果圖：

html怎麼匯入css文件