html怎么添加css樣式

發(fā)布時(shí)間：2022-03-05 15:34:14 來(lái)源：億速云閱讀：181 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“html怎么添加css樣式”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html怎么添加css樣式”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

　　首先我們要了解一下在html中添加css樣式的三種方法是什么？它們分別為：

　　1、使用內(nèi)聯(lián)CSS來(lái)應(yīng)用特定元素的規(guī)則，即：行內(nèi)式

　　2、使用內(nèi)部CSS并在<head>HTML文檔部分包含CSS規(guī)則，即：內(nèi)嵌式

　　3、鏈接到包含所有CSS規(guī)則的外部文件（.css文件），即：外聯(lián)式

　　下面我們就來(lái)具體的介紹一下行內(nèi)式、內(nèi)嵌式、外聯(lián)式的實(shí)現(xiàn)與優(yōu)缺點(diǎn)。

　　一、行內(nèi)式

　　內(nèi)聯(lián)CSS要在特定的HTML標(biāo)記內(nèi)使用。<style>屬性用于設(shè)置特定HTML標(biāo)記的樣式。建議不要使用內(nèi)聯(lián)CSS，因?yàn)槊總€(gè)HTML標(biāo)記都需要單獨(dú)設(shè)置樣式，如果您只使用內(nèi)聯(lián)CSS，管理網(wǎng)站可能會(huì)變得十分困難。但是，它在某些情況下很有用。例如，在您無(wú)法訪(fǎng)問(wèn)CSS文件或僅需要為單個(gè)元素應(yīng)用樣式的情況下。帶有內(nèi)聯(lián)CSS的HTML頁(yè)面示例如下所示：

　　<!DOCTYPEhtml>

　　<html>

　　<bodystyle="background-color:black;">

　　<h2style="color:white;padding:30px;">HostingerTutorials</h2>

　　<pstyle="color:white;">Somethingusefullhere.</p>

　　</body>

　　</html>

　　內(nèi)聯(lián)CSS的優(yōu)點(diǎn)：

　　1、如果您想測(cè)試和預(yù)覽更改，則非常有用。

　　2、對(duì)快速修復(fù)很有用。

　　3、降低HTTP請(qǐng)求。

　　內(nèi)聯(lián)CSS的缺點(diǎn)：

　　內(nèi)聯(lián)CSS必須應(yīng)用于每個(gè)元素。

　　二、內(nèi)嵌式

　　內(nèi)嵌css樣式就是把css代碼放在特定頁(yè)面的<head>部分中。類(lèi)和ID可用于引用CSS代碼，但它們僅在該特定頁(yè)面上處于活動(dòng)狀態(tài)。每次頁(yè)面加載時(shí)都會(huì)下載以這種方式嵌入的CSS樣式，這樣可以提高加載速度。在某些情況下使用內(nèi)嵌樣式表很有用，比如：向某人發(fā)送頁(yè)面模板，因?yàn)橐磺卸荚谝粋€(gè)頁(yè)面中，所以看到預(yù)覽要容易得多。內(nèi)嵌CSS要放在<style></style>標(biāo)簽之間。內(nèi)部樣式表的一個(gè)示例：

　　<head>

　　<styletype="text/css">

　　p{color:white;font-size:10px;}

　　.center{display:block;margin:0auto;}

　　#button-go,#button-back{border:solid1pxblack;}

　　</style>

　　</head>

　　內(nèi)嵌CSS的優(yōu)點(diǎn)：

　　1、樣式表只影響一個(gè)頁(yè)面。

　　2、內(nèi)部樣式表可以使用類(lèi)和ID。

　　3、無(wú)需上傳多個(gè)文件。HTML和CSS可以在同一個(gè)文件中。

　　內(nèi)嵌CSS的缺點(diǎn)：

　　1、增加頁(yè)面加載時(shí)間。

　　2、它只影響一個(gè)頁(yè)面-如果要在多個(gè)文檔上使用相同的CSS，則無(wú)用。

　　三、外聯(lián)式

　　將CSS添加到html頁(yè)面上最方便的方法可能就是將其鏈接到外部文件（.css文件）。這樣，您對(duì)外部CSS文件所做的任何更改都將反映在你的網(wǎng)站上。外部CSS文件的引用要放在頁(yè)面的<head>部分中，例：

　　<head>

　　<linkrel="stylesheet"type="text/css"href="style.css"/>

　　</head>

　　而style.css包含所有樣式規(guī)則。例如：

　　.xleftcol{

　　float:left;

　　width:33%;

　　background:#809900;

　　}

　　.xmiddlecol{

　　float:left;

　　width:34%;

　　background:#eff2df;

　　}

　　外聯(lián)CSS的優(yōu)點(diǎn)：

　　1、HTML頁(yè)面的大小更小，結(jié)構(gòu)更清晰。

　　2、加載速度更快。

　　3、相同的.css文件可以在多個(gè)頁(yè)面上使用。

　　外聯(lián)CSS的缺點(diǎn)：

　　在加載外部CSS之前，頁(yè)面可能無(wú)法正確呈現(xiàn)。
html怎么添加css樣式

讀到這里，這篇“html怎么添加css樣式”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

html怎么添加css樣式

猜你喜歡

最新資訊

相關(guān)推薦

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