將CSS引入HTML的常用方法有哪些?
  • 更新時(shí)間:2024-10-28 00:26:13
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 298

我們都知道HTML和CSS是兩種功能不同的語(yǔ)言,但是它們可以同時(shí)對(duì)一個(gè)網(wǎng)頁(yè)產(chǎn)生效果,網(wǎng)頁(yè)(webPage)=內(nèi)容(html)+表現(xiàn)(css)+行為(javascript) .因此,有必要將CSS引入到HTML中并結(jié)合使用。為了在瀏覽器中顯示出預(yù)期的CSS樣式表效果,需要瀏覽器正確識(shí)別和調(diào)用CSS。瀏覽器在讀取樣式表的時(shí)候,應(yīng)該是按照文本格式來(lái)讀取的,而CSS樣式表放在不同的地方,作用的范圍也是不同的。在HTML中,CSS主要通過(guò)四種方式引入:內(nèi)聯(lián)、嵌入、導(dǎo)入和鏈接。

(1)行內(nèi)式,如下圖:

即在標(biāo)簽的style屬性中設(shè)置CSS樣式。這種方式并沒(méi)有從本質(zhì)上體現(xiàn)CSS的優(yōu)勢(shì),所以不推薦使用。

(2)嵌入式,如下圖:

在頁(yè)面各種元素的設(shè)置中,寫(xiě)入

在和之間,這對(duì)于單頁(yè)來(lái)說(shuō)很方便。不過(guò)這種方式的使用要少得多,最常見(jiàn)的是訪問(wèn)量大的門(mén)戶網(wǎng)站?;蛘咴L問(wèn)量大的企業(yè)網(wǎng)站首頁(yè)。與第一種方法相比,優(yōu)點(diǎn)突出,但缺點(diǎn)也很明顯。優(yōu)點(diǎn):速度快,所有的CSS控件都是針對(duì)這個(gè)頁(yè)面標(biāo)簽的,沒(méi)有多余的CSS命令;此外,不需要外部鏈CSS 文件。直接在HTML 文檔中讀取樣式。缺點(diǎn)是改版比較麻煩,單個(gè)頁(yè)面顯得臃腫,CSS不能被其他HTML引用,導(dǎo)致代碼量比較大,維護(hù)麻煩。但采用這種方式的公司大多是有錢(qián)人,對(duì)他們來(lái)說(shuō)用戶量是關(guān)鍵,不缺人手做復(fù)雜的維護(hù)工作。

(3)導(dǎo)入式,如下圖

(4)鏈接式,如下圖:

導(dǎo)入類型和鏈接類型類似,都是從外部導(dǎo)入CSS文件。但鏈接類型在客戶端用戶瀏覽網(wǎng)站時(shí)效果會(huì)更好。

鏈接可以說(shuō)是現(xiàn)在占主導(dǎo)地位的導(dǎo)入方式。比如IE和瀏覽器。這也是最能體現(xiàn)CSS特性的方法;在DIV+CSS中最能體現(xiàn)內(nèi)容與顯示分離的思想,也是最容易修改維護(hù),代碼看起來(lái)最漂亮的。

總結(jié):對(duì)于一些比較大的網(wǎng)站,為了方便維護(hù),可能希望把所有的css樣式放到幾個(gè)css文件中,這樣如果使用鏈接導(dǎo)入,需要幾個(gè)語(yǔ)句分別導(dǎo)入css文件.如果要調(diào)整CSS文件的分類,需要同時(shí)調(diào)整HTML文件,這對(duì)于維護(hù)工作來(lái)說(shuō)是一個(gè)缺陷。如果使用導(dǎo)入方式,只能導(dǎo)入一個(gè)通用的CSS文件,然后在這個(gè)文件中導(dǎo)入其他獨(dú)立的CSS。文件;而鏈接類型沒(méi)有此功能。

我們專注高端建站,小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

本文章出于推來(lái)客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/11540.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部