引入css样式制作网页
引入CSS样式的三种主要方法
内联样式
直接在HTML元素的style属性中编写CSS代码，适用于单个元素的快速样式设置：
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在HTML文件的<head>部分通过<style>标签定义样式，适用于单个页面的样式管理：
<head>
<style>
body {
font-family: Arial;
background-color: #f0f0f0;
}
h1 {
color: darkred;
}
</style>
</head>外部样式表
通过.css文件分离样式与结构，适合多页面共享样式。需在HTML中通过<link>引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>对应的styles.css文件内容示例：
/* styles.css */
.container {
width: 80%;
margin: 0 auto;
}
.btn {
padding: 10px 15px;
background-color: #4CAF50;
}样式优先级规则
- 内联样式 > 内部样式表 > 外部样式表
- 相同权重下，后定义的样式会覆盖前者
- 使用
!important可强制优先级（慎用）：.special { color: red !important; }
最佳实践建议
- 大型项目优先使用外部样式表，便于维护
- 使用CSS预处理器（如Sass/Less）增强可管理性
- 通过媒体查询实现响应式设计：
@media (max-width: 600px) { .container { width: 100%; } }
