首頁 > web前端 > css教學 > css中什麼是外部樣式表?

css中什麼是外部樣式表?

青灯夜游
發布: 2020-11-13 16:37:28
原創
6847 人瀏覽過

在css中,如果CSS樣式被放置在網頁文檔外部的文件中,則稱為外部樣式表,一個CSS樣式表文檔就表示一個外部樣式表;css外部樣式表文件使用“. CSS」為副檔名,且HTML文件中包含指向該文件位置的鏈接,以便網頁瀏覽器知道在哪裡查找樣式。

css中什麼是外部樣式表?

【推薦教學:CSS影片教學 】

當網頁瀏覽器載入網頁時,它的顯示方式取決於來自級聯樣式表的信息,HTML檔案有三種使用樣式表的方法:外部,內部和內聯。

內部和內嵌樣式表儲存在HTML檔案本身中。它們很容易在當下工作,但由於它們不是存儲在中心位置,因此不可能輕易地在整個網站上同時更改樣式; 您必須返回每個條目並手動更改它。

而如果 CSS 樣式被放置在網頁文件外部的文件中,則稱為外部樣式表,一個 CSS 樣式表文件就表示一個外部樣式表。

實際上,外部樣式表也就是一個文字文件,擴展名為.css。當把CSS樣式程式碼複製到一個文字檔後,另存為.css文件,則它就是一個外部樣式表。

如下圖所示就是線上外部樣式表(http://c.biancheng.net/templets/new/style/common.css):

css中什麼是外部樣式表?

css外部樣式表文件使用.CSS文件副檔名,並且HTML文件中包含指向該文件位置的鏈接,以便網頁瀏覽器知道在哪裡查找樣式說明。

一個或多個文件可以連結到同一個CSS文件,一個網站可能有許多獨特的CSS文件,用於為不同的頁面,表格,圖像等設定樣式。

如何連結到CSS外部樣式表?

每個想要使用特定外部樣式表的網頁都需要連結到

部分中的CSS文件,如下所示:
<head>
<link rel =“stylesheet”type =“text / css”href =“styles.css”>
</head>
登入後複製

在此範例中,唯一需要更改以使其適用於您自己的文檔的是styles.css文本,這是CSS文件的位置。

如果檔案實際上被稱為styles.css並且與連結到它的文件位於完全相同的資料夾中,那麼它可以保持與上面所讀的完全相同。但是,您的CSS檔案可能標題為其他內容,在這種情況下,您只需將名稱從“styles”更改為您的名稱即可。

如果CSS檔案不在此資料夾的根目錄中,而是在子資料夾中,則它可能會讀取以下內容:

<head>
<link rel =“stylesheet”type =“text / css”href =“styles \ menus \ black.css”>
</ head>
登入後複製

有關外部CSS檔案的更多資訊

外部樣式表的最大好處是它們不依賴任何特定頁面,如果樣式在內部或內嵌執行,則網站上的其他頁面無法指向這些樣式首選項。

但是,使用外部樣式,相同的CSS檔案可以用於網站上的每個頁面,因此所有頁面都具有統一的外觀,編輯整個網站的CSS內容非常容易和集中。

你可以在下面看到它是如何運作的…

內部樣式需要使用