溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css文件怎么引入”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“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樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中；
3.鏈接式：跟第4個的導入式都稱外部式或者外聯式，使用link引用外部CSS文件；
4.導入式：使用@import引用外部CSS文件；
-----------------------------------------------------A
對于行內式，是剛開始寫最容易也最習慣的方式，但這種寫法完全體現不出css的優勢，如下：
<span style="font-size:14px;"><div id="demo" style="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;">我是行內式寫法</div></span>
一個 頁面中如果標簽很多，這種寫法看起來不好并且顯得很累贅，重復性太大，是很不建議的！
-----------------------------------------------------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”為擴展名，在<head>標簽內（不是在<style>標簽內）使用<link>標簽將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中需要加上<style type="text/css"></style>，而在css文件中就可以直接@import
來添加路徑使用了，這就出現了一個點：對應樣式文件較多的項目，我們可以選擇先主后次，把主要的樣式先渲染出來，一些次要的可以放在css文件中進行import,這樣也可一定程度上緩解服務器的壓力，雖然文件不大，但能優化還是好的。本質上這兩種外部引入方式并沒太多區別，但有時為了項目中編輯站點的樣式方便，較多的使用link的方式。
關于“css文件怎么引入”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
