html中如何鏈接css文件

發(fā)布時(shí)間：2022-02-21 10:01:18 來(lái)源：億速云閱讀：553 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“html中如何鏈接css文件”，在日常操作中，相信很多人在html中如何鏈接css文件問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html中如何鏈接css文件”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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 >
		 <h2 >
            w3cschool - 億速云，隨時(shí)隨地學(xué)編程
                  </h2>
		 <p >
            w3cschool,億速云,web前端開(kāi)發(fā),菜鳥(niǎo)教程,編程入門(mén)教程
                  </p>
	</body>
	
</html>

html中如何鏈接css文件

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)嵌式的編寫(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>

到此，關(guān)于“html中如何鏈接css文件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

html中如何鏈接css文件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽