首頁 > web前端 > css教學 > 主體

css檔案怎麼引入

藏色散人
發布: 2023-01-06 11:17:51
原創
19199 人瀏覽過

引入css檔案的方法:1、行內式方法引入,在標記的style屬性中設定CSS樣式;2、嵌入式方法引入,將CSS樣式集中寫在網頁的style標籤中;3 、使用link引用外部CSS檔案;4、使用@import引用外部CSS檔案。

css檔案怎麼引入

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

css檔案怎麼引入? HTML中引入CSS檔案的幾種方法

 概況來說有以下四種:

       1.行內式:也稱為內聯式,在標記的style屬性中設定CSS樣式。這種方式並沒有反映出CSS的優勢;

       2.嵌入式:將CSS樣式集中寫在網頁的

標籤對的
標籤對的標籤對中;

       3.連結式:跟第4個的導入式都稱為外部式或外接式,並使用link引用外部CSS檔案;

       4.導入式:使用@import引用外部CSS檔;

------------------------------------- ----------------A

對於行內式,是剛開始寫最容易也最習慣的方式,但這種寫法完全體現不出css的優勢,如下:

我是行內式寫法
;

一個頁面中如果標籤很多,這種寫法看起來不好並且顯得很累贅,重複性太大,是很不建議的!

-------------------------------------------- ---------B

嵌入式如果頁面比較少的情況下,也是挺不錯的選擇,但如果對應一個項目頁面很多,這樣無疑有點災難性,要修改個樣式,或許是大篇幅的相似頁

面,但都得一個個的去修改,如下:

登入後複製

這種寫法一定程度上避免了頁面一種"無樣式"現象,頁面載入完css才去渲染頁面...

------------------------------------------------ --------------------CD

外部式css樣式就是把css程式碼寫一個單獨的外部檔案中,這個css樣式檔以「. css」為副檔名,在標籤內(不是在

登入後複製

這種方式會在整個頁面載入完成時才引入css文件,很明顯的問題就是頁面的"裸奔"現象,這個當然從互動和體驗的角度考慮是絕對不能接受的

以上的兩種外部引入方式從直觀看語法結構的區別:


@import + 空格+ url(CSS文件路径地址);
登入後複製

@import這種方式也應注意下載HTML和CSS檔案中的不同,在HTML中需要加上,而在css檔案中就可以直接@import

來新增路徑使用了,這就出現了一個點:對應樣式檔案較多的項目,我們可以選擇先主後次,把主要的樣式先渲染出來,一些次要的可以放在css檔案

中進行import,這樣也可一定程度上緩解伺服器的壓力,雖然檔案不大,但能優化還是好的。本質上這兩種外部引入方式並沒太多區別,但有時為了項

目中編輯網站的樣式方便,較多的使用link的方式。

當然還有一些以XML為編輯要求的引入方式,但不常用....

推薦學習:《css影片教學

以上是css檔案怎麼引入的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!