專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-08-27 10:52:41 來源：動力節點 瀏覽1463次
層疊樣式表(CSS)用于在包含HTML元素的網頁中設置樣式。它設置網頁元素的背景顏色、字體大小、字體系列、顏色等屬性。
下面給出了三種類型的CSS：
內聯 CSS
內部或嵌入式 CSS
外部 CSS
內聯 CSS 在 body 部分包含的 CSS 屬性與元素一起被稱為內聯 CSS。這種樣式是在 HTML 標簽中使用 style 屬性指定的。
例子：
html
<!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>
輸出：
當單個 HTML 文檔必須具有唯一樣式時，可以使用此選項。CSS 規則集應該位于頭部部分的 HTML 文件中，即 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文件，該文件僅包含借助標簽屬性(例如 class、id、heading 等)的樣式屬性。CSS 屬性寫在一個單獨的文件中，擴展名為 .css，應該使用鏈接標簽鏈接到 HTML 文檔。這意味著對于每個元素，樣式只能設置一次，并且將應用于整個網頁。
示例：下面給出的文件包含CSS屬性。此文件以 .css 擴展名保存。例如：geeks.css
身體 {
背景顏色：粉藍色；
}
。主要的 {
文字對齊：居中；
}
.GFG{
顏色：#009900；
字體大小：50px；
字體粗細：粗體；
}
#極客{
字體樣式：粗體；
字體大小：20px；
}
下面是使用創建的外部樣式表的 HTML 文件
link標簽用于鏈接外部樣式表和 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，其優先級最低。可以在一頁上定義多個樣式表。如果對于 HTML 標簽，樣式定義在多個樣式表中，則將遵循以下順序。
由于內聯具有最高優先級，因此在內部和外部樣式表中定義的任何樣式都會被內聯樣式覆蓋。
Internal 或 Embedded 在優先級列表中排名第二，并覆蓋外部樣式表中的樣式。
外部樣式表的優先級最低。如果內聯或內部樣式表中沒有定義樣式，則將外部樣式表規則應用于 HTML 標記。
以上就是動力節點小編介紹的"CSS層疊樣式表詳解"，希望對大家有幫助，想了解更多可查看Java教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號