專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-05-24 09:40:43 來源：動力節點 瀏覽1159次
層疊樣式表(CSS)用于在包含 HTML 元素的網頁中設置樣式。它設置網頁上元素的背景顏色、字體大小、字體系列、顏色等屬性。
內聯 CSS
內部或嵌入式 CSS
外部 CSS
內聯 CSS：內聯 CSS 在正文部分包含與元素相連的 CSS 屬性，稱為內聯 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>
輸出：
內部或嵌入式 CSS：當必須為單個 HTML 文檔設置唯一樣式時，可以使用此選項。CSS 規則集應該在 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，應該使用鏈接標簽鏈接到 HTML 文檔。這意味著對于每個元素，樣式只能設置一次，并且將應用于整個網頁。
示例：下面給出的文件包含 CSS 屬性。此文件以 .css 擴展名保存。例如：geeks.css
身體 {
背景顏色：粉藍色；
}
。主要的 {
文本對齊：居中；
}
.GFG {
顏色：#009900;
字體大小：50px；
字體粗細：粗體；
}
#極客{
字體樣式：粗體；
字體大小：20px；
}
鏈接標簽用于將外部樣式表與 html 網頁鏈接。
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 的屬性：內聯 CSS 具有最高優先級，然后是內部/嵌入式，其次是外部 CSS，其優先級最低。可以在一頁上定義多個樣式表。如果對于 HTML 標記，樣式在多個樣式表中定義，則將遵循以下順序。
由于內聯具有最高優先級，因此在內部和外部樣式表中定義的任何樣式都會被內聯樣式覆蓋。
內部或嵌入式在優先級列表中排名第二，并覆蓋外部樣式表中的樣式。
外部樣式表的優先級最低。如果內聯或內部樣式表中沒有定義樣式，則將外部樣式表規則應用于 HTML 標記。
谷歌瀏覽器
IE瀏覽器
火狐
歌劇
蘋果瀏覽器
以上就是關于“什么是CSS層疊樣式表”的介紹，如果您想了解更多相關知識，可以關注一下動力節點的Java在線學習，里面的課程內容從入門到精通，細致全面，通俗易懂，適合沒有基礎的小伙伴學習，希望對大家能夠有所幫。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號