更新時間:2021年07月02日18時02分 來源:傳智教育 瀏覽次數(shù):
使用HTML標(biāo)簽屬性對網(wǎng)頁進(jìn)行修飾的方式存在很大的局限和不足,因?yàn)槲覀兯械臉邮蕉际菍懺跇?biāo)簽中,這樣既不利于代碼閱讀,將來維護(hù)代碼也非常困難。如果希望網(wǎng)頁美觀、大方、維護(hù)方便,就需要使用CSS實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。結(jié)構(gòu)與表現(xiàn)相分離是指在網(wǎng)頁設(shè)計中,HTML標(biāo)簽只用于搭建網(wǎng)頁的基本結(jié)構(gòu),不使用標(biāo)簽屬性設(shè)置顯示樣式,所有的樣式交由CSS來設(shè)置。
CSS非常靈活,既可以嵌入在HTML文檔中,也可以是一個單獨(dú)的外部文件,如果是獨(dú)立的文件,則必須以.css為后綴名。如圖1所示的代碼片段,就是將CSS嵌入在HTML文檔中,雖然與HTML在同一個文檔中,但CSS集中寫在HTML文檔的頭部,也是符合結(jié)構(gòu)與表現(xiàn)相分離的。
圖1 HTML和CSS代碼片段
如今大多數(shù)網(wǎng)頁都是遵循Web標(biāo)準(zhǔn)開發(fā)的,即用HTML編寫網(wǎng)頁結(jié)構(gòu)和內(nèi)容,而相關(guān)版面布局、文本或圖片的顯示樣式都使用CSS控制。HTML與CSS的關(guān)系就像人的身體與衣服,通過更改CSS樣式,可以輕松控制網(wǎng)頁的表現(xiàn)樣式。
CSS3中怎樣將box-sizing設(shè)為content-box?