css檔案怎麼引入

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

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

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

 概況來說有以下四種:

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

       2.嵌入式：將CSS樣式集中寫在網頁的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1標籤對的c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d1標籤對的c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927標籤對中；

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

       4.導入式：使用@import引用外部CSS檔；

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

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

70eab11193908078307f75b525fdd4460e639e3b610bd7e2866749e566397d9b我是行內式寫法16b28748ea4df4d9c2150843fecfba68 ;54bdf357c58b8a65c66d7c19c8e4d114

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

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

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

面，但都得一個個的去修改，如下：

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>

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

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

外部式css樣式就是把css程式碼寫一個單獨的外部檔案中，這個css樣式檔以「. css」為副檔名，在93f0f5c25f18dab9d176bd4f6de5d30e標籤內（不是在c9ccee2e6ea535a969eb3f532ad9fe89標籤內）使用2cdf5bf648cf2f33323966d7f58a7f3f標籤將css樣式檔連結到HTML檔內，這樣最大化的發揮了css出現的優勢，當然".css"檔案檔案的命名要有一定的意義，方便後面的修改或增強其可讀性，如"main.css"...     

<link href="main.css" rel="stylesheet" style="text/css"/>

其中的rel="stylesheet" type ="text/css" 是固定寫入法不可修改

透過@import引入的格式如下：

<style type="text/css">
@import url(demo.css);
</style>

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

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

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

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

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

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

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

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

推薦學習：《css影片教學》

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