您现在的位置是：网站首页 > CSS的三种引入方式文章详情

CSS的三种引入方式

陈川【 CSS 】 37052人已围观 2937字

内联样式

内联样式是直接将CSS代码写在HTML元素的style属性中，这种方式优先级最高，但不利于维护和复用。内联样式适用于需要临时覆盖其他样式的情况，或者在小范围内应用特定样式。

<p style="color: red; font-size: 16px;">这是一段红色文字</p>
<div style="background-color: #f0f0f0; padding: 10px;">带背景色的容器</div>

内联样式的优点在于：

优先级最高，可以快速覆盖其他样式
不需要额外的CSS文件
适合快速原型开发或测试

但缺点也很明显：

难以维护，特别是当项目规模扩大时
无法复用样式
导致HTML结构臃肿
不利于实现响应式设计

内部样式表

内部样式表是将CSS代码写在HTML文档的<head>部分的<style>标签内。这种方式适合单个页面特有的样式，或者当外部样式表不可用时作为备用方案。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .primary-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="primary-button">提交</button>
    </div>
</body>
</html>

内部样式表的特点：

只对当前页面有效
比内联样式更易于维护
可以定义选择器和规则集
加载速度快，不需要额外的HTTP请求

使用场景包括：

小型单页应用
需要快速测试样式效果
页面特有的样式规则

外部样式表

外部样式表是最常用、最推荐的CSS引入方式，它将CSS代码保存在单独的.css文件中，然后通过<link>标签引入HTML文档。这种方式实现了内容与表现的完全分离，具有最佳的维护性和复用性。

创建styles.css文件：

/* styles.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
}

.header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

.nav-item {
    display: inline-block;
    margin-right: 15px;
}

@media (max-width: 768px) {
    .nav-item {
        display: block;
        margin-bottom: 10px;
    }
}

在HTML中引入：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <!-- 可以引入多个样式表 -->
    <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
    <header class="header">
        <nav>
            <a href="#" class="nav-item">首页</a>
            <a href="#" class="nav-item">产品</a>
            <a href="#" class="nav-item">关于我们</a>
        </nav>
    </header>
</body>
</html>

外部样式表的优势：

实现结构与样式的完全分离
一个样式表可以被多个页面共享
浏览器可以缓存CSS文件，提高加载速度
便于团队协作和维护
可以利用CSS预处理器如Sass/Less

最佳实践建议：

按照功能模块拆分CSS文件
使用有意义的命名规范
添加必要的注释
考虑使用CSS方法论如BEM
利用构建工具合并和压缩CSS文件

样式优先级与层叠规则

当多种引入方式同时存在时，浏览器会根据以下规则确定最终应用的样式：

!important声明优先级最高
内联样式的优先级高于内部和外部样式表
内部和外部样式表的优先级取决于它们在文档中的顺序，后定义的规则会覆盖先定义的相同规则
选择器特异性决定相同来源规则的优先级

<style>
    p { color: blue; } /* 特异性: 0,0,1 */
    .text { color: green; } /* 特异性: 0,1,0 */
    #special { color: purple; } /* 特异性: 1,0,0 */
</style>

<p class="text" id="special" style="color: red;">这段文字会显示红色</p>