App下載

怎么在html中鏈接css文件?怎么鏈接css文件教程源碼!

猿友 2021-05-26 16:37:40 瀏覽數(shù) (5694)
反饋

在我們的平常學(xué)習(xí)中,每一個(gè)課時(shí)和每一個(gè)知識(shí)點(diǎn)直接都是有關(guān)聯(lián)的,那么今天我們就來(lái)說(shuō)說(shuō)怎么在html中鏈接css文件,下面是小編為大家準(zhǔn)備的一些鏈接css文件教程源碼!

1.行內(nèi)式

這是一種直接在html文件中書(shū)寫(xiě)的代碼,通常我們使用style屬性在特定的Html中標(biāo)記設(shè)置css的樣式,但是建議不要使用這種方式,因?yàn)樵诿恳粋€(gè)html的標(biāo)記中都需要單獨(dú)的設(shè)置樣式,如果當(dāng)你使用這個(gè)方法的時(shí)候會(huì)加大工作量,而且管理和檢查起來(lái)會(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前端開(kāi)發(fā),菜鳥(niǎo)教程,編程入門(mén)教程
                  </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)簽之間。類(lèi)選擇器可用于引用CSS代碼,但是他們僅在該特定頁(yè)面上處于活動(dòng)狀態(tài);這樣可以提高加載速度。在某些情況下使用內(nèi)嵌樣式是很有用,當(dāng)我們向其他人發(fā)送頁(yè)面模板的時(shí)候,因?yàn)閮?nèi)容都在一個(gè)頁(yè)面中,所以看到預(yù)覽要容易得多;內(nèi)嵌式的編寫(xiě)代碼例子代碼如下:

<!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 鏈接起來(lái),從而將.css文件中的樣式使用鏈接起來(lái)。這樣雖然多了些步驟,但是在實(shí)際的運(yùn)用中,我們可以更加方便的找尋到問(wèn)題的所在進(jìn)行修改,從而更加快速的完成任務(wù)。外聯(lián)式的鏈接代碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>怎么用css寫(xiě)一個(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)行編輯,然后再通過(guò)link標(biāo)簽進(jìn)行鏈接使用的范圍比較廣泛,這就使得我們?cè)诠芾眄?yè)面的時(shí)候就會(huì)變得更加容易。更多的相關(guān)知識(shí)我們可以在w3cschool中進(jìn)行一個(gè)全面的學(xué)習(xí)和了解!

0 人點(diǎn)贊