编辑“︁CSS内部样式表”︁（章节）

= CSS内部样式表 =

'''CSS内部样式表'''（Internal Style Sheet）是一种将CSS样式规则直接嵌入到HTML文档中的方法，通过使用{{tag|style|open}}标签在HTML文档的{{tag|head|open}}部分定义样式。这种方法适用于单个HTML页面需要特定样式的情况，比内联样式更易于维护，但不如外部样式表（External Style Sheet）灵活。

== 基本语法 ==

内部样式表的基本语法是在HTML文档的{{tag|head|open}}部分插入一个{{tag|style|open}}标签，并在其中编写CSS规则。语法如下：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        /* CSS规则写在这里 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用内部样式表的示例。</p>
</body>
</html>
</syntaxhighlight>

=== 代码解释 ===
* {{tag|style|open}}标签必须放在{{tag|head|open}}部分。
* 在{{tag|style|open}}标签内，可以编写标准的CSS规则，如选择器（{{code|body}}, {{code|h1}}, {{code|p}}）和声明块（{{code|{ ... }}}）。
* 这些样式会应用于整个HTML文档。

== 内部样式表的优缺点 ==

=== 优点 ===
1. '''集中管理'''：所有样式规则都集中在{{tag|head|open}}部分，便于修改和维护。
2. '''适用于单页应用'''：如果只有一个HTML文件需要样式，内部样式表比外部样式表更方便。
3. '''优先级适中'''：内部样式表的优先级高于外部样式表，但低于内联样式（Inline Style）。

=== 缺点 ===
1. '''不可复用'''：样式仅适用于当前HTML文件，无法跨页面共享。
2. '''增加HTML文件大小'''：如果样式较多，HTML文件会变得臃肿。
3. '''不利于缓存'''：浏览器无法缓存内部样式表，而外部样式表可以被缓存以提高加载速度。

== 实际应用场景 ==

内部样式表适合以下场景：
* 开发小型单页网站或Demo页面。
* 快速原型设计，无需创建额外的CSS文件。
* 当页面需要独特的样式，且不与其他页面共享时。

=== 示例：博客文章页 ===
假设你正在开发一个博客系统，其中某篇文章需要特殊的排版样式，但其他文章不需要。这时可以使用内部样式表：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>特殊排版文章</title>
    <style>
        article {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <article>
        <h1>CSS内部样式表的应用</h1>
        <p>本文介绍如何使用<span class="highlight">内部样式表</span>为特定页面添加独特样式。</p>
    </article>
</body>
</html>
</syntaxhighlight>

== 优先级规则 ==

CSS样式的优先级遵循以下规则（从高到低）：
1. 内联样式（{{code|style}}属性）
2. 内部样式表（{{tag|style|open}}标签）
3. 外部样式表（{{tag|link|open}}引入的CSS文件）
4. 浏览器默认样式

可以用以下mermaid图表示优先级：

<mermaid>
graph TD
    A[内联样式] -->|最高优先级| B[内部样式表]
    B --> C[外部样式表]
    C --> D[浏览器默认样式]
</mermaid>

== 高级用法 ==

=== 使用媒体查询 ===
内部样式表也可以包含响应式设计的媒体查询：

<syntaxhighlight lang="html">
<style>
    body {
        font-size: 16px;
    }
    @media (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }
</style>
</syntaxhighlight>

=== 使用CSS变量 ===
CSS变量（自定义属性）也可以在内部样式表中定义和使用：

<syntaxhighlight lang="html">
<style>
    :root {
        --primary-color: #3498db;
    }
    button {
        background-color: var(--primary-color);
    }
</style>
</syntaxhighlight>

== 总结 ==

* 内部样式表通过{{tag|style|open}}标签嵌入HTML文档的{{tag|head|open}}部分。
* 适合单页应用或需要独特样式的页面。
* 优先级高于外部样式表，但低于内联样式。
* 可以包含媒体查询和CSS变量等高级特性。

通过合理使用内部样式表，可以在保持代码整洁的同时为特定页面添加样式。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS基础]]