溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中外部樣式表的案例分析

發(fā)布時(shí)間：2020-11-16 10:08:04 來源：億速云 閱讀：207 作者：小新 欄目：web開發(fā)

了解css中外部樣式表的案例分析？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

在css中，如果CSS樣式被放置在網(wǎng)頁文檔外部的文件中，則稱為外部樣式表，一個(gè)CSS樣式表文檔就表示一個(gè)外部樣式表；css外部樣式表文件使用“.CSS”為擴(kuò)展名，且HTML文檔中包含指向該文件位置的鏈接，以便Web瀏覽器知道在哪里查找樣式。

當(dāng)Web瀏覽器加載網(wǎng)頁時(shí)，它的顯示方式取決于來自級(jí)聯(lián)樣式表的信息，HTML文件有三種使用樣式表的方法：外部，內(nèi)部和內(nèi)聯(lián)。

內(nèi)部和內(nèi)嵌樣式表存儲(chǔ)在HTML文件本身中。它們很容易在當(dāng)下工作，但由于它們不是存儲(chǔ)在中心位置，因此不可能輕易地在整個(gè)網(wǎng)站上同時(shí)更改樣式; 您必須返回每個(gè)條目并手動(dòng)更改它。

而如果 CSS 樣式被放置在網(wǎng)頁文檔外部的文件中，則稱為外部樣式表，一個(gè) CSS 樣式表文檔就表示一個(gè)外部樣式表。

實(shí)際上，外部樣式表也就是一個(gè)文本文件，擴(kuò)展名為.css。當(dāng)把CSS樣式代碼復(fù)制到一個(gè)文本文件中后，另存為.css文件，則它就是一個(gè)外部樣式表。

如下圖所示就是在線外部樣式表

css中外部樣式表的案例分析

css外部樣式表文件使用.CSS文件擴(kuò)展名，并且HTML文檔中包含指向該文件位置的鏈接，以便Web瀏覽器知道在哪里查找樣式說明。

一個(gè)或多個(gè)文檔可以鏈接到同一個(gè)CSS文件，一個(gè)網(wǎng)站可能有許多獨(dú)特的CSS文件，用于為不同的頁面，表格，圖像等設(shè)置樣式。

如何鏈接到CSS外部樣式表？

每個(gè)想要使用特定外部樣式表的網(wǎng)頁都需要鏈接到<head>部分中的CSS文件，如下所示：

<head>
<link rel =“stylesheet”type =“text / css”href =“styles.css”>
</head>

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

如果文件實(shí)際上被稱為styles.css并且與鏈接到它的文檔位于完全相同的文件夾中，那么它可以保持與上面所讀的完全相同。但是，您的CSS文件可能標(biāo)題為其他內(nèi)容，在這種情況下，您只需將名稱從“styles”更改為您的名稱即可。

如果CSS文件不在此文件夾的根目錄中，而是在子文件夾中，則它可能會(huì)讀取以下內(nèi)容：

<head>
<link rel =“stylesheet”type =“text / css”href =“styles \ menus \ black.css”>
</ head>

有關(guān)外部CSS文件的更多信息

外部樣式表的最大好處是它們不依賴于任何特定頁面，如果樣式在內(nèi)部或內(nèi)嵌執(zhí)行，則網(wǎng)站上的其他頁面無法指向這些樣式首選項(xiàng)。

但是，使用外部樣式，相同的CSS文件可以用于網(wǎng)站上的每個(gè)頁面，這樣所有頁面都具有統(tǒng)一的外觀，編輯整個(gè)網(wǎng)站的CSS內(nèi)容非常容易和集中。

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

內(nèi)部樣式需要使用  <style>  標(biāo)記，因?yàn)樗鼈冃枰c<html>  標(biāo)記區(qū)分開來  ：

<head>
<style>
body {
    background-color: green;
}
h2 {
    color: blue;
    margin-left: 15px;
} 
</style>
</head>

但是，由于外部樣式表包含在它們自己的文件中，因此可以像這樣創(chuàng)建它們，這意味著與上面的示例完全相同：

body {
    background-color: green;
}
h2 {
    color: blue;
    margin-left: 15px;
}

在這些示例中，內(nèi)聯(lián)樣式僅適用于該特定頁面，這顯然是因?yàn)樗谠揌TML頁面的標(biāo)題詳細(xì)信息中。在第二個(gè)示例中，CSS信息是自包含在CSS文件中的，任何頁面都可以使用上面的“ 如何鏈接到外部樣式表”  部分中的代碼鏈接到該文件。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css中外部樣式表的案例分析大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手