專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-05-24 09:40:43 來源：動力節(jié)點 瀏覽1179次
層疊樣式表(CSS)用于在包含 HTML 元素的網(wǎng)頁中設(shè)置樣式。它設(shè)置網(wǎng)頁上元素的背景顏色、字體大小、字體系列、顏色等屬性。
內(nèi)聯(lián) CSS
內(nèi)部或嵌入式 CSS
外部 CSS
內(nèi)聯(lián) CSS：內(nèi)聯(lián) CSS 在正文部分包含與元素相連的 CSS 屬性，稱為內(nèi)聯(lián) CSS。這種樣式是在 HTML 標記中使用 style 屬性指定的。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
輸出：
內(nèi)部或嵌入式 CSS：當(dāng)必須為單個 HTML 文檔設(shè)置唯一樣式時，可以使用此選項。CSS 規(guī)則集應(yīng)該在 HTML 文件的 head 部分中，即 CSS 嵌入在 HTML 文件中。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
輸出：
外部 CSS：外部 CSS 包含單獨的 CSS 文件，該文件僅包含樣式屬性，并借助標簽屬性(例如 class、id、heading 等)。CSS 屬性寫在一個單獨的文件中，擴展名為 .css，應(yīng)該使用鏈接標簽鏈接到 HTML 文檔。這意味著對于每個元素，樣式只能設(shè)置一次，并且將應(yīng)用于整個網(wǎng)頁。
示例：下面給出的文件包含 CSS 屬性。此文件以 .css 擴展名保存。例如：geeks.css
身體 {
背景顏色：粉藍色；
}
。主要的 {
文本對齊：居中；
}
.GFG {
顏色：#009900;
字體大小：50px；
字體粗細：粗體；
}
#極客{
字體樣式：粗體；
字體大小：20px；
}
鏈接標簽用于將外部樣式表與 html 網(wǎng)頁鏈接。
href屬性用于指定外部樣式表文件的位置。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
輸出：
CSS 的屬性：內(nèi)聯(lián) CSS 具有最高優(yōu)先級，然后是內(nèi)部/嵌入式，其次是外部 CSS，其優(yōu)先級最低。可以在一頁上定義多個樣式表。如果對于 HTML 標記，樣式在多個樣式表中定義，則將遵循以下順序。
由于內(nèi)聯(lián)具有最高優(yōu)先級，因此在內(nèi)部和外部樣式表中定義的任何樣式都會被內(nèi)聯(lián)樣式覆蓋。
內(nèi)部或嵌入式在優(yōu)先級列表中排名第二，并覆蓋外部樣式表中的樣式。
外部樣式表的優(yōu)先級最低。如果內(nèi)聯(lián)或內(nèi)部樣式表中沒有定義樣式，則將外部樣式表規(guī)則應(yīng)用于 HTML 標記。
谷歌瀏覽器
IE瀏覽器
火狐
歌劇
蘋果瀏覽器
以上就是關(guān)于“什么是CSS層疊樣式表”的介紹，如果您想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點的Java在線學(xué)習(xí)，里面的課程內(nèi)容從入門到精通，細致全面，通俗易懂，適合沒有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對大家能夠有所幫。
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號