CSS内部样式表[编辑 | 编辑源代码]

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

基本语法[编辑 | 编辑源代码]

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

<!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>

代码解释[编辑 | 编辑源代码]

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

内部样式表的优缺点[编辑 | 编辑源代码]

优点[编辑 | 编辑源代码]

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

缺点[编辑 | 编辑源代码]

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

实际应用场景[编辑 | 编辑源代码]

内部样式表适合以下场景：

开发小型单页网站或Demo页面。
快速原型设计，无需创建额外的CSS文件。
当页面需要独特的样式，且不与其他页面共享时。

示例：博客文章页[编辑 | 编辑源代码]

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

<!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>

优先级规则[编辑 | 编辑源代码]

CSS样式的优先级遵循以下规则（从高到低）：

1. 内联样式（

style

属性）

2. 内部样式表（<style>标签） 3. 外部样式表（<link>引入的CSS文件） 4. 浏览器默认样式

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

高级用法[编辑 | 编辑源代码]

使用媒体查询[编辑 | 编辑源代码]

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

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

使用CSS变量[编辑 | 编辑源代码]

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

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

总结[编辑 | 编辑源代码]

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

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