如何在HTML页面中插入CSS样式？

介绍

HTML是网页的基础，但如果想要页面更加美观，就需要使用CSS样式来装饰它。在这篇文章中，我们将介绍如何在HTML页面中插入CSS样式，以及如何使用不同的方法来改变页面的样式。

内部样式表

内部样式表是将CSS样式放在HTML文档的标签中的标签中。这种方法通常用于单个网页的样式设置。

    
        <head>
            <style>
                body {
                    background-color: #f5f5f5;
                }
            </style>
        </head>

在上面的例子中，我们将背景颜色设置为浅灰色。

外部样式表

外部样式表是将CSS样式放在一个单独的.css文件中，然后在HTML文档的标签中使用标签来引用它。这种方法通常用于多个网页使用相同样式的情况下。

    
        <head>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>

在上面的例子中，我们使用了一个名为style.css的外部样式表。

行内样式

行内样式是在HTML标签中直接使用style属性来定义CSS样式。这种方法通常用于单个元素的样式设置。

    
        <p style="color: red;">这是一段红色文字</p>

在上面的例子中，我们将文字颜色设置为红色。

选择器

选择器是CSS中的一种语法，用于指定要应用样式的HTML元素。以下是一些常见的选择器：

标签选择器：指定标签名来应用样式。
类选择器：指定class属性来应用样式。
ID选择器：指定id属性来应用样式。
后代选择器：指定元素的后代来应用样式。

下面是一些例子：

    
        /* 标签选择器 */
        p {
            color: blue;
        }

        /* 类选择器 */
        .red-text {
            color: red;
        }

        /* ID选择器 */
        #header {
            background-color: gray;
        }

        /* 后代选择器 */
        div p {
            font-size: 20px;
        }