国际访客建议访问 Primers 编程伙伴 国际服 以获得更好的体验。 快速访问 HTML 样式 CSS 简介

# CSS

本章节仅介绍 CSS 的基本用法，关于 CSS 更详细的知识请查看 CSS 教程 。

层叠样式表（Cascading Style Sheets）是一种用于描述HTML或XML(包括SVG、XHTML等)文档样式的配置。CSS 的基本格式如下：

选择器 {
    样式名: 样式值;
    样式名: 样式值;
    样式名: 样式值;
}

  • 选择器 决定哪些元素受影响，可以设为 h1、h2、p 等。

  • 样式名 和 样式值 决定样式，例如 color:red 表示颜色为红色。

在 HTML 中添加 CSS 的方式有三种：

  • 内联样式 - 在 HTML 元素中添加 style 属性，内容为 CSS 样式

  • 内部样式 - 在 <head> 元素中添加 <style> 元素，内容为 CSS 样式

  • 外部样式 - 在 <head> 元素中添加 <link> 元素，加载 CSS 文件

# 内联样式

CSS 内联样式通过 HTML 元素的 style 属性将样式应用于单个 HTML 元素。

  • 内联样式应用于所在的元素，因此不需要选择器

<p> 
    这是一个段落，它
    <span style="color:red;">五</span>
    <span style="color:yellow;">颜</span>
    <span style="color:blue;">六</span>
    <span style="color:green;">色</span>
</p>

# 内部样式

CSS 内部样式通过 <style> 标签将样式应用于单个 HTML 文档。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="utf-8"/>
        <style>
            h1 {
                color: red;
            }

            p {
                color: green;
            }
        </style>
    </head>

    <body>
        <h1>这是标题</h1>
        <p>这是段落</p>
    </body>
</html>

# 外部样式

CSS 内部样式通过 <link> 标签将外部的 CSS 文件应用于单个 HTML 文档。

<link rel="stylesheet" href="CSS 文件的链接"/>

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://xplanc.org/view/view.css"/>
    </head>

    <body>
        <p class="view-text-miku">view-text-miku</p>
        <p class="view-text-red">view-text-red</p>
        <p class="view-text-pink">view-text-pink</p>
        <p class="view-text-purple">view-text-purple</p>
        <p class="view-text-indigo">view-text-indigo</p>
        <p class="view-text-blue">view-text-blue</p>
        <p class="view-text-cyan">view-text-cyan</p>
        <p class="view-text-teal">view-text-teal</p>
        <p class="view-text-green">view-text-green</p>
        <p class="view-text-yellow">view-text-yellow</p>
        <p class="view-text-orange">view-text-orange</p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://xplanc.org/view/view.css"/>
    </head>

    <body>
        <p class="view-text-miku">view-text-miku</p>
        <p class="view-text-red">view-text-red</p>
        <p class="view-text-pink">view-text-pink</p>
        <p class="view-text-purple">view-text-purple</p>
        <p class="view-text-indigo">view-text-indigo</p>
        <p class="view-text-blue">view-text-blue</p>
        <p class="view-text-cyan">view-text-cyan</p>
        <p class="view-text-teal">view-text-teal</p>
        <p class="view-text-green">view-text-green</p>
        <p class="view-text-yellow">view-text-yellow</p>
        <p class="view-text-orange">view-text-orange</p>
    </body>
</html>
本文 更新于: 2025-05-31 19:53:16 创建于: 2025-05-31 19:53:16