CSS樣式表引用方式

2022-08-28 10:42:13 字數 1525 閱讀 3423

最近講課中,有些學員對呼叫樣式表老是有含糊不清?大體說來有四種方式:

1、外部檔案引用方式;(推薦使用)

2、使用@import引用外部css檔案;

3、內部文件頭方式也叫內嵌法呼叫;

4、直接插入式也叫行內樣式。

它們主要的差別在於它們規定的風格使用的範圍不同:

一、外部檔案引用方式

外部檔案引用方式即將css寫成乙個檔案,在html文件頭通過檔案引用來進行風

格控制。也就是把寫好的css屬性的檔案儲存為擴充套件名為.css檔案。

css檔案的引用是在html的標記之間寫下列語句:

如當前檔案目錄下有一css 檔名為mystyle.css,內容如下:

p 

h2

當然,你可以複製這句,然後改下引用檔案的路徑及檔名就可以了。

應用css檔案的乙個最大好處就是,你可以在每個html檔案中引用這個檔案,從而

可使整個站點的hmtl檔案在風格上保持一致,避免重複的css屬性設定;另外,當你遇

上改版或作某些重大調整要對風格進行修改時,可直接修改這個css檔案,當然了,

html檔案一直引用最近更新的樣式單,而不必每個每個html檔案進行修改,如果在建

站之初沒有**風格的統一規劃並形成css檔案,以後內容一多,想調整一下風格會累

死你的。

二、使用@import引用外部css檔案

這種方式在文件頭之間使用style標籤引用外部css(不建議使用,引用沒有先後順序,容易出錯)

三、內部文件頭方式

這種方式與外部檔案方式區別在於這種方式是將風格直接定義在文件頭

之間,而不是形成檔案。這種風格定義產生作用的範圍也只侷限於

本檔案,其格式如下(套用上邊的css)

這種方式的主要用處是,在一些方面統一風格的前提下,可針對具體頁面進行具體調整。這兩種方式並不相排斥,而是相互結合,比如在css檔案中定義了p標誌

的字型大小font-size為10pt,而在內部文件中可定義p標誌字型顏色font-color為red;

而在另乙個html檔案中定義顏色為green,從這裡,你也可能明白為什麼風格樣式單叫

層疊式樣單了。

四、直接插入式

直接插入式很簡單,只是在每個html標記後書寫css屬性就可以了。這種方式很直

接,如我們想規定乙個table標誌中的字為紅色,字型大小為10pt,則可書寫如下:

這種方式主要用於對具體的標記做具體的調整,其作用的範圍只限於本標記。

綜上所述,這幾種方式各有用途,在統一整個站點風格上,用第一種方式在整個

頁面風格統一上,用第三種方式在頁內某個標記的具體微調上,第三種方式也有用

武之地,所以各有千秋吧!前三種的目的在於一是統一風格,二是減少繁瑣的標記屬性

設定,真是功不可沒喲!

延伸了解:引用外部css的link和import方式的分析與比較

CSS樣式表引用方式

大體說來有四種方式 1 外部檔案引用方式 推薦使用 2 使用 import引用外部css檔案 3 內部文件頭方式也叫內嵌法呼叫 4 直接插入式也叫行內樣式。它們主要的差別在於它們規定的風格使用的範圍不同 一 外部檔案引用方式 外部檔案引用方式即將css寫成乙個檔案,在html文件頭通過檔案引用來進行...

如何引用CSS樣式表

當瀏覽器讀到乙個樣式表,它就會按照這個樣式表來對文件進行格式化。有以下三種方式來插入樣式表 當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改乙個檔案來改變整個站點的外觀。head link rel stylesheet type text css href...

css樣式表的引入方式

一般來說,css 有兩種樣式表的引入方式,在這裡我記錄一下,比較這兩種引入方式的區別 link rel stylesheet type text css href css檔案 import css檔案 顯然第一種方式似乎是更常見的。事實上,使用這兩種方式引入css檔案的效果都是一致的,區別在於是ht...