引入css样式制作网页
引入CSS样式的三种主要方法
内联样式
直接在HTML元素的style属性中编写CSS，适用于单个元素的快速样式设定：
<p style="color: red; font-size: 16px;">示例文本</p>内部样式表
在HTML文件的<head>部分通过<style>标签定义样式，适用于当前页面：
<head>
<style>
body { background-color: #f0f0f0; }
h1 { color: blue; text-align: center; }
</style>
</head>外部样式表
通过.css文件分离样式与结构，使用<link>标签引入，适合多页面复用：
<head>
<link rel="stylesheet" href="styles.css">
</head>对应的styles.css文件内容示例：
/* styles.css */
.container {
width: 80%;
margin: 0 auto;
}
.btn {
padding: 10px 20px;
background-color: #4CAF50;
}优先级规则
- 内联样式 > 内部样式表 > 外部样式表
- 相同优先级下，后定义的样式会覆盖前者
- 使用
!important可强制提升优先级（慎用）
最佳实践建议
- 大型项目优先采用外部样式表，便于维护和缓存优化
- 使用预处理器（如Sass/Less）增强CSS可维护性
- 通过媒体查询实现响应式设计：
@media (max-width: 600px) { .container { width: 100%; } }
调试工具
浏览器开发者工具（F12）的Elements面板可实时查看和修改CSS规则，方便调试样式冲突问题。
