引入css样式制作网页
内联样式
直接在HTML元素的style属性中编写CSS，适用于单个元素的简单样式调整。
<p style="color: blue; font-size: 16px;">这是一段内联样式的文本。</p>内部样式表
在HTML文件的<head>部分使用<style>标签定义样式，适用于当前页面的样式规则。
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>
<body>
<p>这段文本使用内部样式表。</p>
</body>外部样式表
通过<link>标签引入独立的.css文件，适合多页面共享样式，便于维护。
- 创建CSS文件（如
styles.css）：body { background-color: #f0f0f0; } h1 { text-align: center; } - 在HTML中引入：
<head> <link rel="stylesheet" href="styles.css"> </head>
使用CSS预处理器
通过工具如Sass/Less增强CSS功能，需编译为原生CSS后引入。
- 安装Sass（需Node.js环境）：
npm install -g sass - 编写
.scss文件并编译：$primary-color: #333; body { color: $primary-color; }编译命令：
sass input.scss output.css
框架与组件库
直接引入现成的CSS框架（如Bootstrap、Tailwind CSS）快速构建页面。
以Bootstrap为例：
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-primary">Bootstrap按钮</button>
</body>注意事项
- 优先级：内联样式 > 内部样式表 > 外部样式表（同权重下后者覆盖前者）。
- 性能优化：外部样式表可缓存，减少重复代码；避免过多内联样式。
- 模块化：大型项目建议按功能拆分CSS文件（如
layout.css、theme.css）。
