前端學習(五)

CSS簡介:

層疊樣式表:Cascading?Style?Sheet?

所謂層疊,可以將整個網(wǎng)頁想象為多層疊合的結(jié)構(gòu),層次高的覆蓋層次低的.在Firefox上可用Tilt可視化.

CSS樣式表可編寫到元素的style屬性(標簽)當中如<p?style="color:red">?內(nèi)容</p>,這種樣式被稱為內(nèi)聯(lián)樣式,只對當前樣式起作用.(不推薦使用,html與CSS耦合在一起)

將CSS樣式寫入head的style標簽中,利用CSS選擇器選中元素,將樣式表編寫到style中,也可以是表現(xiàn)與結(jié)構(gòu)分離(推薦)例:

.......

<head>

? ? ? ? ? ? <style?type="text/css">

? ? ? ? ? ? p(<--指定元素){屬性;屬性}

? ? ? ? ? ? </style>

</head>

......

外部樣式表:

新建一個.css文件,將要表現(xiàn)的內(nèi)容和對象寫入其中.然后在對應(yīng)頁面中使用link標簽(自結(jié)束) 調(diào)用,將表現(xiàn)和結(jié)構(gòu)完全分離.

如:<link?rel="stylesheet"?type="text/css"? href="相對路徑/>

CSS語法:注釋同C語言 ,結(jié)構(gòu):選擇器?聲明塊

選擇器:通過選擇器可以選中頁面中的指定元素,并且將聲明塊中的樣式應(yīng)用到對應(yīng)元素

聲明塊:緊跟在選擇塊后面,使用一對{},是只是一組名值對結(jié)構(gòu),多個聲明用";"隔開

塊和內(nèi)聯(lián):

塊元素:獨占一行的元素,無論內(nèi)容有多少.p,和h1,<div>?標簽無任何語義,單純塊元素,不會有間隔默認設(shè)置.將網(wǎng)頁分區(qū).

內(nèi)聯(lián)元素:span是一個內(nèi)聯(lián)元素(行內(nèi)元素),指得是只占用自身大小的元素,不會占用一行常見的內(nèi)聯(lián)元素,空間不夠時會自動換行.

HTML5中用內(nèi)容模型將內(nèi)聯(lián)和塊解釋,所以并沒有真正的內(nèi)聯(lián)和塊.這只是一種簡便的理解方式.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容