Html中引入css的主要方式有四種,分別是外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式、導入式。
一、外部樣式
(一) 使用外部樣式的好處
1.減少代碼量 ,網(wǎng)站中相同部分的樣式只需要編寫一次,我們只需要把css文件引入到不同的html頁面中即可實現(xiàn)展示效果。
2.更改網(wǎng)站風格方便,我們可以通過修改一個css文件就可以實現(xiàn)整個網(wǎng)站的外觀修改。
3.Html頁面渲染時,css文件能夠被同時加載。
4.結(jié)構(gòu)與表現(xiàn)分離,便于后期維護。
(二) 適用于多個頁面需要相同樣式內(nèi)容的時候使用
(三) 書寫位置:新建單獨的后綴名為.css文件,使用link標簽引入到html頁面中,將link標簽放到Html頁面的head標簽中
例:
rel:規(guī)定當前文檔與被連接文檔之間的關(guān)系.
href:規(guī)定為連接文檔的位置
type:規(guī)定被連接文檔的MIME類型
二、內(nèi)部樣式
(一) 使用內(nèi)部樣式的好處
1.結(jié)構(gòu)與表現(xiàn)分離,便于后期維護。
2.所有的CSS控制都是針對單獨的面,沒有多余的CSS代碼。
3.同樣頁面中相同的樣式可以重復使用。
(二) 使用內(nèi)部樣式的缺點
1.只能在一個頁面中使用
2.網(wǎng)站更換風格麻煩
3.Css在html頁面中,頁面顯得臃腫
(三) 適用于個別頁面需要特殊樣式時
(四) 書寫位置:寫在html頁面的head標簽之間,在head標簽之間書寫style標簽
例:
三、行間樣式
(一) 使用內(nèi)部樣式的好處
1. 單獨修改單個標簽的樣式
(二) 使用內(nèi)部樣式的缺點
1. 結(jié)構(gòu)與表現(xiàn)沒有分類,不利于后期維護。
2. 只能修改單個標簽的樣式,代碼重復利用率不高,代碼冗長。
(三) 適用于個別標簽需要特殊樣式時
(四) 書寫位置:在標簽的開始標簽內(nèi)部書寫style=””
例:
四. 導入式
(一) 使用導入的好處
1.減少代碼量,網(wǎng)站中相同的部分的樣式只需要書寫一次,后續(xù)只需要把css文件引入到不同的Html頁面中即可。
2.更改網(wǎng)站風格方便,我們可以通過修改一個css文件,就可以修個整個網(wǎng)站的外觀。
3.結(jié)構(gòu)與表現(xiàn)分離,便于后期維護。
(二) 使用導入的缺點
1.需要等Html頁面全部加載完才能加載css文件。
(三) 適用于多個頁面需要展示相同樣式的時候
(四) 書寫位置:寫在Html頁面的head標簽中的style表現(xiàn)中,用@import導入css文件
>>本文地址:http://www.yceu.cn/zhuanye/2019/48096.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學歷
3 您更想做哪個方向的工作?
上一篇 【W(wǎng)eb前端基礎(chǔ)知識】HTML是什么
下一篇 第一頁