溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html中如何鏈接css文件”，在日常操作中，相信很多人在html中如何鏈接css文件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html中如何鏈接css文件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.行內式
這是一種直接在html文件中書寫的代碼，通常我們使用style屬性在特定的Html中標記設置css的樣式，但是建議不要使用這種方式，因為在每一個html的標記中都需要單獨的設置樣式，如果當你使用這個方法的時候會加大工作量，而且管理和檢查起來會比較的麻煩。但是在簡易的設計中使用這種方法會比較方便，代碼于截圖如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html鏈接css的方法</title>
</head>
<body >
<h2 >
w3cschool - 億速云，隨時隨地學編程
</h2>
<p >
w3cschool,億速云,web前端開發,菜鳥教程,編程入門教程
</p>
</body>
</html>
2.內嵌式
在這個方法中，我們會發現代碼中會比行內式的比較不會那么的雜亂，而且內嵌式的用法就是把 css 代碼放在特定頁面的<head>部分中。而且在內嵌CSS的時候，需要把內容放在<style></style>標簽之間。類選擇器可用于引用CSS代碼，但是他們僅在該特定頁面上處于活動狀態；這樣可以提高加載速度。在某些情況下使用內嵌樣式是很有用，當我們向其他人發送頁面模板的時候，因為內容都在一個頁面中，所以看到預覽要容易得多；內嵌式的編寫代碼例子代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css制作導航欄</title>
<style>
ul{list-style-type: none;
margin: 0;padding: 0;
overflow: hidden;
background-color: antiquewhite;}
li{float: left;}
li a{display: block;
color: peru;
padding: 8px 16px;
text-decoration: none;}
li a.active{background-color: palegreen}
li a:hover:not(.active){background-color: gray;
color: white;}
</style>
</head>
<body>
<p>css制作導航欄</p>
<ul>
<li><a class="active" href="">主頁</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">更多</a></li>
</ul>
</body>
</html>3.外聯式
這個就是我們最經常使用的一個方式，外聯式就是使用link標簽將 html 文件外的 css 鏈接起來，從而將.css文件中的樣式使用鏈接起來。這樣雖然多了些步驟，但是在實際的運用中，我們可以更加方便的找尋到問題的所在進行修改，從而更加快速的完成任務。外聯式的鏈接代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css寫一個三角形</title>
<link href="css/test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="uptriangle">
</div>
</body>
</html>到此，關于“html中如何鏈接css文件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
