CSS学习3 - 技术栈

CSS学习3

乌鸦不像写字台2024-09-05 19:25

样式表

一、内部样式表
二、行内样式表（内联样式）
三、外部样式表（外链样式）
总结

一、内部样式表

在html内部成为内部样式表，用style标签定义。

可以放在html任何地方，包括html标签外部。

html 复制代码

<html>
	<head>
		<style text="text/css"> 
			/*选择器{属性：值；}*/
			div {
				color: red;
				}
		</style>
	</head>
	<body>
		<div>1234</div>
	</body>
</html>

二、行内样式表（内联样式）

通过style标签设置属性。

<标签名 style="属性：值；"> </标签名>

行内样式表适合于样式比较少的情况。

html 复制代码

<html>
	<head>
		
	</head>
	<body>
		<div style="color:red;">1234</div>
	</body>
</html>

三、外部样式表（外链样式）

建立后缀名为.css的文件，在html里用link链接。

link是一个单标签

html 复制代码

<html>
	<head>
		<link rel="stylesheet" href="s.css"/>
	</head>
	<body>
		<div>1234</div>
	</body>
</html>

总结

行内样式表权重高；控制标签少；
内部样式表权重最高；
外部样式表完全实现结构与样式分离，实现了结构化，使用最多。