位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

引入CSS的方法

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-17

    在網(wǎng)頁中，需要引用css，讓它成為網(wǎng)頁中的修飾工具。如何才能引用css來為頁面服務(wù)呢？下面介紹在頁面中應(yīng)該如何引入css樣式表。

    在頁面中引入css樣式表時(shí)，有三種方法：內(nèi)聯(lián)引入方法、內(nèi)部引入方法、外部引入方法。這三種方法分別是怎么執(zhí)行引入的呢？

1.內(nèi)聯(lián)引入方法

    每一個(gè)HTML元素都擁有一個(gè)叫做style的屬性。它是用來控制元素的外觀。特別之處就在于，在style屬性里面寫入的CSS代碼都是作為HTML中style屬性的屬性值出現(xiàn)的。


2.內(nèi)部引入方法

    頁面中有很多元素需要管理的時(shí)候，內(nèi)聯(lián)引入CSS樣式很顯然是不合適的，因?yàn)槟菢訒?huì)產(chǎn)生很多重復(fù)性的搡作與勞動(dòng)。例如，需要把頁面中所有的<p>標(biāo)簽中的文字都改成紅色，使用內(nèi)聯(lián)CSS的話，需要往每一個(gè)<p>里手動(dòng)添加（在不考慮JavaScript的情況下），這樣的重復(fù)勞動(dòng)產(chǎn)生的勞動(dòng)量是非常驚人的。很顯然，程序員不可能讓自己變成流水線上的機(jī)器人，所以可以把有相同需求的元素整理好并分成很多類別，讓相同類別的元素使用同一個(gè)樣式。

    我們會(huì)在頁面的<head>部分引入<style>標(biāo)簽，然后在<style>標(biāo)簽內(nèi)部寫入需要的CSS樣式。例如，可以讓<p>標(biāo)簽里的文字的顏色為紅色，文字大小為20像素，<div>標(biāo)簽里文宇的顏色為綠色，文字大小為10像素。

力。這樣的方式也更利于后期對(duì)代碼和頁面的維護(hù)工作。


3.外部引入方法

    前面介紹了內(nèi)聯(lián)樣式表和內(nèi)部樣式表，但是這兩種樣式表的寫法并不推薦大家在開發(fā)當(dāng)中使用。在開發(fā)中通常是一個(gè)團(tuán)隊(duì)的很多人在一起合作，項(xiàng)目的頁面想必也不會(huì)很少（一般一個(gè)移動(dòng)app至少也要20個(gè)頁面），如果使用內(nèi)部樣式表進(jìn)行開發(fā)的話，就會(huì)遇到一個(gè)非常頭疼的問題：如果眾多頁面中有一些樣式相同的地方，是不是都要在樣式表中再寫一遍？

    事實(shí)上，根本不需要去這么做。最好的方法就是：在HTML文檔的外部新建一個(gè)CSS樣式表，然后把樣式表引入HTML文檔中。這樣就可以實(shí)現(xiàn)同一個(gè)CSS樣式可以被無數(shù)個(gè)HTML文擋調(diào)用。具體做法是：新建一些HTML文擋，在HTML文檔外部新建一個(gè)以.css為后綴名的CSS樣式表，在HTML文檔的<head>部分以<link type="text/css" rel="stylesheet" href="url">標(biāo)簽進(jìn)行引入。

    這時(shí)會(huì)發(fā)現(xiàn)，外部樣式表內(nèi)的樣式已經(jīng)可以在HTML文檔中進(jìn)行使用了。這樣做的話，需要對(duì)所有頁面進(jìn)行樣式修改的時(shí)候，只需要修改一個(gè)CSS文件即可，而不用對(duì)所有的頁面逐個(gè)進(jìn)行修改。只修改CSS樣式，就不需要對(duì)頁面中的內(nèi)容進(jìn)行變動(dòng)。

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部