font_color

在一行文字中实现不同颜色有多种方法：

1. 使用多个 `<span>` 标签（最常用）

<p>
    这是<span style="color: red;">红色</span>文字，
    这是<span style="color: blue;">蓝色</span>文字，
    这是<span style="color: green;">绿色</span>文字。
</p>

优化版（使用CSS类）

<style>
    .red { color: #ff0000; }
    .blue { color: #0066cc; }
    .green { color: #00aa00; }
    .highlight { background-color: yellow; }
</style>

<p>
    这是<span class="red">红色</span>文字，
    <span class="blue">蓝色文字</span>，
    和<span class="green">绿色文字</span>。
</p>

2. 使用 `<mark>` 或自定义标签

<p>
    默认文字，
    <mark style="background-color: #ffeb3b; color: black;">高亮文字</mark>，
    <strong style="color: purple;">加粗紫色</strong>。
</p>

3. 渐变文字颜色

<style>
    .gradient-text {
        background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 24px;
        font-weight: bold;
    }
</style>

<p class="gradient-text">彩虹渐变文字效果</p>

4. 单个字符不同颜色

<style>
    .rainbow-text {
        font-size: 24px;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }
    .rainbow-text span:nth-child(1) { color: #ff0000; } /* 红 */
    .rainbow-text span:nth-child(2) { color: #ff9900; } /* 橙 */
    .rainbow-text span:nth-child(3) { color: #ffff00; } /* 黄 */
    .rainbow-text span:nth-child(4) { color: #00ff00; } /* 绿 */
    .rainbow-text span:nth-child(5) { color: #0099ff; } /* 蓝 */
    .rainbow-text span:nth-child(6) { color: #6633ff; } /* 靛 */
    .rainbow-text span:nth-child(7) { color: #cc00ff; } /* 紫 */
</style>

<p class="rainbow-text">
    <span>彩</span><span>虹</span><span>文</span><span>字</span><span>效</span><span>果</span><span>！</span>
</p>

5. 使用JavaScript动态生成

<p id="colorful-text">这是一行多彩的文字</p>

<script>
    const text = "这是一行多彩的文字";
    const colors = ['#ff0000', '#ff6600', '#ffcc00', '#33cc33', '#3399ff', '#9966ff'];
    const element = document.getElementById('colorful-text');
    
    element.innerHTML = '';
    for(let i = 0; i < text.length; i++) {
        const span = document.createElement('span');
        span.textContent = text[i];
        span.style.color = colors[i % colors.length];
        element.appendChild(span);
    }
</script>

6. 完整实用示例

示例1：关键词高亮

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.8;
            padding: 20px;
        }
        
        .sentence {
            font-size: 18px;
            margin: 20px 0;
        }
        
        /* 关键词颜色 */
        .keyword-1 { color: #e74c3c; font-weight: bold; }
        .keyword-2 { color: #3498db; font-weight: bold; }
        .keyword-3 { color: #2ecc71; font-weight: bold; }
        .keyword-4 { color: #f39c12; font-weight: bold; }
        .keyword-5 { color: #9b59b6; font-weight: bold; }
        
        /* 语法高亮 */
        .code-keyword { color: #d73a49; }
        .code-string { color: #032f62; }
        .code-comment { color: #6a737d; }
        .code-function { color: #6f42c1; }
        
        /* 渐变效果 */
        .gradient-rainbow {
            background: linear-gradient(90deg, 
                #ff0000, #ff9900, #ffff00, #00ff00, 
                #0099ff, #6633ff, #cc00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>一行文字不同颜色示例</h2>
    
    <p class="sentence">
        在<span class="keyword-1">人工智能</span>时代，
        <span class="keyword-2">机器学习</span>和
        <span class="keyword-3">深度学习</span>技术正在改变
        <span class="keyword-4">各行各业</span>。
    </p>
    
    <p class="sentence">
        学习<span class="code-keyword">HTML</span>、
        <span class="code-keyword">CSS</span>和
        <span class="code-keyword">JavaScript</span>是
        <span class="code-function">前端开发</span>的基础，
        <span class="code-comment">/* 注释：重要技能 */</span>。
    </p>
    
    <p class="gradient-rainbow">
        彩虹渐变文字效果展示
    </p>
    
    <p class="sentence">
        价格：<span style="color: #e74c3c; font-size: 1.2em;">¥199</span>
        <del style="color: #95a5a6; margin: 0 10px;">¥299</del>
        节省：<span style="color: #27ae60;">¥100</span>
    </p>
    
    <div style="background: #f8f9fa; padding: 15px; border-radius: 5px;">
        <p style="margin: 0;">
            状态：
            <span style="color: #2ecc71; font-weight: bold;">● 在线</span>
            <span style="color: #e74c3c; margin-left: 15px;">● 离线</span>
            <span style="color: #f39c12; margin-left: 15px;">● 忙碌</span>
        </p>
    </div>
</body>
</html>

示例2：代码语法高亮

<div style="background: #f5f5f5; padding: 15px; border-radius: 5px; font-family: monospace;">
    <span style="color: #d73a49;">function</span> 
    <span style="color: #6f42c1;">calculateSum</span>(
    <span style="color: #005cc5;">a</span>, 
    <span style="color: #005cc5;">b</span>) {
    <br>&nbsp;&nbsp;<span style="color: #d73a49;">return</span> 
    <span style="color: #005cc5;">a</span> + 
    <span style="color: #005cc5;">b</span>;
    <br>}
</div>

示例3：价格标签和状态

<p>
    <span style="color: #333; font-size: 14px;">原价：</span>
    <del style="color: #999; margin-right: 10px;">¥299</del>
    <span style="color: #e4393c; font-size: 24px; font-weight: bold;">¥199</span>
    <span style="background: #e4393c; color: white; padding: 2px 8px; border-radius: 3px; margin-left: 10px; font-size: 12px;">
        立省100元
    </span>
</p>

7. 特殊效果

文字阴影实现立体感

<p style="font-size: 20px;">
    正常文字
    <span style="color: #ff0000; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
        带阴影的红色文字
    </span>
</p>

荧光效果

<p>
    <span style="
        color: #fff;
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff;
        background-color: #000;
        padding: 5px 10px;
        border-radius: 5px;
    ">
        荧光文字效果
    </span>
</p>

8. 响应式颜色变化

<style>
    .responsive-color {
        font-size: 18px;
    }
    
    .responsive-color .part1 { color: #e74c3c; }
    .responsive-color .part2 { color: #3498db; }
    .responsive-color .part3 { color: #2ecc71; }
    
    /* 移动端改变颜色 */
    @media (max-width: 768px) {
        .responsive-color .part1 { color: #ff6b6b; }
        .responsive-color .part2 { color: #4ecdc4; }
        .responsive-color .part3 { color: #ffd166; }
    }
</style>

<p class="responsive-color">
    <span class="part1">第一部分</span>
    <span class="part2">第二部分</span>
    <span class="part3">第三部分</span>
</p>

9. 动画颜色变化

<style>
    .color-animation span {
        display: inline-block;
        animation: colorChange 3s infinite;
    }
    
    .color-animation span:nth-child(2) { animation-delay: 0.5s; }
    .color-animation span:nth-child(3) { animation-delay: 1s; }
    .color-animation span:nth-child(4) { animation-delay: 1.5s; }
    
    @keyframes colorChange {
        0% { color: #ff0000; }
        25% { color: #00ff00; }
        50% { color: #0000ff; }
        75% { color: #ffff00; }
        100% { color: #ff0000; }
    }
</style>

<p class="color-animation">
    <span>动</span><span>画</span><span>颜</span><span>色</span>
</p>

10. 实用工具函数

JavaScript自动分割颜色

<p id="auto-color">自动多彩文字效果展示</p>

<script>
    function colorizeText(elementId, colors = ['#ff0000', '#00ff00', '#0000ff']) {
        const element = document.getElementById(elementId);
        const text = element.textContent;
        
        element.innerHTML = '';
        for(let i = 0; i < text.length; i++) {
            const span = document.createElement('span');
            span.textContent = text[i];
            span.style.color = colors[i % colors.length];
            element.appendChild(span);
        }
    }
    
    // 使用
    colorizeText('auto-color', ['#ff6b6b', '#48dbfb', '#1dd1a1', '#feca57']);
</script>

最佳实践建议

语义化优先：

<!-- 好：强调重点 -->
<p>重要提示：<strong style="color: red;">今天截止！</strong></p>

<!-- 不好：滥用span -->
<p><span style="color: red;">重要提示：</span>今天截止！</p>

使用CSS类而不是内联样式：

/* 好：可复用 */
.highlight-red { color: #ff0000; font-weight: bold; }
.highlight-blue { color: #0066cc; }

考虑可访问性：
- 确保颜色对比度足够
- 不要仅用颜色传达信息

最简单的方法

这是一行<span style="color: red;">红色</span>和<span style="color: blue;">蓝色</span>的文字。

总结：最常用的是用 <span> 标签配合 style="color: 颜色值;"，根据需求可以选择单个字符变色、关键词高亮或渐变效果。

1. 使用多个 <span> 标签（最常用）

优化版（使用CSS类）

2. 使用 <mark> 或自定义标签

3. 渐变文字颜色

4. 单个字符不同颜色

5. 使用JavaScript动态生成

6. 完整实用示例

示例1：关键词高亮

示例2：代码语法高亮

示例3：价格标签和状态

7. 特殊效果

文字阴影实现立体感

荧光效果

8. 响应式颜色变化

9. 动画颜色变化

10. 实用工具函数

JavaScript自动分割颜色

最佳实践建议

最简单的方法

1. 使用多个 `<span>` 标签（最常用）

2. 使用 `<mark>` 或自定义标签