引入CSS的方法
在網(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)。
點(diǎn)擊加載更多評(píng)論>>