Appearance
CSS引入方式（3种核心，分场景使用）
4.1 行内样式（inline style）
定义
行内样式是直接写在HTML标签的style属性中的CSS样式。
语法
html
<标签名 style="属性1: 值1; 属性2: 值2;">内容</标签名>示例
html
<h1 style="color: blue; text-align: center;">欢迎学习CSS！</h1>
<p style="font-size: 16px; color: #333;">这是一个段落。</p>特点
- 优点：快速生效，优先级高
- 缺点：样式与结构混合，不易维护，代码冗余
- 适用场景：临时修改单个元素的样式，或需要优先级最高的样式
4.2 内部样式（internal style）
定义
内部样式是写在HTML页面<head>标签内的<style>标签中的CSS样式。
语法
html
<head>
<style>
选择器 {
属性1: 值1;
属性2: 值2;
}
</style>
</head>示例
html
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<h1>欢迎学习CSS！</h1>
<p>这是一个段落。</p>
</body>特点
- 优点：样式集中管理，作用于当前页面
- 缺点：不能跨页面复用
- 适用场景：单个页面的样式管理
4.3 外部样式（external style）
定义
外部样式是单独创建在.css文件中的CSS样式，通过<link>标签引入到HTML页面中。
语法
- 创建CSS文件：
style.css
css
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}- 在HTML中引入：
html
<head>
<link rel="stylesheet" href="style.css">
</head>特点
- 优点：样式与结构完全分离，可跨页面复用，易于维护
- 缺点：需要额外的HTTP请求
- 适用场景：多个页面的样式管理（最常用）
4.4 三种引入方式的优先级
优先级顺序
从高到低：行内样式 > 内部样式 > 外部样式
示例
html
<head>
<!-- 外部样式：颜色为蓝色 -->
<link rel="stylesheet" href="style.css">
<!-- 内部样式：颜色为红色 -->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<!-- 行内样式：颜色为绿色 -->
<h1 style="color: green;">欢迎学习CSS！</h1>
</body>最终显示效果：标题颜色为绿色（行内样式优先级最高）。
注意事项
- 优先级只与引入方式有关，与引入顺序无关
- 相同优先级时，后面的样式会覆盖前面的样式
4.5 实战：用三种方式给同一个页面设置不同样式
实战目标
创建一个HTML页面，分别使用三种引入方式设置样式，观察优先级效果。
实战步骤
- 创建外部CSS文件：
external.css
css
/* 外部样式 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: #333;
font-size: 14px;
}- 创建HTML文件：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS引入方式实战</title>
<!-- 1. 外部样式 -->
<link rel="stylesheet" href="external.css">
<!-- 2. 内部样式 -->
<style>
h1 {
color: red; /* 覆盖外部样式的蓝色 */
text-align: center;
}
p {
font-size: 16px; /* 覆盖外部样式的14px */
line-height: 1.5;
}
</style>
</head>
<body>
<!-- 3. 行内样式 -->
<h1 style="color: green; /* 覆盖内部样式的红色 */">欢迎学习CSS！</h1>
<p>这是一个使用外部样式的段落。</p>
<p style="color: orange; /* 行内样式 */">这是一个使用行内样式的段落。</p>
</body>
</html>- 运行页面：在浏览器中打开文件，观察效果
预期效果
- 标题：绿色（行内样式）
- 第一个段落：#333颜色，16px大小（内部样式覆盖外部样式）
- 第二个段落：橙色（行内样式）
总结
- 行内样式优先级最高，适用于临时修改
- 内部样式适用于单个页面的样式管理
- 外部样式适用于多个页面的样式管理，是最常用的方式