外部样式表
特点：样式写在独立的.css文件里，只要通过<link>引入，就能作用于所有引入该文件的页面
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<!-- 外部样式表通过 <link></link> 标签引入 -->
<link rel="stylesheet" href="./css/style.css" type="text/css" />
</head>
<body>
</body>
</html>
/* ./css/style.css文件内容如下 */
.card-content {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 5px 0;
}
内部样式表
特点：样式只在当前 HTML 页面生效，其他页面无法复用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
<!-- 内部样式表通过 <style></style> 标签引入 -->
<style>
.card-content {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 5px 0;
}
</style>
</head>
<body>
</body>
</html>
行内样式表
特点：样式只绑定在当前元素上，哪怕是同类型的其他元素也无法复用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式表</title>
</head>
<body>
<!-- 行内样式表通过 style 属性引入 -->
<p style="color: #666; font-size: 14px; line-height: 1.6; margin: 5px 0;">文字内容</p>
</body>
</html>
