什么是CSS层叠样式表

更新时间：2022-05-24 09:40:43 来源：极悦浏览796次

层叠样式表(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>

输出：