免費(fèi)AI編程助手
在我們的平常學(xué)習(xí)中，每一個(gè)課時(shí)和每一個(gè)知識(shí)點(diǎn)直接都是有關(guān)聯(lián)的，那么今天我們就來說說怎么在html中鏈接css文件，下面是小編為大家準(zhǔn)備的一些鏈接css文件教程源碼！
1.行內(nèi)式
這是一種直接在html文件中書寫的代碼，通常我們使用style屬性在特定的Html中標(biāo)記設(shè)置css的樣式，但是建議不要使用這種方式，因?yàn)樵诿恳粋€(gè)html的標(biāo)記中都需要單獨(dú)的設(shè)置樣式，如果當(dāng)你使用這個(gè)方法的時(shí)候會(huì)加大工作量，而且管理和檢查起來會(huì)比較的麻煩。但是在簡(jiǎn)易的設(shè)計(jì)中使用這種方法會(huì)比較方便，代碼于截圖如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html鏈接css的方法</title>
</head>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">
w3cschool - 編程獅，隨時(shí)隨地學(xué)編程
</h1>
<p style="color:white;">
w3cschool,編程獅,web前端開發(fā),菜鳥教程,編程入門教程
</p>
</body>
</html>
2.內(nèi)嵌式
在這個(gè)方法中，我們會(huì)發(fā)現(xiàn)代碼中會(huì)比行內(nèi)式的比較不會(huì)那么的雜亂，而且內(nèi)嵌式的用法就是把 css 代碼放在特定頁(yè)面的<head>部分中。而且在內(nèi)嵌CSS的時(shí)候，需要把內(nèi)容放在?<style></style>?標(biāo)簽之間。類選擇器可用于引用CSS代碼，但是他們僅在該特定頁(yè)面上處于活動(dòng)狀態(tài)；這樣可以提高加載速度。在某些情況下使用內(nèi)嵌樣式是很有用，當(dāng)我們向其他人發(fā)送頁(yè)面模板的時(shí)候，因?yàn)閮?nèi)容都在一個(gè)頁(yè)面中，所以看到預(yù)覽要容易得多；內(nèi)嵌式的編寫代碼例子代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css制作導(dǎo)航欄</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制作導(dǎo)航欄</p>
<ul>
<li><a class="active" href="">主頁(yè)</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">更多</a></li>
</ul>
</body>
</html>
3.外聯(lián)式
這個(gè)就是我們最經(jīng)常使用的一個(gè)方式，外聯(lián)式就是使用?link?標(biāo)簽將 html 文件外的 css 鏈接起來，從而將.css文件中的樣式使用鏈接起來。這樣雖然多了些步驟，但是在實(shí)際的運(yùn)用中，我們可以更加方便的找尋到問題的所在進(jìn)行修改，從而更加快速的完成任務(wù)。外聯(lián)式的鏈接代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css寫一個(gè)三角形</title>
<link href="css/test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="uptriangle">
</div>
</body>
</html>以上就是對(duì)于怎么在html中鏈接css文件的方法，而且現(xiàn)在大多數(shù)網(wǎng)站都是使用外聯(lián)式的方式，不僅如此外聯(lián)式是在單獨(dú)的一個(gè)文件中進(jìn)行編輯，然后再通過link標(biāo)簽進(jìn)行鏈接使用的范圍比較廣泛，這就使得我們?cè)诠芾眄?yè)面的時(shí)候就會(huì)變得更加容易。更多的相關(guān)知識(shí)我們可以在w3cschool中進(jìn)行一個(gè)全面的學(xué)習(xí)和了解！
