App下載

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

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

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

1.行內(nèi)式

這是一種直接在html文件中書寫的代碼,通常我們使用style屬性在特定的Html中標記設(shè)置css的樣式,但是建議不要使用這種方式,因為在每一個html的標記中都需要單獨的設(shè)置樣式,如果當你使用這個方法的時候會加大工作量,而且管理和檢查起來會比較的麻煩。但是在簡易的設(shè)計中使用這種方法會比較方便,代碼于截圖如下:

<!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 - 編程獅,隨時隨地學編程
                  </h1>
		 <p style="color:white;">
            w3cschool,編程獅,web前端開發(fā),菜鳥教程,編程入門教程
                  </p>
	</body>
	
</html>


2.內(nèi)嵌式

在這個方法中,我們會發(fā)現(xiàn)代碼中會比行內(nèi)式的比較不會那么的雜亂,而且內(nèi)嵌式的用法就是把 css 代碼放在特定頁面的<head>部分中。而且在內(nèi)嵌CSS的時候,需要把內(nèi)容放在?<style></style>?標簽之間。類選擇器可用于引用CSS代碼,但是他們僅在該特定頁面上處于活動狀態(tài);這樣可以提高加載速度。在某些情況下使用內(nèi)嵌樣式是很有用,當我們向其他人發(fā)送頁面模板的時候,因為內(nèi)容都在一個頁面中,所以看到預(yù)覽要容易得多;內(nèi)嵌式的編寫代碼例子代碼如下:

<!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.外聯(lián)式

這個就是我們最經(jīng)常使用的一個方式,外聯(lián)式就是使用?link?標簽將 html 文件外的 css 鏈接起來,從而將.css文件中的樣式使用鏈接起來。這樣雖然多了些步驟,但是在實際的運用中,我們可以更加方便的找尋到問題的所在進行修改,從而更加快速的完成任務(wù)。外聯(lián)式的鏈接代碼如下:

<!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文件的方法,而且現(xiàn)在大多數(shù)網(wǎng)站都是使用外聯(lián)式的方式,不僅如此外聯(lián)式是在單獨的一個文件中進行編輯,然后再通過link標簽進行鏈接使用的范圍比較廣泛,這就使得我們在管理頁面的時候就會變得更加容易。更多的相關(guān)知識我們可以在w3cschool中進行一個全面的學習和了解!

0 人點贊