什么是CSS層疊樣式表

更新時間：2022-05-24 09:40:43 來源：動力節點瀏覽1058次

層疊樣式表(CSS)用于在包含 HTML 元素的網頁中設置樣式。它設置網頁上元素的背景顏色、字體大小、字體系列、顏色等屬性。

下面給出了三種類型的 CSS：

內聯 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 文件

鏈接標簽用于將外部樣式表與 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>

輸出：