CSS基础入门：样式引入与核心概念

一、CSS的三种引入方式

1. 内联样式

适用场景：快速调试单个元素的样式语法：直接在HTML标签中使用style属性示例：

<p style="color: red; font-size: 14px;">内联样式示例文本</p>

缺点：难以维护，无法复用样式规则。

2. 内部样式表

适用场景：单页面样式管理语法：在HTML文件的<head>标签内添加<style>块示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: #f0f0f0; }
        h1 { color: blue; text-align: center; }
    </style>
</head>
<body>
    <h1>内部样式表示例标题</h1>
</body>
</html>

优点：页面级样式隔离，避免污染全局样式。

3. 外部样式表

适用场景：多页面共享样式语法：通过<link>标签引入独立的.css文件示例： styles.css：

.container {
    max-width: 1200px;
    margin: 0 auto;
}

index.html：

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">内容区域</div>
</body>

优势：

代码复用性强
便于团队协作
浏览器缓存优化性能

二、样式优先级规则

引入方式	优先级	作用范围
内联样式	最高	单个元素
内部样式表	中	当前页面
外部样式表	低	全局

冲突解决：当多个样式规则冲突时，优先级遵循： !important > 内联样式 > ID选择器 > 类选择器 > 元素选择器

三、最佳实践建议

开发环境：使用外部样式表便于维护
生产环境：压缩CSS文件（如styles.min.css）
调试技巧：通过浏览器开发者工具实时修改样式