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