html怎麼匯入css文件
- 青灯夜游原創
- 2021-06-15 14:09:2512739瀏覽
方法：1.使用link標籤，語法「」；2、使用「@import」規則，語法“@import url("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>
效果圖：
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>效果圖：
（學習影片分享：css影片教學）
以上是html怎麼匯入css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn